Partial View in MVC
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 functionality 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
@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.
@model ApplicationName.Models.ModelName
Render
Partial view using Razor syntex1. @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 i.e 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
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
public ActionResult Index()
{
var model = new Company();
model.Department = GetDepartmentList();
return View(model);
}
public List<department> GetDepartmentList()
{
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.
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; }
}
4. Create a new folder in named as Home under
Views folder and create a Index view
and copy below code in index.cshtml.
@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) {
$.post("@Url.Action("ShowPartailView", "Home")", function(data) {
if (data) {
$('#divTest').append(data);
} }); }); });
</script>
</html>
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
@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>
</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<h3> Testing for partial view</h3> Now we are done with our coding part. Let debug this. Run and check.
Visit my Code Project article Partial View in MVC
