How to create Partial Views in MVC 2.0?
Purpose to use partial views - Duplicate code can be removed and reusability can be implemented in the application. If you want to repair anything then only that particular view needs to be repaired so maintenance becomes easy.
How to create Partial Views in MVC 2.0?
You have to perform following steps to create partial views successfully.
1)Go to File-> New Project -> Choose ASP.net MVC2.0 web application. Give name as Trial which will be the namespace for our application. Click on "OK" button. It will create Models , Views , Controllers folder which will be empty because you have chosen empty web application.
2) Creation of Models:
Firstly, we will create model which are nothing but data providers for our application. Right click on Models folder and add new folder as "ViewModels". Add class file to Models folder with name "Employee.cs". Add one more class file into Models folder with name "Dept.cs". Now we will create one class file" EmpDeptCollectionViewModel.cs" into ViewModels folder.
3)Place following code in to "Employee.cs". We will create two properties there empno and empname.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Trial.Models
{
public class Employee
{
public int empno { get; set; }
public string empname { get; set; }
}
4)Place following code in to "Dept.cs". We will create two properties there deptid and deptname.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Trial.Models
{
public class Dept
{
public int deptid { get; set; }
public string deptname { get; set; }
}
}
5)Creation of View Model:
Place following code in to "EmpDeptCollectionViewModel.cs".
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Trial.Models.ViewModels
{
public class EmpDeptCollectionViewModel
{
public Employee emp { get; set; }
public Dept dep { get; set; }
}
}
6) Creation of Controller:
Now we will add controller to our application. Right click on Controllers folder and add controller with name "EmpDeptCollectionController.cs".
You check checkbox for adding action methods for create, update , delete , details etc. It will create default action methods for above mentioned actions.
You can place following code into "EmpDeptCollectionController.cs"
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Trial.Models;
using Trial.Models.ViewModels;
namespace Trial.Controllers
{
public class EmpDeptCollectionController : Controller
{
public ActionResult Index()
{
Employee e = new Employee();
e.empno = 101;
e.empname = "Kamal";
Dept d = new Dept ();
d.deptid = 10001;
d.deptname = "Marketing";
EmpDeptCollectionViewModel obj = new EmpDeptCollectionViewModel();
obj.emp = e;
obj.dep = d;
return View(obj);
}
}
}
7) Creation of Master page:
Add master page as "Site.master" in shared folder in views folder.
8) Creation of Views:
Now if you right click on Index method in "EmpDeptCollectionController.cs" then you can add view for the same.
Give name Index to view it will create .aspx page Make sure that while creating view, you have to select checkbox as checked for create strongly-typed view. Choose appropriate data class. i.e. Viewmodel data class.
Select master page as site.master which is created in step7.
9) Creation of Partial Views:
Add partial views for that create Partial folder under views. Right click on partial folder and add view as "Employees.ascx". Make sure you have selected "Create partial views (.ascx)" checkbox while creating partial views. Check "Strongly-typed view" checkbox and select "Trial.Models.Employee" as data class. Select master page as site.master and click on "OK" button. Place following code in "Employees.ascx"
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Trial.Models.Employee>" %>
<fieldset>
<legend>Employees</legend>
<p>
Employee Id:
<%= Html.Encode(Model.empno) %>
</p>
<p>
Employee name:
<%= Html.Encode(Model.empname) %>
</p>
</fieldset>
Add one more partial view for department collection.
Right click on partial folder and add view as "Departments.ascx"
Make sure you have selected "Create partial views (.ascx)" checkbox while creating partial views. Check "Strongly-typed view" checkbox and select "Trial.Models.Dept" as data class. Select master page as site.master and click on "OK" button. Place following code in "Departments.ascx"
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Trial.Models.Dept>" %>
<fieldset>
<legend>Departments</legend>
<p>
Department Id:
<%= Html.Encode(Model.deptid) %>
</p>
<p>
Department name:
<%= Html.Encode(Model.deptname ) %>
</p>
</fieldset>
10)Place following code in Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Trial.Models.ViewModels.EmpDeptCollectionViewModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Employee Collection information</h2>
<% Html.RenderPartial("~/Views/EmpDeptCollection/Partial/Employees.ascx", Model.emp); %>
<h2>Department Collection information</h2>
<% Html.RenderPartial("~/Views/EmpDeptCollection/Partial/Departments.ascx", Model.dep); %>
</asp:Content>
11)When you execute the application, you will find following error "Server Error in '/' Application. The resource cannot be found."
To overcome this error you have to append "EmpDeptCollection" in url
For e.g url will be http://localhost:portnumber/EmpDeptCollection
Output will be as follows :
Employee Collection information
Employees
Employee Id: 101
Employee name: Kamal
Department Collection information
Departments
Department Id: 10001
Department name: Marketing