Create And Render Partial View in MVC

Hello Freinds,

First of all, I would like to thank you all for the very positive feedback for my previous post on AJAX in MVC using jQuery and JSON Object. In this post I am going to explain what is Partial View and what are the different way to render it.

In WebForms we have UserControl as a reusable component. Let's say, you have user details section and that appears in the website in many places(Different web pages), so you create a UserControl for it(for user details) and use it across the website. To achieve the same functionality in MVC, we have Partial View.

What is Partial View..?

A partial view is a "sub-view" that you embed within a main view - something that you might reuse across multiple views, like a sidebar.

Extension of Partial View :-

• MVC2 - .ascx
• MVC3 and above - .cshtml

Naming Convention:-

We do follow the naming convention that, name starts with '_' .

 Ex: _UserDetails

How to create a Partial View.?

1. Please follow the below steps to create a Partial View.
2. Go to Solution Explorer
3. Right click on the folder where you want to add the partial View.
4. Choose Add
5. Then click on View or You can directly click on Partial Page(Razor)

Below diagrams will give you complete idea.

Method 1

 

Method 2

 

How to render Partial View in Main View.?

There are four ways to render Partial View.

• Html.Action()
• Html.Partial()
• Html.RenderAction()
• Html.RenderPartial()

Let's discuss one by one.

Html.Action:

Html.Action is used to invoke the controller Action method in the View.

Synatx:

@{Html.Action("UserDetails", "Home");} 

@*where UserDetails is action method and Home is controller*@

Html.Action

 Return Type - String

When you use this method to render the partial view, the action method will be called and it returns the view i.e it will be returning the Html string.

Html.Partial:

Html.Partial is use to render the view directly without involving controller. 

Synatx:

@Html.Partial("_UserDetails")

@*where _UserDetails is Partial View Name -_UserDetails.cshtml *@

 

Html.Partial

Return Type - String

When you use this method to render the partial view, Partial method will return the Html string.

You can pass the model to view using the overloaded methods.

Html.RenderAction:

This is almost same as that of Html.Action except the Syntax and Return Type.

In this the return type is void. 

Synatx:

@{Html.RenderAction("UserDetails", "Home");}  

@*where UserDetails is action method and Home is controller*@

Html.RenderAction

 It will directly render the view to output stream and directly renders it on browser.

Html.RenderPartial:

This is almost same as that of Html.Partial except the Syntax and Return Type.

In this the return type is void. 

Syntax:

@{Html.RenderPartial("_UserDetails");}  

@*where _UserDetails is Partial View Name -_UserDetails.cshtml *@

Html.RenderPartial

 It will directly render the view to output stream and directly renders it on browser.

  

You can pass the model to view using the overloaded methods.

Which one is the best to render the Partial View.?

As both RenderPartial and RenderAction direclty render the view to output stream, Its better to use these two, in terms of performance.

Hope this helps.! Happy Coding.
Please do like and share it, if you find it useful.   

Hope this helps.! Happy Coding.
Please do like and share it, if you find it useful. - See more at: http://spinyourworldbyjaw.blogspot.in/2014/09/ajax-in-mvc-using-jquery-and-json-object.html#sthash.TwS59H9I.dpuf

Thanks,

Ram