Hi everyone in this article I’m explaining about partial view.

Introduction:

ASP.NET MVC consists of three main parts - Model, View and Controller. Model represents the business entity or domain object and it manages the state of View. Controller controls the application logic and communication between Model and View. A view represents the user interface, which receives input from user and sends to controller for further action. In this article, I explain about ASP.NET MVC special views like Partial Views and Layouts.

If you want to reuse a view in your web application, you can go for the partial view concept. Partial view is like a regular view with a file extension .cshtml. We can use partial views in a situation where we need a header, footer reused for an MVC web application. We can say that it’s like a user control concept in ASP.NET.

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

Follow this example:

Create a Model class for partial view Named it as Student.cs

Student.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace MVCRouting.Models
{
    Public partialclassStudent
    {
        publicstring Name { get; set; }
        publicint Age { get; set; }
        publicstring Address { get; set; }
    }
    publicpartialclassStudent
    {
        publicList<Student> partialModel { get; set; }
    }
}

Add HomeController with following methods:

using MVCRouting.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MVCRouting.Controllers
{
    publicclassHomeController : Controller
    {
        //
        // GET: /Home/
 
        publicActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
 
            return View(newStudent() { partialModel = Sampledetails() });
        }
        privateList<Student> Sampledetails()
        {
            List<Student> model = newList<Student>();
 
            model.Add(newStudent()
            {
 
                Name = "Kamlakar",
                Age = 20,
                Address = "Allahabad"
            });
 
            model.Add(newStudent()
            {
 
                Name = "Rohit",
                Age = 23,
                Address = "Goa"
            });
            model.Add(newStudent()
            {
                Name = "Pawan",
                Age = 22,
                Address = "Delhi"
            });
 
            return model;
        }
 
    }
}

Add Partial View

Views>>Right click on ‘Shared’>>Add>>View

Name the View as'_Details' and Check on the checkbox 'Create as a partial

view',the click on 'Add' button.

@model IEnumerable<MVCRouting.Models.Student>
@using MVCRouting.Models
 
<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<br/><br/>
<divclass="container">
    @if (Model != null)
    {
        <divclass="table-responsive">
            <tableclass="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Name
                        </th>
                        <th>Age
                        </th>
                        <th>Address
                        </th>
 
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <tdalign="left">
                                @item.Name
                            </td>
                            <tdalign="left">
                                @item.Age
                            </td>
                            <tdalign="left">
                                @item.Address
                            </td>
 
                        </tr>
                    }
                </tbody>
            </table>
 
        </div>
 
    }
</div>

Render the partial view into Index(parental) view.

Index.cshtml

@model MVCRouting .Models.Student
@{
    ViewBag.Title = "Home Page";
}
 
<p>
    
    <div>
        @Html.Partial("_Details", Model.partialModel)
       
    </div>
</p>

Output: