Render ASP.NET MVC PartialView with Model

This article explains how you can render partial view in main view with model data.

You can render Partial View using Html.RenderAction and Html.RenderPartial helper methods.


Create a new ASP.NET MVC application with name RenderPartialViewWithModel or other name which you like. You may use basic or MVC template to create new application. You may follow steps from getting started tutorial with ASP.NET MVC.

Follow below steps to use Partial View with Model

  1. Add Model

    In this step you will create two models with name Order and OrderLineItem. Order will be used for parent view and OrderLineItem will be used for Partial View.

    Right click on Models folder and add two classes to it with name Order and OrderLineItem.

    OrderLineItem Model

        namespace RenderPartialViewWithModel.Models
        {
            public class OrderLineItem
            {
                public int ProductID { get; set; }
                public string ProductName { get; set; }
                public int Qty { get; set; }
                public string Price { get; set; }
                public string Discount { get; set; }
            }
        }
                    

    Order Model

        namespace RenderPartialViewWithModel.Models
        {
            public class Order
            {
                public int OrderID { get; set; }
                public string Customer { get; set; }
                public string OrderDate { get; set; }
                public string ShipCity { get; set; }
                public IEnumerable<OrderLineItem> items { get; set; }
            }
        }
                    

    Notice that in Order model we have added IEnumerable<OrderLineItem> which will add multiple rows of OrderLineItem to one Order row. For more details see example of model binding.

  2. Add Controller

    Add a controller with name OrderController. In OrderController you will add a Action Method which returns Order model with data to View.

    Add Index action method in OrderController with below code.

    public ActionResult Index()
    {
    List<OrderLineItem> orderDetails = new List<OrderLineItem> {                 
            new OrderLineItem () { ProductID = 1, ProductName = "Tea",
                                    Qty=10, Price= "10.50", Discount="0.0" },
            new OrderLineItem () { ProductID = 2, ProductName = "Tofu", 
                                    Qty=2, Price= "7.00", Discount="0.50" },
            new OrderLineItem () { ProductID = 3, ProductName = "Aniseed Syrup", 
                                    Qty=4, Price= "15.00", Discount="0.0" },
            new OrderLineItem () { ProductID = 4, ProductName = "Mango", 
                                    Qty=1, Price= "25.00", Discount="1.0" },
            new OrderLineItem () { ProductID = 5, ProductName = "Honey bottle", 
                                        Qty=1, Price= "18.00", Discount="1.0" },
    };
    
    Order order = new Order();
    order.OrderID = 10269;
    order.Customer = "WHITC";
    order.OrderDate = new DateTime(2015, 7, 4).ToShortDateString();
    order.ShipCity = "Seattle";
    order.items = orderDetails;
    return View(order);
    }
                    

    We have use Order ViewModel with required data. Order contains details of OrderLineItems.

  3. Add PartialView

    Right click on Views -> Shared and select Add View.

    In Add View dialog box give name _orderDetailsWithModel, select check box for Create as Partial View and click Ok.

    add partial view in asp.net mvc

    Open _orderDetailsWithModel.cshtml and add below HTML code to it.

    <style>
        #OrderDetails {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
            padding-top:25px; 
            width:35%; 
        }
    
        #OrderDetails tr:nth-child(odd) {
          background-color: #f2f2f2;
        }
    
        #OrderDetails tr:nth-child(even) {
           background-color: #ffffff;
        }
    </style>
    
    @model  RenderPartialViewWithModel.Models.Order
    
    <table id="OrderDetails" class="table" >
        <tr>
            <th>ProductID</th>
            <th>Product Name</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Discount</th>
        </tr>   
    
    @foreach (var orderItem in Model.items)
    {      
        <tr>
            <td>@orderItem.ProductID</td>
            <td>@orderItem.ProductName</td>
            <td>@orderItem.Qty</td>
            <td>@orderItem.Price</td>
            <td>@orderItem.Discount</td>
        </tr>
    }
    
    </table>
                    
  4. Add Order View

    In this step you will add a View with name Index. Use _orderDetailsWithModel partial view to display OrderLineItems.

    Create view in Views -> Order folder. Name it Index. Add below HTML code to index.cshtml.

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    <style type="text/css">
        .bs-example{
        	margin: 20px;
        }
    </style>
    
    @model  RenderPartialViewWithModel.Models.Order
       
    <div class="bs-example">
        <div>
            <table style=" border-spacing: 10px; border-collapse: separate;">
                <tr>
                    <td>
                        <strong>@Html.Label("Order ID:")</strong>
                    </td>
                    <td>
                        @Html.DisplayFor(m => m.OrderID)
                    </td>
                    <td>
                        <strong>@Html.Label("Customer Name:")</strong>
                    </td>
                    <td>
                        @Html.DisplayFor(m => m.Customer)
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>@Html.Label("Order Date:")</strong>
                    </td>
                    <td>
                        @Html.DisplayFor(m => m.OrderDate)
                    </td>
                    <td>
                        <strong>@Html.Label("Ship City:")</strong>
                    </td>
                    <td>
                        @Html.DisplayFor(m => m.ShipCity)
                    </td>
                </tr>
    
            </table>
        </div>
        <div>
            @{Html.RenderPartial("_orderDetailsWithModel", Model.items);}
        </div>    
    </div>
                    

You can also use independent OrderLineItem model with Partial View.

Add below child action in OrderController.

[ChildActionOnly]
public PartialViewResult GetOrderLineItems(int orderId)
{

//get orders as per orderid... here for simplicity I am returning hardcoded OrderLineItems

IEnumerable<OrderLineItem> orderItems = new List<OrderLineItem> {                 
    new OrderLineItem (){ ProductID = 1,ProductName = "Tea", 
            Qty=10, Price= "10.50", Discount="0.0" },
    new OrderLineItem (){ ProductID = 2,ProductName = "Tofu", 
            Qty=2, Price= "7.00", Discount="0.50" },
    new OrderLineItem (){ ProductID = 3,ProductName = "Aniseed Syrup", 
            Qty=4, Price= "15.00", Discount="0.0" },
    new OrderLineItem (){ ProductID = 4,ProductName = "Mango", 
            Qty=1, Price= "25.00", Discount="1.0" },
    new OrderLineItem (){ ProductID = 5,ProductName = "Honey bottle", 
            Qty=1, Price= "18.00", Discount="1.0" },
};
    return PartialView("_orderDetailsWithModel", orderItems);
}
        

Notice that it uses only OrderLineItem model independently.

Call Child action from view. Use below code for this. For more ways to render partial views in mvc.

<div>
    @{Html.RenderAction("GetOrderLineItems", "Order", new { orderId = 10269 });}  
</div>
        

Now navigate to http://localhost:64556/order/index it generates below output.

partial view with model example

Download source code

Speak your mind :
Leave a comment for this article on dotnetbloogers.com