Lesson 12 - E-shop in ASP.NET Core MVC - Finishing product index

In the previous lesson, E-shop in ASP.NET Core MVC - Product index, we prepared both the controller and the viewmodel. In today's ASP.NET Core tutorial, we're going to create the view and finish the product listing. This is how the final view should look like:

Product listing

Model, namespace, and SelectList

Let's create the view in the Views\Product\ folder and name it Index.cshtml. At the beginning of the view, we have to specify the model data type, which in our case is the ProductIndexViewModel class. Next, we'll prepare the PagedList.Mvc namespace and the appropriate cascading styles. To do this, we'll create one more file for our own cascading styles (a file named ProductIndex.css in the css\ folder of root):

@model EShop.Models.ProductViewModels.ProductIndexViewModel
@using X.PagedList.Mvc.Core;
<link href="~/css/PagedList.css" rel="stylesheet" type="text/css" />
<link href="~/css/ProductIndex.css" rel="stylesheet" />
@{
    ViewData["Title"] = "Products";
}

Form

In the form header, we'll specify the controller, action, and access method for sending data. We'll include two hidden fields for the

...End of the preview...
Continue further