Hello Friends, In this tutorial we are going to learn Partial View in ASP.NET MVC. Partial View is similar to User Control in ASP.NET.

After completing this tutorial you will be able to understand the following terms:

  • What is Partial View in ASP.NET MVC?
  • Why use Partial View in ASP.NET MVC?
  • Different methods of Rendering Partial View in ASP.NET MVC.

Introduction:

Partial View is a special view that can be reused in multiple views. Because of reusability, it reduces the duplicate code. Suppose if we want to display some common part of the application into multiple views. Then without writing the repetitive code, we can write that common portion of HTML into Partial View. Partial View is similar to User Control in ASP.NET. Partial View act as a child component for the parent component.  For example, all applications have some common part of HTML like Header, Footer for all pages. So instead of writing the content of Header and Footer on all pages, we can create a Partial View for Header and Footer. Now this Header Footer can be used on all pages.

Partial View

It is good practice to create the partial view in Shared folder and prefix the view name with “_”.

For example “_Header”. “_” specifies that it is a global competition that can be reused in multiple components.

How to Render Partial View on Parent View?

ASP.NET has support of HTML helper method to render partial view on parent view. Such as HTML.Partial(), HTML.RenderPartial() and HTML.RenderAction(). Let’s discuss how these methods actual work.

1- HTML.Partial():

@HTML.Partial() method accepts the Partial View name as string parameter and returns the MVCHtmlString.

The HTML.Partial View has the following overloaded method to Render a Partial View on the Parent View.

  1. HTML.Partial(string PartialViewName)
  2. HTML.Partial(string PartialViewName, object model):
  3. HTML.Partial(string PartialViewName,ViewDataDictionary ViewData):
  4.  HTML.Partial(string PartialViewName,object ModelName,ViewDataDictionary ViewData):

2-HTML.RenderPartial():

It is similar to HTML.Render method with a difference that it returns void and render response of the partial view into http stream directly.

  1. HTML.RenderPartial have the following overloade method:
  2. HTML.RenderPartial(string PartialViewName)
  3. HTML. RenderPartial (string PartialViewName, object model):
  4. HTML. RenderPartial (string PartialViewName,ViewDataDictionary ViewData):
  5.  HTML. RenderPartial (string PartialViewName,object ModelName,ViewDataDictionary ViewData):

3- HTML.RenderAction():

HTML.RederAction method calls the specified controller and action method and renders the response o partial view on the referred view.

The HTML.RenderAction has the following overloaded method:

  1. HTML.RenderAcion(string ActionName)
  2. HTML.RenderAction(string ActionName,Object routeValue)
  3. RenderAction(String ActionName, RouteValueDictionary routeValues)
  4.  RenderAction(String ActionName, String ControllerName, Object routeValue)
  5.  RenderAction(String ActionName, String ControllerName, RouteValueDictionary routeValues)

Example of Partial View in ASP.NET MVC:

Step 1- Open Visual Studio and create an ASP.NET MVC application called PartialViewDemo.

Partial View

Step 2- Choose an Empty Template and Click OK to proceed.

Add Controller:

Step 3- Right Click on the Controller folder in Solution Explorer and create a Controller called HomeController.

HomeController with the following code will be created:

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

namespace PartialViewDemo.Controllers
{
public class HomeControllerController : Controller
{
//
// GET: /HomeController/

public ActionResult Index()
{
return View();
}

}
}

Add View:

Step 4- Right Click on the Index Action method in HomeController and add a View as in below snapshot.

Partial View

An Index view with the following code will be created:


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

Step 5- Right Click on the Views folder and create a folder Shared.

RenderPartial Example:

Step 6- Right Click on the Shared and add a Partial View called Partial1.

Partial View

Step 7- Write the following code in the _Partial1.cshtml Partial View.


<div style="background-color:blueviolet;font-size:20px;color:#fff">
    Example of HTML Render Partial method
</div>

Step 8- Render the Partial1 view on Index.cshtml using the RenderPatial method as below:

<div> @{Html.RenderPartial("_Partial1");} </div>
 

Partial Example:

Step 9- Right Click on the Shared folder and Create Partial View called _Partial2.

Partial View

Step 10- Write the following code in _Partial2.cshtml

<div style="background-color:blueviolet;font-size:20px;color:#fff">
    Example of HTML Partial method
</div>

Step 11- Render the _Partial2 using the Partial method.

RenderAction Example:

Step 12- Create the following Action method in HomeController.


public PartialViewResult RenderActionDemo()
{
return PartialView();
}

Step 13- Right Click on the RenderActionDemo method and create a Partial View as shown in the below snapshot.

Partial View

Step 14- Write the following code in RenderActionDemo Partial View.

<div style="background-color:blueviolet;font-size:20px;color:#fff">
    Example of HTML Render Action method
</div>

Step 15- Render the RenderActionDemo using RenderAction method.



<div> @{Html.RenderAction("RenderActionDemo", "Home");} </div>

 

Run the application look over the output screen.

Partial View

You can download the complete source code for the application from here.

Conclusion:

Hope you understand what is Partial View and use of Partial View in ASP.NET MVC. I will appreciate your feedback, comments and suggestions.

View More:

Thank You.

Leave a Comment