ASP.Net Core MVC Project Part 7

In previous article we have seen steps to display products on page by using List() action method of ProductController. Please read previous article before proceeding further. This article is seventh article in ASP.Net Core MVC Project Series. You can download source code from below URL:

https://github.com/vijendra-ksh/aspnetcoremvc_project_part7

In this article we will extend product list page by using ViewModel.

Product Controller (discussed in previous article):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using eShop.Repositories;
using Microsoft.AspNetCore.Mvc;

namespace eShop.Controllers
{
public class ProductController : Controller
{
private readonly IProductRepository _productRepository;
private readonly ICategoryRepository _categoryRepository;
public ProductController(IProductRepository productRepository, ICategoryRepository categoryRepository)
{
    _productRepository = productRepository;
    _categoryRepository = categoryRepository;
}
public ViewResult List()
{
    return View(_productRepository.GetAllProduct);
}
}
}

List.cshtml (discussed in previous article) :

@model IEnumerable<eShop.Models.Product>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Products</title>
    </head>
        <body>
            @foreach (var product in Model)
            { 
            <div>
                <h2>@product.Name</h2>
                <h3>@product.Price.ToString("c")</h3>
                <h4>@product.Category.CategoryName</h4>
            </div>
            }
        </body>
    </html>

ViewModel: ViewModel is a class that will contain all the data for the view, it will be constructed in a controller and then it will be passed to the View from controller.

Create ViewModel: Right click on project and add a folder ‘ViewModels’.

ViewModels Folder

Now add a class in ViewModels folder. Right click on ViewModels folder and add a class ‘ProductListViewModel.cs’. Now add 2 properties as shown below:

ProductListViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using eShop.Models;

namespace eShop.ViewModels
{
    public class ProductListViewModel
    {
        public IEnumerable<Product> Products { get; set; }
        public string CurrentCategory { get; set; }
    }
}

CurrentCategory property will display the category on page for the displayed products. Another property Products is collection of products. Now we will change List() action method in Product controller to use ProductListViewModel class. Below is the code of Product controller with changes in List() action method:

Product Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using eShop.Repositories;
using Microsoft.AspNetCore.Mvc;
using eShop.ViewModels;
namespace eShop.Controllers
{
public class ProductController : Controller
{
private readonly IProductRepository _productRepository;
private readonly ICategoryRepository _categoryRepository;
public ProductController(IProductRepository productRepository, ICategoryRepository categoryRepository)
{
    _productRepository = productRepository;
    _categoryRepository = categoryRepository;
}
public IActionResult List()
{
    //return View(_productRepository.GetAllProduct);
    var productListViewModel = new ProductListViewModel();
    productListViewModel.Products = _productRepository.GetAllProduct;
    productListViewModel.CurrentCategory = "BestSellers";
    return View(productListViewModel);
}
}
}

In List() action method we have commented previous implementation and initialize both properties of ProductListViewModel class. Return type of action method is changed to IActionResult which can return View as well as other action results.

Now we will change view to use ViewModel class.

List.cshtml

@model eShop.ViewModels.ProductListViewModel
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Products</title>
    </head>
        <body>
            <h1>@Model.CurrentCategory</h1>
            @foreach (var product in Model.Products)
            { 
            <div>
                <h2>@product.Name</h2>
                <h3>@product.Price.ToString("c")</h3>
                <h4>@product.Category.CategoryName</h4>
            </div>
            }
        </body>
    </html>

Now both action method and view are changed. Press F5 and start debugging. Paste below URL in browser to view the output.

https://localhost:44331/product/list

Here we are sending request to List action method of Product controller. Port 44331 may be different on your computer. Below is the output:

Product List

Now you can see, Current Category is displayed along with product list. You can download code from https://github.com/vijendra-ksh/aspnetcoremvc_project_part7

In this article we have seen use of ViewModel in our project. Other articles in this series:

ASP.Net Core MVC Project Part 1
ASP.Net Core MVC Project Part 3
ASP.Net Core MVC Project Part 4
ASP.Net Core MVC Project Part 5
ASP.Net Core MVC Project Part 6

Please like our Facebook page for getting new posts update.
https://www.facebook.com/logixn

Leave a Comment

Your email address will not be published. Required fields are marked *