PRACTICAL 2: CREATION OF WEB APPS IN MVC

STEPS:
1. File > New > Project > ASP.NET Core Web Application > select MVC template.
2. In Models > Add > New Item > Class > product.cs and write the model code.
3. In Controllers > HomeController.cs > write the code to create the product list.
4. In Views > Home > Index.cshtml > write the code to show the product list.
5. In wwwroot > Add > New Folder "images" > add the product images
   (laptop.jpg, mousee.jpg, cpu.jpg, keyboard.jpg, moniter.jpg).
6. Build > Build Solution (no errors) > Run.

CODE: (Models/product.cs)
namespace WebApplication1.Models
{
    public class product
    {
        public int id { get; set; }
        public string Name { get; set; }
        public Decimal Price { get; set; }
        public string ImagePath { get; set; }
    }
}

CODE: (Controllers/HomeController.cs)
using System.Collections.Generic;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            var products = new List<product>
            {
                new product{id=1,Name="Laptop",Price=35000,ImagePath="/images/laptop.jpg"},
                new product{id=2,Name="Mouse",Price=300,ImagePath="/images/mousee.jpg"},
                new product{id=3,Name="C.P.U",Price=15000,ImagePath="/images/cpu.jpg"},
                new product{id=4,Name="Keyboard",Price=3000,ImagePath="/images/keyboard.jpg"},
                new product{id=5,Name="Monitor",Price=20000,ImagePath="/images/moniter.jpg"}
            };
            return View(products);
        }

        public IActionResult Privacy()
        {
            return View();
        }
    }
}

CODE: (Views/Home/Index.cshtml)
@model IEnumerable<WebApplication1.Models.product>
<h2>Product List</h2>
<ul>
    @foreach (var product in Model)
    {
        <li>
            <img src="@product.ImagePath"
                 alt="@product.Name"
                 style="width:150px;height:auto" />
            @product.Price
        </li>
    }
</ul>

OUTPUT:
The browser shows "Product List" with each product image (150px wide) and its price.
