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 [Link] 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([Link] 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 [Link]
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 [Link] 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 [Link]
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.
[Link] 1/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
Hide Copy Code
@model [Link]
Render Partial view using Razor syntex
1. @[Link] ("PartialViewName", modelName)
2. @{ [Link]("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 [Link]() helper was called.
@[Link]() - 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.
@[Link]- 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
[Link]() - 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 [Link] MVC framework and name your
project and select location.
And Select Project Template and Razor as view Engine
[Link] 2/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
And Project structure is
[Link] 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();
[Link] = GetDepartmentList();
return View(model);
}
public List<department> GetDepartmentList()
[Link] 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();
[Link] = "IT " + count;
[Link] = "Rule " + count;
[Link] = "Admin omment " + count;
[Link](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; }
}
[Link] 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 [Link]
@{
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>
@[Link]("_MyPartialView", [Link] )
@{
[Link]("_MyPartialView", [Link]);
}
</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/[Link]"></script>
<script type="text/javascript">
$(function() {
$('#btnClick').click(function(data) {
[Link] 6/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
$.post("@[Link]("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<[Link]>
<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>
[Link] 7/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
</thead>
<tbody>
@foreach (var dept in Model)
{
<tr>
<td align="center">
@[Link]
</td>
<td align="center">
@[Link]
</td>
<td align="center">
@[Link]
</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...
[Link] MVC Partial Views with Partial Models WCF for the Real World, Not Hello World
[Link] MVC Special Views - Partial View and [Link] MVC 2 Voting Control
Layout
[Link] 8/12
17/02/2019 Work with Partial view in MVC framework - CodeProject
LINQ to CSV, a Type-Safe, dynamic High- Partial View in [Link] 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!
[Link] 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
[Link] 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
[Link] 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
[Link] 12/12
