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. It describes different methods to render a partial view in MVC with an example.

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

Please read our last article before proceeding to this article as we are going to use the same example that we started in partial view article.

In our last article, we discussed what is Partial View? Why we need Partial View? How we can use Partial View with example?

In this article, we will see the Different Ways to Render Partial view in MVC application.

Html.RenderPartial

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:
  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

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:
  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

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

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:
  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

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 will discuss Razer views in ASP.NET MVC.

SUMMARY
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 *