MVC - Best Way To Render Partial View

Article Overview

• Background
• Pre-requisites
• Ways to render partial view
• Html.RenderPartial
• Html.Partial
• Html.RenderAction
• Html.Action
• Using jQuery
• Whole example together
• Models (Blog, BlogCategory)
• Controller
• Views (Index, Comment, Category, CategoryBy)
• Output
• Best way to render partial view 
• Summary

Background

 

There are a number of articles and blogs where you can find details about “Partial” view, such as what partial view is, how to create it, and how to render it. There are various ways/methods to render a partial view and each one is having their own characteristic and advantage.

Hence, to understand each method in details I have gone through various sites instead of one single place. So, here I am putting all the key details at one place; therefore, we do not have to go through various sites.

 

Prerequisites

 

You MUST have basic knowledge of “Partial View in MVC” like what partial view is and how to create it before starting this article.

 

Ways to render partial view

 

There are mainly five ways to render a partial view:

• Html.RenderPartial
• Html.Partial
• Html.RenderAction
• Html.Action
• Using jQuery

Now, let us see an example

 

Html.RenderPartial

 

Result
The result is written directly into the HTTP response. Hence, it is slightly faster than Partial.

 

Returns
This method returns nothing.

 

Can be stored in a variable
It returns void. Hence, the result cannot be stored in a variable.

 

Controller action method
It does not require to have a controller action method to call it.

 

Partial view and parent model
Partial view data is dependent of parent model.

 

Caching

Caching is not possible as it is tightly bound with parent view (controller action method) and parent’s model.

 

Syntax

 

@{

Html.RenderPartial("<<name of partial view>>");

}

 

Example

 

@{

Html.RenderPartial("Comment");

}

 

Html.Partial

 

Result

The result can be written into the HTTP response

 

Returns
This method returns HTML encoded string

 

Can be stored in a variable
Returned HTML encoded string can be stored in a variable

 

Controller action method
It does not require to have a controller action method to call it

 

Partial view and parent model
Partial view data is dependent of parent model

 

Caching
Caching is not possible as it is tightly bound with parent view (controller action method) and parent’s model.

 

Syntax

 

@{

Html.Partial("<<name of partial view>>");

}

OR

@Html.Partial("<<name of partial view>>")

 

Example

 

@{

var comment = Html.Partial("Comment");

<b>Commnets are </b> @comment

}

OR

@Html.Partial("Comment")

 

Html.RenderAction

 

Result
The result is written directly into the HTTP response.

 

Returns
This method returns nothing

 

Can be stored in variable?
It returns void. Hence, the result cannot be stored in a variable.

 

Controller action method
It needs to have a controller action method to call it

 

Partial view and parent model
Partial view data can be independent of parent model

 

Caching
Caching is possible by caching the action method

 

Syntax

 

@{

Html.RenderAction("<<name of controller action>>");

}

 

Example

 

@{

Html.RenderAction("Category");

}

 

Html.Action

 

Result
The result can be written into the HTTP response

 

Returns
This method returns HTML string

 

Can be stored in a variable?
Returned HTML string can be stored in a variable.

 

Controller action method
It needs to have a controller action method to call it

 

Partial view and parent model

Partial view data can be independent of parent model

 

Caching

Caching is possible by caching the action method

 

Syntax

 

@{

Html.Action("<<name of controller action>>");

} 

OR

@Html.Action("<<name of controller action>>")

 

Example

 

@{

var category = Html.Action("Category");

<b>Categories are </b> @category

}

OR

@Html.Action("Category")

 

Using jQuery

 

Sometimes, there are situations where we need to load a partial view within a model popup at runtime. In such cases, we can render the partial view using JQuery,

 

$("#partialviews").load('/Blog/CategoryBy');

 

Whole example together

 

For the whole example, I have prepared and uploaded a Word document which contains Models, Controller, and Views.

• Models (Blog, BlogCategory)
• Controller
• Views (Index, Comment, Category, CategoryBy)
• Output

Models

 

 

Controller

 

 

Views

 

Index.cshtml

 

 

Comment.cshtml

 

 

Category.cshtml

 

 

CategoryBy.cshtml

 

 

Output

 

 

Here there are two important points,

• The dependency of partial view with parent mode
  
  
• For RenderPartial and Partial method: parent view and partial view both having the same "BlogModel". Hence, both are dependent.
• For the RenderAction and Action method: parent view and partial view both having different "BlogModel" and "BlogCategoryModel". Hence, both are independent.
  
  
• Caching implementation
  
  
• For RenderPartial and Partial method: caching could not be implemented as there is no controller action method
• For RenderAction and Action method: caching could be implemented using the controller action method "Category()"

For your reference, I have uploaded a word document file which contains all the above implementation code.

 

Best way to render partial view 

• There is a no such thing as a best way to render the partial view.
• But, according to your need and scenario, you have to decide which method is best for your case.
• Summary of the above-discussioned points is as in the following table. 

	RenderPartial	Partial	RenderAction	Action
Result	Directlywritten into HTTP response	NotDirectly	Directlywritten into HTTP response	NotDirectly
Returns	Nothing	HTMLencoded string	Nothing	HTMLstring
Can be stored in a variable?	No	Yes	No	Yes
Controller action method	No	No	Yes	Yes
Partial view and parent model	Dependent	Dependent	Independent	Independent
Caching is possible	No	No	Yes	Yes

 

Summary

 

Now, I believe you will be able to know the best way to render the partial view for your need and solution.