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.
The result is written directly into the HTTP response. Hence, it is slightly faster than Partial.
Returns
This method returns nothing.
This method returns nothing.
Can be stored in a variable
It returns void. Hence, the result cannot 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.
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.
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
This method returns HTML encoded string
Can be stored in a variable
Returned 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
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
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.
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.
The result is written directly into the HTTP response.
Returns
This method returns nothing
This method returns nothing
Can be stored in variable?
It returns void. Hence, the result cannot be stored in a 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
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
Partial view data can be independent of parent model
Caching
Caching is possible by caching the action method
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
The result can be written into the HTTP response
Returns
This method returns HTML string
This method returns HTML string
Can be stored in a variable?
Returned 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
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,
Jin NecesarioPosted Sep 4, 2020, 2:44 AM
Nice great article, all of the facts (ways to render partial view) in one article. Keep it up. Thanks!
RyderPosted Feb 7, 2020, 5:45 AM
Thanks Pankaj for the article.
Dhruvik SathvaraPosted Oct 10, 2019, 1:20 AM
Good explanation and nice article..
Chittaranjan SwainPosted Sep 30, 2019, 1:45 AM
Nice one well explain.....
Arvind PatelPosted Sep 26, 2019, 7:05 AM
Nice article...
Shailesh PathakPosted Sep 9, 2019, 10:19 AM
Very nice article..thanks
umed aliPosted Aug 16, 2019, 3:34 AM
Nice article ....!!!
jitesh DhuravalaPosted Aug 13, 2019, 3:47 AM
It has cover all concept of Partial view in MVC with example, it is very useful. Thanks for sharing.
Jignesh SutharPosted Aug 13, 2019, 12:55 AM
Nice article thanks for sharing.
Shailesh PathakPosted Aug 12, 2019, 9:12 AM
Very nice article..So much in depth..New learner or freshers will get benefit from this..
Jaykishan VaghelaPosted Aug 11, 2019, 11:55 PM
Nice Presentation
Amit MohantyPosted Aug 11, 2019, 11:28 PM
Nice article
Arvind KatariaPosted Aug 10, 2019, 11:46 AM
Nice article ....!!!