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
 
MVC - Best Way To Render Partial View
 
Controller
 
MVC - Best Way To Render Partial View
 
Views
 
Index.cshtml
 
MVC - Best Way To Render Partial View
 
Comment.cshtml
 
MVC - Best Way To Render Partial View
 
Category.cshtml
 
MVC - Best Way To Render Partial View
 
CategoryBy.cshtml
 
MVC - Best Way To Render Partial View
 
Output
 
MVC - Best Way To Render Partial View
 
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.