<tbody>
@foreach (var item in Model)
{
<tr>
@if (showMake)
{
<td>
@Html.DisplayFor(modelItem => item.MakeNavigation.Name)
</td>
}
<td>
@Html.DisplayFor(modelItem => item.Color)
</td>
<td>
@Html.DisplayFor(modelItem => item.PetName)
</td>
<td>
<item-edit item-id="@item.Id"></item-edit> |
<item-details item-id="@item.Id"></item-details> |
<item-delete item-id="@item.Id"></item-delete>
</td>
</tr>
}
</tbody>
</table>
Представление Index
При наличии частичного представления
_CarListPartial
представление
Index
будет небольшим. Создайте в каталоге
Views\Cars
новый файл представления по имени
Index.cshtml
. Удалите весь сгенерированный код и добавьте следующую разметку:
@model IEnumerable<Car>
@{
ViewData["Title"] = "Index";
}
<h1>Vehicle Inventory</h1>
<partial name="Partials/_CarListPartial" model="@Model"/>
Частичное представление
_CarListPartial
вызывается со значением модели содержащего представления (
IEnumerable<Car>
), которое передается с помощью атрибута
model
. В итоге модель частичного представления устанавливается в объект, переданный вспомогательной функции дескриптора
<partial>
.
Чтобы взглянуть на представление
Index
, модифицируйте метод
Index()
класса
CarsController
, как показано ниже:
[Route("/[controller]")]
[Route("/[controller]/[action]")]
public IActionResult Index()
=> View(_repo.GetAllIgnoreQueryFilters());
Запустив приложение и перейдя по ссылке
https://localhost:5001/Cars/Index
, вы увидите список автомобилей (рис. 31.4).
В правой части списка отображаются специальные вспомогательные функции дескрипторов.
Представление ВуMake
Представление
ВуMake
похоже на
Index
, но настраивает частичное представление так, что информация о производителе отображается только в заголовке страницы. Создайте в каталоге
Views\Cars
новый файл представления по имени
ВуMake.cshtml
. Удалите весь сгенерированный код и добавьте следующую разметку:
@model IEnumerable<Car>
@{
ViewData["Title"] = "Index";
}
<h1>Vehicle Inventory for @ViewBag.MakeName</h1>
@{
var mode = new ViewDataDictionary(ViewData) {{"ByMake", true}};
}
<partial name="Partials/_CarListPartial" model="Model" view-data="@mode"/>
Отличия заметить легко. Здесь создается экземпляр
ViewDataDictionary
, содержащий свойство
ByMake
из
ViewBag
, который затем вместе с моделью передается частичному представлению, что позволяет скрыть информацию о производителе. Метод действия для этого представления должен получить все автомобили с указанным значением
MakeId
и установить
ViewBag
в
MakeName
с целью отображения в пользовательском интерфейсе. Оба значения берутся из маршрута. Добавьте в класс
CarsController
новый метод действия по имени
ByMake()
:
[HttpGet("/[controller]/[action]/{makeId}/{makeName}")]
public IActionResult ByMake(int makeId, string makeName)
{
ViewBag.MakeName = makeName;
return View(_repo.GetAllBy(makeId));
}
Запустив приложение и перейдя по ссылке
https://localhost:5001/Cars/l/VW
, вы увидите список, показанный на рис. 31.5.
Представление Details
Создайте в каталоге
Views\Cars
новый файл представления по имени
Details.cshtml
. Удалите весь сгенерированный код и добавьте следующую разметку:
