Click here to Skip to main content
Click here to Skip to main content

Partial View in ASP.NET MVC 4

, 8 Jul 2013
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

Comments and Discussions

 
GeneralMy vote of 1 PinprofessionalYogesh Kumar Tyagi22-Jul-14 23:20 
SuggestionThe Best Example for Partial View PinmemberAShivaPrasad2-Jul-14 3:28 
GeneralMy vote of 2 PinmemberAShivaPrasad2-Jul-14 3:07 
QuestionWhere's the rest of the code PinmemberBill Warner16-May-14 6:29 
QuestionNice article Pinmemberpuja1119127-Feb-14 22:26 
QuestionWhat about REAL reuse? PinmemberJVMFX14-Feb-14 8:44 
Question4.5 stars PinmemberJanilane18-Dec-13 16:27 
GeneralMy vote of 3 PinmemberAnthony Fassett26-Nov-13 3:59 
QuestionGood Job 5 PinmemberStephen Wu 719-Nov-13 11:25 
QuestionGood Job! PinmemberMember 1036586328-Oct-13 9:20 
GeneralMy vote of 5 PinprofessionalAmir Mohammad Nasrollahi27-Jul-13 22:11 
QuestionAdd the source code in downloadable format PinmemberTridip 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 | Mobile
Web02 | 2.8.140827.1 | Last Updated 8 Jul 2013
Article Copyright 2013 by josh-jw
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid