ASP .NET MVC Partial Views
Partial Views

A partial view enables you to define a view that will be rendered inside a parent view. Partial views are implemented as ASP.NET user controls (.ascx).

When a partial view is instantiated, it gets its own copy of the ViewDataDictionary object that is available to the parent view. The partial view therefore has access to the data of the parent view. However, if the partial view updates the data, those updates affect only the partial view's ViewData object. The parent view's data is not changed.

By using partial view we can render a view inside a parental view and to create reusable content in the project.

Go through the given example

Create a Model class for partial view named it as 'PartialModel2.cs'

PartialModel2.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication2.Models
{
    public partial class PartialModel2
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Address { get; set; }
       
    }
    public partial class PartialModel2
    {
        public List<PartialModel2> partialModel { get; set; }

    }

}



Add the following methods in HomeController.

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;

namespace MvcApplication2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View(new PartialModel2() { partialModel  = Sampledetails() });
        }
    private List<partialmodel2> Sampledetails()
        {
            List<partialmodel2> model = new List<partialmodel2>();

            model.Add(new PartialModel2()
            {

                Name = "Rima",
                Age = 20,
                Address="Kannur"
            });

            model.Add(new PartialModel2()
            {

                Name = "Rohan",
                Age = 23,
                Address = "Ernakulam"
            });
            model.Add(new PartialModel2()
            {
                Name = "Reshma",
                Age = 22,
                Address = "Kannur"
            });

            return model;
        }
       
    }
}



Add Partial View

Views>>Right click on 'Home'>>Add>>View

Name the View as'PartialView1' and Check on the checkbox 'Create as a partial view',the click on 'Add' button.



PartialView1.cshtml
@model IEnumerable<MvcApplication2.Models.PartialModel2 >
@using MvcApplication2.Models
   

        @if (Model != null)
        {
            <div class="grid">
                <table cellspacing="0" width="80%">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Age
                            </th>
                            <th>
                                Address
                            </th>
                           
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td align="left">
                                    @item.Name
                                </td>
                                <td align="left">
                                    @item.Age 
                                </td>
                                <td align="left">
                                    @item.Address 
                                </td>
                                
                            </tr>
                        }
                    </tbody>
                </table>
                
            </div>

        }


Render the partial view into Index(parental) view.

Index.cshtml
@model MvcApplication2 .Models.PartialModel2
@{
    ViewBag.Title = "Home Page";
}

<p>
    
    <div>
        @Html.Partial("PartialView1", Model.partialModel)
       
    </div>
</p>


Run the project