Partial Views

Learning objectives#

• Create and render partial views
• Pass a model to a partial
• Choose between Html.Partial and Html.RenderPartial
• Use child actions for partials that need their own data

Explanation#

A partial view is a .cshtml file without a layout, usually named with a leading underscore (_ProductCard.cshtml) and stored in the controller’s folder or Views/Shared.

@Html.Partial("_ProductCard", product) renders it and returns the HTML as a string. @{ Html.RenderPartial("_ProductCard", product); } writes directly to the response — slightly faster, same result.

A partial receives the model you pass. If you pass none, it gets the parent view’s model, which can cause “The model item passed into the dictionary is of type…” errors.

A child action renders a partial with its own data: @Html.Action("CartSummary", "Cart") runs a full action (with its own model loading) and inserts its output. Mark it [ChildActionOnly] so it cannot be requested by URL.

Controllers can also return PartialView("_Rows", items) — perfect for AJAX requests that refresh part of a page.

Syntax#

1@Html.Partial("_ProductCard", product)
2@{ Html.RenderPartial("_ProductCard", product); }
3@Html.Action("CartSummary", "Cart")          @* child action *@

Code example: A product card partial and a cart-summary child action#

1// Models/Product.cs
2namespace ShopSite.Models
3{
4    public class Product
5    {
6        public int Id { get; set; }
7        public string Name { get; set; }
8        public decimal Price { get; set; }
9    }
10}
11

12// Controllers/ShopController.cs
13using System.Collections.Generic;
14using System.Web.Mvc;
15using ShopSite.Models;
16

17namespace ShopSite.Controllers
18{
19    public class ShopController : Controller
20    {
21        public ActionResult Index()
22        {
23            var products = new List<Product>
24            {
25                new Product { Id = 1, Name = "Gel Pen", Price = 20m },
26                new Product { Id = 2, Name = "Notebook", Price = 60m },
27            };
28            return View(products);
29        }
30

31        // Only callable from a view with Html.Action
32        [ChildActionOnly]
33        public ActionResult CartSummary()
34        {
35            ViewBag.Count = 3;          // in a real app: read from the session or database
36            return PartialView("_CartSummary");
37        }
38    }
39}
40

41@* Views/Shop/Index.cshtml *@
42@model List<Product>
43@Html.Action("CartSummary")
44<h1>Products</h1>
45@foreach (var p in Model)
46{
47    @Html.Partial("_ProductCard", p)
48}
49

50@* Views/Shared/_ProductCard.cshtml *@
51@model Product
52<div class="card">
53    <h2>@Model.Name</h2>
54    <p>@Model.Price.ToString("0.00") rupees</p>
55</div>
56

57@* Views/Shop/_CartSummary.cshtml *@
58<p class="cart">Cart: @ViewBag.Count items</p>

GET /Shop
200 OK
<p class="cart">Cart: 3 items</p>
<h1>Products</h1>
<div class="card">
    <h2>Gel Pen</h2>
    <p>20.00 rupees</p>
</div>
<div class="card">
    <h2>Notebook</h2>
    <p>60.00 rupees</p>
</div>

GET /Shop/CartSummary
500 Internal Server Error

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Index passes a list of products to its view.
2. Html.Action("CartSummary") runs the child action, which sets its own data and returns the _CartSummary partial.
3. For each product, Html.Partial renders _ProductCard from Views/Shared with that product as its model.
4. Partials have no layout, so only their markup is inserted.
5. Requesting /Shop/CartSummary directly fails because of [ChildActionOnly] — the error page shows instead of the partial.

Real-world use case#

Common mistakes#

Best practices#

• Prefix partial names with an underscore
• Always pass the model explicitly
• Use child actions for widgets that need their own data
• Return PartialView from actions used by AJAX

Remember this#

Practice exercise#

1// Controllers/SaleController.cs
2using System.Web.Mvc;
3

4namespace ShopSite.Controllers
5{
6    public class SaleController : Controller
7    {
8        public ActionResult Index() => View();
9    }
10}
11

12@* Views/Sale/Index.cshtml *@
13@Html.Partial("_Price", 30m)
14@Html.Partial("_Price", 120m)
15

16@* Views/Shared/_Price.cshtml *@
17@model decimal
18<p>@Model.ToString("0.00")@if (Model < 50) {<strong> Sale!</strong>}</p>

GET /Sale
200 OK
<p>30.00<strong> Sale!</strong></p>
<p>120.00</p>

Mini quiz#

Want more? Practise all ASP.NET MVC MCQs · ASP.NET MVC interview questions

Related topics#

My notes#

Saved in this browser.