How to Create a Partial View in MVC

Partial Views in MVC

This article explains partial views in MVC.

This articles discusses the following topics.

1. What a partial view is.
2. Demo showing how to create and use a partial view.
3. Difference between Html.Partial and Html.RederPartial.
4. Advantages of using a partial view.

Partial Views are similar to user controls. It is used to create reusable view logic and helps in removing the complexity of views.

The partial views can be used on multiple views where we need similar view logic.

Let's look at an example of it.

In SQL Server I have the following Student database table.


Query used

CREATE DATABASE db_Students;
Go Use db_Students;
Go CREATE TABLE tblStudentDetails
(
Id INT IDENTITY(1, 1) PRIMARY KEY,
Name NVARCHAR(60),
Gender NVARCHAR(10),
Subject NVARCHAR(20)
);
INSERT INTO tblStudentDetails
VALUES
('Franklin', 'Male', 'C-Sharp'),
('Michael', 'Male', 'MVC'),
('Trevor', 'Male', 'Java'),
('Lara', 'Female', 'PHP'),
('Sam', 'Male', 'Ruby on Rails'),
('Max', 'Male', 'C++')

Let's say we want the preceding table records to be displayed in an MVC application and in addition to that we want to display those records in several views and for that we can copy and paste the code to each and every required view or we can simply create a partial view and using Html.Partial or Html.RenderPartial we can map the partial view in the required views.

The first step is to create a new empty MVC web application.

The second step is to add an ADO.Net entity model and click Add.

Choose "EF Designer from database" and click Next.



Click on "New Connection...".

Specify the server name, credentials and select the database.

Specify the Web.Config name and click Next.

Select the table and click Finish.

The third step is to rename the entity name from tblStudentDetails to Students.

Build the solution.

The fourth step is to add a controller in the Controller directory. So, right-click on the controllers folder and select add controller.

Choose MVC 5 Controller – Empty scaffold and click Add.

Provide the controller the name HomeController and click Add.

At the moment, the HomeController class is present in the PartialViewsInMVC.Controller whereas our model is present in PartialViewsInMVC.Models and in order to use the model we need to import the namespace into our HomeController class.

The fifth step is to create an instance of StudentDbContent inside the Index action method.

StudentDbContext db = new StudentDbContext();
This object contains a property“Students”which will give us all the students present in Students class.
public ActionResult Index()
{
    StudentDbContext db = new StudentDbContext();
    List < Students > StudentList = db.Students.ToList();
    return View(StudentList);
}

The next step is to add a view. So right-click on the Index action method and select add view.

Provide the View the name Index.

Choose list as a template.

Choose model as Students.

Choose the data context class as StudentDbContext.

Note: At the moment we are not creating a partial view.

Click add

@model IEnumerable
<PartialViewsInMVC.Models.Students>
@{
ViewBag.Title = "Index";
}
    <h2>Index</h2>
    <table class="table">
        <tr>
            <th>
@Html.DisplayNameFor(model => model.Name)
</th>
            <th>
@Html.DisplayNameFor(model => model.Gender)
</th>
            <th>
@Html.DisplayNameFor(model => model.Subject)
</th>
        </tr>
//since the model here is of type IEnumerable, so we need to loop thru each item present in the Model.
@foreach (var item in Model) {
        <tr>
            <td>
@Html.DisplayFor(modelItem => item.Name)
</td>
            <td>
@Html.DisplayFor(modelItem => item.Gender)
</td>
            <td>
@Html.DisplayFor(modelItem => item.Subject)
</td>
        </tr>
}
    </table>

Run the application

Now let's see how to do the same thing using a partial view.

Navigate to the Solution Explorer and expand the Views folder. Inside this folder there is a folder “Shared”.

Add a partial view to this folder.

Choose Create as partial view option.

Click Add

Write the following in the _Students View.

@model PartialViewsInMVC.Models.Students
<tr>
    <td>
@Html.DisplayFor(modelItem => Model.Name)
</td>
    <td>
@Html.DisplayFor(modelItem => Model.Gender)
</td>
    <td>
@Html.DisplayFor(modelItem => Model.Subject)
</td>
</tr>

Write the following in the Index View.

@model IEnumerable
<PartialViewsInMVC.Models.Students>
    <table class="table">
        <tr>
            <th>
@Html.DisplayNameFor(model => model.Name)
</th>
            <th>
@Html.DisplayNameFor(model => model.Gender)
</th>
            <th>
@Html.DisplayNameFor(model => model.Subject)
</th>
        </tr>
@foreach (var item in Model)
{
@Html.Partial("_Students", item)//the first parameter expects a partial view and the second parameter expects a model object
}
    </table>

Note: To render a partial view we use Html.Partial or Html.RenderPartial html helper.

Run the application

Difference between Html.Partial and Html.RenderPartial

The only difference between Html.Partial and Html.RenderPartial is the return type of Html.Partial is MvcHtmlString whereas Html.RenderPartial returns void.

So, if you want to manipulate the data before rendering the view, use Html.Partial else if you want to render directly to the output use Html.RenderPartial since it would be better from a performance perspective.

Syntax for Html.RenderPartial

{Html.RenderPartial("_Students",item); }

Advantage of using Partial View

Using partial view helps in simplifying the complexity of views. These partial views are reusable and if there is a need to make any change in the code then all we need to do is update the partial view.

Summary

In this article we have learned how to create a partial view and we have also seen the two ways by which we can render partial views.

I hope you like it. Thank you.