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.