Partial Views -- Basics MVC

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 View Data 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 Instance

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 {gets; set ;}

        Public int Age {get; set ;}

        Public string Address {gets; set ;}      

    }

    Public partial class PartialModel2

    {

        Public List<PartialModel2> partial Model {gets; set ;}

    }

}

Add the following methods in Home Controller. 

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 check box '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