Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET
Tip/Trick

Partial View in ASP.NET MVC 4

Rate me:
Please Sign up or sign in to vote.
4.71/5 (52 votes)
8 Jul 2013CPOL1 min read 742.9K   59   21
This article will help you to create partial views in asp.net mvc 4 with razor.

Introduction

If you want to reuse a view in your web application, you can go for the partial view concept. Partial view is like a regular view with a file extension .cshtml. We can use partial views in a situation where we need a header, footer reused for an MVC web application. We can say that it’s like a user control concept in ASP.NET.

Using the code

Here I am going to explain how to create a partial view in an MVC 4 ASP.NET application.

First add a view to the shared folder with the view name _Product. The best way to create a partial view is with the name preceded by '_', because the name specifying that it is reusable.

Image 1

Here in this example, I am using the partial view to display the item selected in the webgrid. Creating the webgrid example is in the below link:

Add HTML controls in the partial view to display the selected item:

ASP.NET
@model PartialViewSample.Models.Product

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddProduct</title>    
</head>
<body>
    <div>      
           <label>Id:</label>
            @Html.TextBox("Id", Model.Id)
             <label>Name:</label>
            @Html.TextBox("Name", Model.Id)
             <label>Description:</label>
            @Html.TextBox("Description", Model.Description)
             <label>Quantity:</label>
            @Html.TextBox("Quantity", Model.Quantity)
    </div>
</body>
</html>

We can call the partial view in a normal view like:

C#
Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);

Or

C#
@Html.Partial("~/Views/Shared/_Product.cshtml", product);

Html.Partial returns a string, Html.RenderPartial calls Write internally, and returns void. You can store the output of Html.Partial in a variable, or return it from a function. You cannot do this with Html.RenderPartial because the result will be written to the Response stream during execution. So @html.RenderPartial() has faster execution than @html.Partial() due to RenderPartial giving quick response to the output.

We can call the partial view if the grid has a selected item. The code block is shown here:

C++
@if (grid.HasSelection)
{
    product =(PartialViewSample.Models.Product)grid.Rows[grid.SelectedIndex].Value;        
    Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);           
}

Image 2

History

  • 4th July, 2013: Initial post. 

This tip is based on this blog.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionNot working Pin
Parth Akbari19-Sep-16 6:18
Parth Akbari19-Sep-16 6:18 
Praisegood job Pin
Venom Chow21-Aug-16 15:31
Venom Chow21-Aug-16 15:31 
QuestionCode not explained properly Pin
rf_libra27-Jul-15 9:05
rf_libra27-Jul-15 9:05 
SuggestionBest examples for addition of partial view MVC4 and MVC 5 Pin
maheshdare17-Mar-15 20:32
maheshdare17-Mar-15 20:32 
GeneralMy vote of 1 Pin
Yogeshwaran.P2-Feb-15 1:22
Yogeshwaran.P2-Feb-15 1:22 
GeneralMy vote of 4 Pin
amol_th28-Jan-15 3:07
amol_th28-Jan-15 3:07 
GeneralGreat work Pin
Luai Kayyali26-Jan-15 5:32
Luai Kayyali26-Jan-15 5:32 
GeneralMy Vote of 5 Pin
Bhavik_Patel2-Sep-14 0:02
professionalBhavik_Patel2-Sep-14 0:02 
Great job... Like to the point description and Less gibberish...
GeneralMy vote of 1 Pin
Yogesh Kumar Tyagi22-Jul-14 23:20
professionalYogesh Kumar Tyagi22-Jul-14 23:20 
SuggestionThe Best Example for Partial View Pin
A Shiva Prasad2-Jul-14 3:28
A Shiva Prasad2-Jul-14 3:28 
GeneralMy vote of 2 Pin
A Shiva Prasad2-Jul-14 3:07
A Shiva Prasad2-Jul-14 3:07 
QuestionWhere's the rest of the code Pin
Bill Warner16-May-14 6:29
Bill Warner16-May-14 6:29 
QuestionNice article Pin
puja1119127-Feb-14 22:26
puja1119127-Feb-14 22:26 
QuestionWhat about REAL reuse? Pin
JVMFX14-Feb-14 8:44
JVMFX14-Feb-14 8:44 
Question4.5 stars Pin
Janilane18-Dec-13 16:27
Janilane18-Dec-13 16:27 
GeneralMy vote of 3 Pin
Anthony Fassett26-Nov-13 3:59
Anthony Fassett26-Nov-13 3:59 
QuestionGood Job 5 Pin
Stephen Wu 719-Nov-13 11:25
Stephen Wu 719-Nov-13 11:25 
QuestionGood Job! Pin
Member 1036586328-Oct-13 9:20
Member 1036586328-Oct-13 9:20 
GeneralMy vote of 5 Pin
Amir Mohammad Nasrollahi27-Jul-13 22:11
professionalAmir Mohammad Nasrollahi27-Jul-13 22:11 
QuestionAdd the source code in downloadable format Pin
Tridip Bhattacharjee8-Jul-13 5:02
professionalTridip Bhattacharjee8-Jul-13 5:02 
AnswerRe: Add the source code in downloadable format Pin
Member 1229441416-Feb-16 19:25
Member 1229441416-Feb-16 19:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.