Different Ways to Render Partial View in MVC

Different Ways to Render Partial View in MVC

In this article, I will explain Different Ways to Render Partial view in MVC application. Please read our previous article before proceeding to this article as we are going to use the same example. In our Previous article, we discussed what is Partial View? Why we need Partial View? How we can use Partial View with example? At the end of this article, you will understand the different methods to render a partial view in ASP.NET MVC application with an example.

Different Ways to Render Partial view in MVC application

We can use Partial Views in your main views by following methods.

  1. Html.RenderPartial
  2. Html.Partial
  3. Html.RenderAction
  4. Html.Action
  5. jQuery load function
Html.RenderPartial in MVC

Modify the Index action method of Product Controller to use Partial view using Html.RenderPartial() method as shown below

@model IEnumerable<PartialViewInMVC.Models.Product>

@{
    ViewBag.Title = "Index";
}

@{Html.RenderPartial("ProductDetails", Model);}

It works when you have a partial view located in the Shared folder. If our partial view located in a different folder then we will have to mention the full path of view as shown below.

@{Html.RenderPartial(“~/Views/Home/ProductDetails.cshtml”, Model);}

Points to Remember while working with Html.RenderPartial:
  1. RenderPartial() is a void method that writes to the response stream. A “void” method is, in C#, needs a”;” and hence must be enclosed by { }.
  2. This method result will be directly written to the HTTP response stream. That means this method generates the response as part of same HTTP response of the main view. It uses same TextWriter object used by the current web page.
  3. This method returns void.
  4. Simple to use and no need to create any action.
  5. This method is faster than Partial method since its result is directly written to the response stream which makes it fast.
  6. If you have a model associated with View and model required for the partial view is part of ViewModel then RenderPartial method is ideal to use.
Html.Partial in MVC

Modify the Index action method of Product Controller to use Partial view using Html.Partial() method as shown below

@model IEnumerable<PartialViewInMVC.Models.Product>
@{
    ViewBag.Title = "Index";
}
@Html.Partial("ProductDetails", Model)

It works when you have a partial view located in the Shared folder. If our partial view located in a different folder then we will have to mention the full path of view as shown below.

@Html.Partial(“~/Views/Shared/ProductDetails.cshtml”, Model)

Points to Remember while working with Html.Partial:
  1. Partial() is a method that returns an MvcHtmlString. In Razor, You can call a property or a method that returns such a string with just a @ prefix to distinguish it from plain HTML you have on the page.
  2. Renders the partial view as an HTML-encoded string.
  3. This method result can be stored in a variable since it returns string type value.
  4. Simple to use and no need to create any action.
  5. Like the RenderPartial method, the Partial method is also useful when the displaying data in the partial view is already in the corresponding view model.
Html.RenderAction in MVC

For rendering partial view using Html.RenderAction, we required Controller Action method which returns PartialViewResult. Open ProductController.cs file from Controllers folder. Add below action method with name GetProducts.

public PartialViewResult GetProducts()
{
    List<Product> products = new List<Product>()
            {
                new Product { ProductID =1, Name ="Product 1", Category = "Category 1", Description ="Description 1", Price = 10m},
                new Product { ProductID =2, Name ="Product 2", Category = "Category 1", Description ="Description 2", Price = 20m},
                new Product { ProductID =3, Name ="Product 3", Category = "Category 1", Description ="Description 3", Price = 30m},
                new Product { ProductID =4, Name ="Product 4", Category = "Category 2", Description ="Description 4", Price = 40m},
                new Product { ProductID =5, Name ="Product 5", Category = "Category 2", Description ="Description 5", Price = 50m},
                new Product { ProductID =6, Name ="Product 6", Category = "Category 2", Description ="Description 6", Price = 50m}
            };
    return PartialView("ProductDetails", products);
}

Open Index.cshtml file and add below html to it.

@{
    ViewBag.Title = "Index";
}

@{Html.RenderAction("GetProducts", "Product");}

Build the solution and run the application and see everything is working as expected.

  1. This method result will be directly written to the HTTP response stream of parent web page like Html.RenderPartial that means it used the same TextWriter object as used in the current webpage/template.
  2. For this method, we need to create a child action for the rendering the partial view.
  3. RenderAction method is useful when the displaying data in the partial view is independent of the corresponding view model.
  4. This method is the best choice when you want to cache a partial view.
  5. This method is faster than the Action method since its result is directly written to the HTTP response stream which makes it fast.
Html.Action in MVC

For rendering a partial view using Html.Action, we required Controller Action method which returns PartialViewResult like Html.RenderAction. Open Index.cshtml file and add below html to it.

@{
    ViewBag.Title = "Index";
}

@Html.Action("GetProducts", "Product")

Build the solution and run the application and see everything is working as expected.

Points to Remember while working with Html.Action:
  1. Renders the partial view as an HtmlString.
  2. For this method, we need to create a child action for the rendering the partial view.
  3. This method result can be stored in a variable since it returns string type value.
  4. The action method is useful when the displaying data in the partial view is independent of the corresponding view model.
  5. This method is also the best choice when you want to cache a partial view.
Render Partial View Using jQuery in ASP.NET MVC

We can load our partial view using jQuery load method. It makes ajax request to controller action method and load output in HTML control like div. Add div in index.cshtml file as shown in below and add a script to load output of action method GetProducts.

@{
    ViewBag.Title = "Index";
}

<div id="partialviews">
</div>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/jscript">
    $(document).ready(function () {
        $("#partialviews").load('/Product/GetProducts');
    });
</script>
When would you use Partial() over RenderPartial() and vice versa?

The main difference is that “RenderPartial()” returns void and the output will be written directly to the output stream, whereas the “Partial()” method returns MvcHtmlString, which can be assigned to a variable and manipulate it if required. So, when there is a need to assign the output to a variable for manipulating it, then use Partial(), else use RenderPartial().

Which one is better for performance?

From a performance perspective, rendering directly to the output stream is better. RenderPartial() does exactly the same thing and is better for performance over Partial(). 

In the next article, I am going to discuss Razer views in ASP.NET MVC. Here, in this article, I try to explain Different ways to render Partial View in MVC application step by. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *