Learn C#.NET, ASP.NET MVC 5,ASP.NET Core that you can increase your knowledge and coding to develop the real-time project.


Thursday, September 5, 2019

Model In ASP.NET MVC 5

We will learn Model in ASP.NET MVC 5 and add model in MVC 5. Also, we will learn about pass data from controller to view in ASP.NET MVC 5 with examples.
Model in ASP.NET MVC 5

In this article, you will learn the following points about Model in MVC 5.

  • What is the Model in MVC 5?
  • How to add Model in MVC 5?
  • How to pass data from Controller to View ?.
  • How to use the Model in View?
  • How to bind model List in View?

Following are the previews two articles on ASP.NET MVC 5


What is the Model in MVC 5

  • In MVC M stand for Model and Model is a normal C# class.
  • Model is responsible to handle data and business logic.
  • A model represents the shape of the data.
  • Model is responsible for handling database related changes
Model diagram as follows,
Model in ASP.NET MVC 5
As per the above figure, the user enters the URL on the browser the given request go to the server and call the routing which will execute the appropriate controller. And based on request controller execute the appropriate controller action method. It will pass the request to model if the model has database related operation then it will perform database related operation and send the request back to the controller action method. After completing this request, the controller returns the response to the user.


How to add Model in MVC 5?

Create a model name like 'Product.csinside the model folder.

Step 1:
First, create an ASP.NET MVC application using Visual Studio 2017 and provide the name “MVC5ModelDemo”.
Model in ASP.NET MVC 5


Step 2:
Go to solution explorer => Views Folder => Right-click on “Model” Folder >> go to “Add” >> Click on [Class] as follow.
Model in ASP.NET MVC 5


Step 3:
Provide the required name like Product.csthen click on Addbutton as follow.
Model in ASP.NET MVC 5



We can add properties and method as per our requirement.Product.cs code as follow:


 public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int OrderId { get; set; }
        public int Quantity { get; set; }

        public static Product GetProduct()
        {
            Product product = new Product() { ProductId=01, ProductName="C# Book", OrderId=02, Quantity=2 };
            return product;
        }
    }

How to pass data from Controller to View?

First, we need to import the model namespace on HomeController “using MVC5ModalDemo.Models. Add the following code in HomeController.

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
         Product product = Product.GetProduct();
            return View(product);
        }
}

How to use the Model in View?


Create Index.cshtmlpage in Home folder inside the View. To access the product model in view first, we need to import the Product model namespace then we can able to use the product model in view. Use the namespace @model MVC5ModelDemo.Models.Producton top of the view page and add the following code in Index.cshtmlView.

@model MVC5ModalDemo.Models.Product

@{
    ViewBag.Title = "Index";
}

<h3>Product Page</h3>
<table border="1" class="table table-bordered table-responsive">
    <thead>
        <tr class="btn-primary">
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Order ID</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Model.ProductId</td>
            <td>@Model.ProductName</td>
            <td>@Model.OrderId</td>
            <td>@Model.Quantity</td>
        </tr>
    </tbody>
</table>


Output:
Model in ASP.NET MVC 5

How to bind model List in View

To bind the model list to view first we need to create a method which returns the list of product in Product.cs Class as follow.
public static List<Product> GetAllProduct()
        {
            List<Product> products = new List<Product>() {
                new Product() { ProductId = 01, ProductName = "C# Book", OrderId = 02, Quantity = 2 },
                new Product() { ProductId = 02, ProductName = "ASP.NET Book", OrderId = 02, Quantity = 2 },
                new Product() { ProductId = 03, ProductName = "ASP.NET CORE Book", OrderId = 02, Quantity = 2 }
            };
            
            return products;
        }


Call the “GetAllProduct()” method from the controller and pass the product list to the View as follow. Add following code in Home controller.
public ActionResult Index()
        {
         List<Product> productList = Product.GetAllProduct();
            return View(productList);
        }


Add the following code in Index Html page to bind the model list and display the result to the browser.Use the foreach loop to retrieve the product model list data and display to the Html table.

@model IEnumerable<MVC5ModalDemo.Models.Product>

@{
    ViewBag.Title = "Index";
}
<h3>All Product List</h3>
<table border="1" class="table table-bordered table-responsive">
    <thead>
        <tr class="btn-primary">
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Order ID</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.ProductId</td>
                <td>@item.ProductName</td>
                <td>@item.OrderId</td>
                <td>@item.Quantity</td>
            </tr>
        }
    </tbody>
</table>


Output:
Model in ASP.NET MVC 5


References:


I hope you understand the concepts of Model in ASP.NET MVC 5. If you like this article then please share this article that will help other people to increase there knowledge.

Thanks for reading.


More detail watch follow video on Model In ASP.NET MVC 5:



Share:

0 comments:

Post a Comment

Upcoming Articles/Videos

Design Pattern
SOLID Design Principles
Copyright © Programming With Shri | Powered by Shrimant Telgave Home | Disclaimer | Privacy Policy | Terms and Conditions Design by Shrimant Telgave