How do I use a partial view in MVC 3?
Great!! Sometime, I don't know why, I stuck for small things. I was trying to
load two partial views(MVC 3). But, after spending 6 hours I got to know how to
load.
This retards my brain. I have been searching for good articles on MVC 3 & Partial
views. But, I failed to find any.
So, Let us go in dept on MVC3 & Partial Views.
Partial views and User Controls are somewhat similar in purpose of usage. But the
way in which they are used is totally different. I will explain about these in detail.
Step 1:
Create an ASP.NET MVC 3 project using VS 2010. I have named it as ARVPartialView.
Add one partiaview and name it as PartialIndex
Step 2:
I have created one module like PartialModel as given below.
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
ARVPartialView.Models
{
public partial class PartialModel
{
public string
Name { get; set;
}
public int
Actual { get; set;
}
public int
Target { get; set;
}
public int
Score { get; set;
}
}
public partial class PartialModel
{
public List<PartialModel>
lstPartialModel { get;
set; }
}
}
Step 3:
Now the time to add some values to this list. The solution structure looks like
as given bellow.
Since I like render partial view over Home/Index, So, I have written one
function in HomeController.
public class HomeController :
Controller
{
public
ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET
MVC!";
/// <summary>
///
TODO:To get data and returning result to the index view..
/// </summary>
/// <returns></returns>
return View(new PartialModel() { lstPartialModel =
GetSampleData() });
}
public ActionResult
About()
{
return View();
}
/// <summary>
///
TODO:Function to add some data to list.
/// </summary>
/// <returns></returns>
private List<PartialModel>
GetSampleData()
{
List<PartialModel>
model = new List<PartialModel>();
model.Add(new PartialModel()
{
Name =
"Aravind",
Actual = 10000,
Target = 12000,
Score = 83
});
model.Add(new PartialModel()
{
Name = "Ram",
Actual = 8000,
Target = 14000,
Score = 57
});
model.Add(new PartialModel()
{
Name = "Ajay",
Actual = 50000,
Target = 35000,
Score = 143
});
return model;
}
}
Step 4:
In Index view, I have included partial view as given bellow. As like web
usercontrol, partial view doest initiate any events while loading Just like
initializecomponet etc. So, we have to pass the list to partial view in the
parent page.
<!--
Author:Aravind
Module:PartialView.
Created On:07/12/2011
Modified By:
Modified On:
-->
@model IEnumerable<ARVPartialView.Models.PartialModel>
@using
ARVPartialView.Models
ViewBag.Title = "Aravind' PartialView Test !!";
}
<div data-role="page" data-title="Aravind's
Partial View Test" data-add-back-btn="true" data-back-btn-text="Back">
<div class="grid" style="margin-left:
5px;" id="grid">
@if
(Model != null)
{
<div class="grid">
<table cellspacing="0" width="80%">
<thead>
<tr>
<th>
Name
</th>
<th>
Actual
</th>
<th>
Target
</th>
<th>
Score
</th>
</tr>
</thead>
<tbody>
@foreach
(var itm in
Model)
{
<tr>
<td align="center">
@itm.Name
</td>
<td align="center">
@itm.Actual
</td>
<td align="center">
@itm.Target
</td>
<td align="center">
@itm.Score
</td>
</tr>
}
</tbody>
</table>
<br />
<br />
<br />
<br />
</div>
}
</div>
</div>
Step 5:
Render partial view on Index view.
<!--
Author:Aravind
Module:PartialView.
Created On:07/12/2011
Modified By:
Modified On:
-->
@model
ARVPartialView.Models.PartialModel
@{
ViewBag.Title =
"Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
To learn more
about Hot Topics <a href="http://silverlightarvind.blogspot.com" title="Enjoy the
Concept(Aravind)" />
<a href="http://www.c-sharpcorner.com/Authors/aravindbenator/aravind-bs.aspx." title="About Me" />
<div>
@Html.Partial("IndexPartial",
Model.lstPartialModel)
</div>
</p>
Step 6:
Run the application.
