Click here to Skip to main content
11,574,494 members (69,800 online)
Click here to Skip to main content

Partial View in ASP.NET MVC 4

, 8 Jul 2013 CPOL 330.5K 44
Rate this:
Please Sign up or sign in to vote.
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.

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:

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

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

Or

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

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

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)

Share

About the Author

josh-jw
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
SuggestionBest examples for addition of partial view MVC4 and MVC 5 Pin
maheshdare17-Mar-15 20:32
membermaheshdare17-Mar-15 20:32 
GeneralMy vote of 1 Pin
Yogeshwaran.P2-Feb-15 1:22
memberYogeshwaran.P2-Feb-15 1:22 
GeneralMy vote of 4 Pin
amol_th28-Jan-15 3:07
memberamol_th28-Jan-15 3:07 
GeneralGreat work Pin
Luai Kayyali26-Jan-15 5:32
memberLuai Kayyali26-Jan-15 5:32 
GeneralMy Vote of 5 Pin
Bhavik_Patel2-Sep-14 0:02
professionalBhavik_Patel2-Sep-14 0:02 
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
AShivaPrasad2-Jul-14 3:28
memberAShivaPrasad2-Jul-14 3:28 
GeneralMy vote of 2 Pin
AShivaPrasad2-Jul-14 3:07
memberAShivaPrasad2-Jul-14 3:07 
QuestionWhere's the rest of the code Pin
Bill Warner16-May-14 6:29
memberBill Warner16-May-14 6:29 
QuestionNice article Pin
puja1119127-Feb-14 22:26
memberpuja1119127-Feb-14 22:26 
QuestionWhat about REAL reuse? Pin
JVMFX14-Feb-14 8:44
memberJVMFX14-Feb-14 8:44 
Question4.5 stars Pin
Janilane18-Dec-13 16:27
memberJanilane18-Dec-13 16:27 
GeneralMy vote of 3 Pin
Anthony Fassett26-Nov-13 3:59
memberAnthony Fassett26-Nov-13 3:59 
QuestionGood Job 5 Pin
Stephen Wu 719-Nov-13 11:25
memberStephen Wu 719-Nov-13 11:25 
QuestionGood Job! Pin
Member 1036586328-Oct-13 9:20
memberMember 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
memberTridip Bhattacharjee8-Jul-13 5:02 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150624.2 | Last Updated 8 Jul 2013
Article Copyright 2013 by josh-jw
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid