17/02/2019 Work with Partial view in MVC framework - CodeProject

13,861,604
Sign up formembers
our free weekly Web Dev Newsletter. 283 Anderson Wernek
×

articles Q&A forums stuff lounge ? Search for articles, questions, tips

Follow

Work with Partial view in MVC framework

khem thapa, 22 Sep 2014

   4.91 (16 votes) Rate:

Work with Partial views in Asp.net MVC

Download demo - 6.1 MB

Introduction
As the complexity of a web application grows, we must decide when to create a new items and when to reuse them, if possible :).
Doing so keeps the application as simple and maintainable as possible. There for we should have a basic knowledge of the layout
and design structure of Html pages.

Descriptions
Like Master pages(web farms) or Layout(asp.net mvc) which offer a helpful way to reuse portion of markup and maintain a
consistent look and feel through out multiple pages in our site. But sometimes a scenario comes which may require more focused
approach to display some high level information in the multiple location but not in all places. To achieve this functionality Asp.net
MVC framework comes with solutions of Partial View, which lets you separate control of part of the page from the whole page, thus
enabling us to drop in consistent functionaltiy across multiple pages without having to rewrite code.

Partial views are views that contain targeted markup designed to be rendered as part of a large view. It does not specify any layout. or
we can say Partial views are the MVC replacement for user controls from ASP.NET Web Forms.

Lets go in details:

In this section, we will show you how to create and use partial views, explain how they work, and demonstrate the techniques
available for passing view data to a partial view.

We can create two type of partial view

1. Empty Partial View - When Creating Partial Views, if none of the Scaffold Template option is selected, then it will create an empty
partial view.

Later if we want to use model then we can attach like below syntax

Hide   Copy Code

@model ApplicationName.Models.ModelName

2. Strongly Typed Partial View - When creating partial view, if we select or enter a type for the Model Class option then it will create
strongly typed partial view. Now partial view file is created and it only contains the @model tag to specify the view model type. Then
we have to pass view model objects when the partial view is rendered.

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 1/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
Hide   Copy Code
@model ApplicationName.Models.ModelName

Render Partial view using Razor syntex

1. @Html.Partial ("PartialViewName", modelName)

2. @{ Html.RenderPartial("PartialViewName", modelName); }

In the both cases first parameter is the name of the partial view and second paramter is the model name (not mandatory), when
second parameter is not specified, it defaults to the model in the view from which the Html.Partial() helper was called.

@Html.Partial() - it produces a fragment of HTML, rather than a full Html document. Partial helper return MVCHtmlString and
renders the partial view as an Html-encoded string.

@Html.RenderPartial- it doesnot return HTML markup like most other helper methods, instead it writes content directly to the
response stream, which is why we must call it like a complete line of C# using a semicolon (;).

Both way can be used to render partial view as part of view, only bit difference is performance. RenderPartial is more efficeint than
Partial

Render partial view from Controller

Controller.PartialView() - it creates a PartialViewResult object that renders a partial view. The PartialViewResult renders only the
markup in the view itself and does not render any layout or master page that the view may specify. Since partial pages do not
execute the layout, you may have to include some dependencies, such as css or Javascript, directly in the partial view rather than
including them in the page's layout.

Lets demonstrate

1. Create a demo web project to demonstrate partial view. File → New Project → Select Asp.net MVC framework and name your
project and select location.

And Select Project Template and Razor as view Engine

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 2/12
17/02/2019 Work with Partial view in MVC framework - CodeProject

And Project structure is

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 3/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
2. Create Home controller in controller folder, follow below snap.

And create HomeController with empty MVC controller template.

And write the below code in home controller

Hide   Copy Code

public ActionResult Index()

{
var model = new Company();
model.Department = GetDepartmentList();
return View(model);
}

public List<department> GetDepartmentList()

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 4/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
{
var model = new List<department>();
for (var count = 1; count <= 5; count++)
{
var data = new Department();
data.DepartmentName = "IT " + count;
data.DepartmentRule = "Rule " + count;
data.AdminComment = "Admin omment " + count;
model.Add(data);
}
return model;
}

public PartialViewResult ShowPartailView()

{
return PartialView("_MyView");
}

3. Create model class -> right-click on model folder and Add-> select class then create a model class.

Hide   Copy Code

public class Department

{
public string DepartmentName { get; set; }
public string DepartmentRule { get; set; }
public string AdminComment { get; set; }
}

public class Company

{
public List<department> Department { get; set; }
}

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 5/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
4. Create a new folder in named as Home under Views folder and create a Index view

and copy below code

Hide   Shrink   Copy Code

@model PartialViewDemo.Models.Company

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>This is from main view upper.</h1>
</div>
<div>
@Html.Partial("_MyPartialView", Model.Department )
@{
Html.RenderPartial("_MyPartialView", Model.Department);
}
</div>
<div>
<h1>This is from main view lower.</h1>
</div>
<div id="divTest">
</div>
<input type="button" value="Click" id="btnClick"/>
</body>
<script src="~/Content/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#btnClick').click(function(data) {

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 6/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
$.post("@Url.Action("ShowPartailView", "Home")", function(data) {
if (data) {
$('#divTest').append(data);
}
});
});
});
</script>
</html>

<meta content="width=device-width" name="viewport" /> <title></title>

5. Create a new folder named as shared under Views folder - the partial view , layout or master pages are stored in shared folder
because these are shareable and can be used repeatedly. And then add two partial view (i) _MyPartialview and MySecondPartialView.

copy below code in _MyPartialView

Hide   Shrink   Copy Code

@model List<PartialViewDemo.Models.Department>
<h6> This below table content is from partial view</h6>
@if (Model != null)
{
<div>
<table cellspacing="0"width="50%" border="1">
<thead>
<tr>
<th>
Department Name
</th>
<th>
Department Rule
</th>
<th>
Admin Comment
</th>
</tr>
https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 7/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
</thead>
<tbody>
@foreach (var dept in Model)
{
<tr>
<td align="center">
@dept.DepartmentName
</td>
<td align="center">
@dept.DepartmentRule
</td>
<td align="center">
@dept.AdminComment
</td>
</tr>
}
</tbody>
</table>
</div>
}

And in the _MySecondPartial.cshtml

Hide   Copy Code

<h3> Testing for partial view</h3>

Now we are done with our coding part. Let debug this. Run And check.

Please download the demo to check.

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

Share

About the Author

You may also be interested in...

ASP.NET MVC Partial Views with Partial Models WCF for the Real World, Not Hello World

ASP.NET MVC Special Views - Partial View and ASP.NET MVC 2 Voting Control
Layout

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 8/12
17/02/2019 Work with Partial view in MVC framework - CodeProject

LINQ to CSV, a Type-Safe, dynamic High- Partial View in ASP.NET MVC 4

Performance Approach

Comments and Discussions

 

  Email Alerts Search Comments

Add a Comment or Question 

First Prev Next

REAL example helps me understand

Fei Meng 29-Jan-16 3:46

Keep going bro.

Reply · Email · View Thread    

Nice Artical we can add pratial view by click button but if we want on singal click of
typeview want submit all patial view data it it possible
Member 11082591 7-Nov-15 5:44

in type view I have added mutple patial view by button click after I want on typeview button click want singla type view as a
object whole as list it is possible

Reply · Email · View Thread    

Great work!
skippyV 20-Oct-15 13:08

For those who follow the steps instead of just downloading the code, you might want to fix a few copy/paste errors. The
page has these small foopahs:
Hide   Copy Code
Declaration needs capital 'D' in Company Model
public List<Department> GetDepartmentList()

Same problem in HomeController code.

ShowPartailView (or Partial ;) ) needs to change "_MyView" to "_MySecondPartialView" in

HomeController

And this extraneous text was pasted after code block before step #5:
<meta content="width=device-width" name="viewport" /> <title>

Reply · Email · View Thread    

My vote of 5
khanzzirfan 11-Apr-15 22:15

Excellent!. Nice work. 1 for your sample demo!

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 9/12
17/02/2019 Work with Partial view in MVC framework - CodeProject

Reply · Email · View Thread    

Excellent Work done :)

Shatyamm Kumar 6-Oct-14 15:12

Very detailed explanation of the topic has been covered.

Make your self a void pointer so that you can type cast it every data type.

Reply · Email · View Thread    

Re: Excellent Work done :)

khem thapa 7-Oct-14 4:41

Thank you sir, comment and suggestion are appreciated Regards

Learn more, Know more and Share more

Reply · Email · View Thread    

Re: Excellent Work done :)

Shatyamm Kumar 7-Oct-14 4:45

You are welcome, share something more

Make your self a void pointer so that you can type cast it every data type.

Reply · Email · View Thread    

Very Good... :)
jnyanendra 6-Oct-14 14:58

Very Good...

Reply · Email · View Thread    

Re: Very Good... :)

khem thapa 7-Oct-14 4:39

Thanks Jnyanendra

Learn more, Know more and Share more

Reply · Email · View Thread    

Nice work..Well done

Sagar kshetri 1-Oct-14 11:33

Good one, keep it up.

Reply · Email · View Thread    

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 10/12
17/02/2019 Work with Partial view in MVC framework - CodeProject

Re: Nice work..Well done

khem thapa 1-Oct-14 11:41

Thanks Sagar

Comment and suggestions are appreciated

Reply · Email · View Thread    

My Vote 5
Shemeemsha (െഷമീംഷ) 24-Sep-14 6:39

Good Article

Reply · Email · View Thread    

Re: My Vote 5
khem thapa 25-Sep-14 8:20

Thanks Shemeemsha

Regards, Khem

Reply · Email · View Thread    

Nice details
Imran Abdul Ghani 23-Sep-14 3:51

Nice details provided.

Reply · View Thread    

Re: Nice details

khem thapa 23-Sep-14 4:17

Thanks Imran, Happy to share

Reply · Email · View Thread    

Nice
Dukhabandhu Sahoo 22-Sep-14 13:59

Reply · Email · View Thread    

Re: Nice
khem thapa 23-Sep-14 4:15

Thanks Dukhabandhu
https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 11/12
17/02/2019 Work with Partial view in MVC framework - CodeProject

Reply · Email · View Thread    

Downloadlink
Member 10645579 22-Sep-14 11:19

Hello very good Article but there is no Download available ?

Reply · Email · View Thread    

Re: Downloadlink
khem thapa 22-Sep-14 11:30

Thank you user. Waiting for new version to reflect, as already updated with link to download.

Comments and suggestions are always appreciated . Regards

Reply · Email · View Thread    

My vote of 5
Humayun Kabir Mamun 22-Sep-14 8:20

Nice...

Reply · Email · View Thread    

Re: My vote of 5
khem thapa 22-Sep-14 9:11

Thank you Humayun, Comments and suggestion are always appreciated Regards

Reply · Email · View Thread 5.00/5 (1 vote)    

Refresh 1

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin   

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile

Web02 | 2.8.190214.1 | Last Updated 22 Sep 2014 Selecione o idioma ▼
Layout: fixed | Article Copyright 2014 by khem thapa
fluid Everything else Copyright © CodeProject, 1999-2019

https://www.codeproject.com/Articles/821330/Work-with-Partial-view-in-MVC-framework 12/12