What is Partial View in ASP.NET MVC?
Project overview
Here I create an application to keep basic employee information. View, add, update and delete option of an employee is in the application. I used partial view to show employee information in grid. Here I showed how do you run CRUD operation using partial view in most manageable way.
Let’s come to the implementation of the project.
Tools and Technology used
I used following tools and technology to develop the project –
- Visual Studio 2013
- Visual C#
- ASP.NET MVC 5
- Entity Framework 6
- Razor view engine
- JQuery
Step 1: Create a ASP.net MVC Project
From Visual studio 2013, choose File->Project -> ASP.NET Web application as below
Select MVC Template and click OK
Step 2: Change or Add Connection String
Change or Add connection string in Web.config as follows
Step 3: Create model classes
Create three model classes Dept, Designation and Employee as follows.
Dept Class
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; namespace Web.HRM.Models { public class Dept { public Dept() { ActionDate = DateTime.Now; } [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int Id { get; set; } [Display(Name = "Dept")] public string Name { get; set; } public virtual ListEmployees { get; set; } public DateTime ActionDate { get; set; } } }
Designation Class
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; namespace Web.HRM.Models { public class Designation { public Designation() { ActionDate = DateTime.Now; } [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int Id { get; set; } [Display(Name = "Designation")] public string Name { get; set; } public virtual ListEmployees { get; set; } public DateTime ActionDate { get; set; } } }
Employee Class
using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; namespace Web.HRM.Models { public class Employee { public Employee() { ActionDate = DateTime.Now; } [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int Id { get; set; } [Display(Name = "Employee Code")] public string EmpCode { get; set; } [Display(Name = "Full Name")] public string FullName { get; set; } [Display(Name = "Nick Name")] public string NickName { get; set; } [Display(Name = "Designation")] public int DesignationId { get; set; } [ForeignKey("DesignationId")] public virtual Designation Designation { get; set; } [Display(Name = "Department")] public int DeptId { get; set; } [ForeignKey("DeptId")] public virtual Dept Dept { get; set; } public string Phone { get; set; } public string Email { get; set; } public string Address { get; set; } public DateTime ActionDate { get; set; } } }
Step 4: Create a Context class
Create HRMContext Class in Model folder.
using Microsoft.AspNet.Identity.EntityFramework; using System.Data.Entity; namespace Web.HRM.Models { public class HRMContext : IdentityDbContext{ public HRMContext() : base("DefaultConnection", throwIfV1Schema: false) { } public static HRMContext Create() { return new HRMContext(); } public DbSet Depts { get; set; } public DbSet Designations { get; set; } public DbSet Employees { get; set; } } }
Step 5: Create Controller and Views
Click Right button on Controller Folder->Add Controller. Now choose scaffolding template as follows. Click Add.
Now select context, model name and type controller name as EmployeeController as follows.
Step 6: Modify the controller
Modify EmployeeController as follows.
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Net; using System.Web.Mvc; using Web.HRM.Models; namespace Web.HRM.Controllers { public class EmployeeController : Controller { private HRMContext db = new HRMContext(); // GET: /Employee/ public ActionResult Index() { var employees = db.Employees.Include(e => e.Dept).Include(e => e.Designation); return View(employees.ToList()); } // GET: /Employee/Details/5 public ActionResult Details(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Employee employee = db.Employees.Find(id); if (employee == null) { return HttpNotFound(); } return View(employee); } // GET: /Employee/Create public ActionResult Create() { ViewBag.DeptId = new SelectList(db.Depts, "Id", "Name"); ViewBag.DesignationId = new SelectList(db.Designations, "Id", "Name"); ListlstDept = db.Depts.ToList(); ViewBag.DeptList = lstDept; List lstDesignation = db.Designations.ToList(); ViewBag.DesignationList = lstDesignation; return View(); } // POST: /Employee/Create // To protect from overposting attacks, please enable the specific properties you want to bind to, for // more details see http://go.microsoft.com/fwlink/?LinkId=317598. [HttpPost] [ValidateAntiForgeryToken] public ActionResult Create([Bind(Include = "Id,EmpCode,FullName,NickName,DesignationId,DeptId,Phone,Email,Address")] Employee employee) { if (ModelState.IsValid) { employee.ActionDate = DateTime.Now; if (employee.Id != 0) db.Entry(employee).State = EntityState.Modified; else db.Employees.Add(employee); db.SaveChanges(); return RedirectToAction("Create"); } ViewBag.DeptId = new SelectList(db.Depts, "Id", "Name", employee.DeptId); ViewBag.DesignationId = new SelectList(db.Designations, "Id", "Name", employee.DesignationId); return View(employee); } // GET: /Employee/Edit/5 public ActionResult Edit(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Employee employee = db.Employees.Find(id); if (employee == null) { return HttpNotFound(); } ViewBag.DeptId = new SelectList(db.Depts, "Id", "Name", employee.DeptId); ViewBag.DesignationId = new SelectList(db.Designations, "Id", "Name", employee.DesignationId); return View(employee); } // POST: /Employee/Edit/5 // To protect from overposting attacks, please enable the specific properties you want to bind to, for // more details see http://go.microsoft.com/fwlink/?LinkId=317598. [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit([Bind(Include = "Id,EmpCode,FullName,NickName,DesignationId,DeptId,Phone,Email,Address,ActionDate")] Employee employee) { if (ModelState.IsValid) { db.Entry(employee).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } ViewBag.DeptId = new SelectList(db.Depts, "Id", "Name", employee.DeptId); ViewBag.DesignationId = new SelectList(db.Designations, "Id", "Name", employee.DesignationId); return View(employee); } // GET: /Employee/Delete/5 public ActionResult Delete(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Employee employee = db.Employees.Find(id); if (employee == null) { return HttpNotFound(); } return View(employee); } // POST: /Employee/Delete/5 [HttpPost, ActionName("Delete")] [ValidateAntiForgeryToken] public ActionResult DeleteConfirmed(int id) { Employee employee = db.Employees.Find(id); db.Employees.Remove(employee); db.SaveChanges(); return RedirectToAction("Create"); //return RedirectToAction("Index"); } public ActionResult _LoadSearchEmployee(string desigId, string deptId) { List employee = new List (); int _desigId = 0; int _deptId = 0; Int32.TryParse(desigId, out _desigId); Int32.TryParse(deptId, out _deptId); employee = db.Employees.Where(p => (p.DeptId == _deptId || _deptId == 0) && (p.DesignationId == _desigId || _desigId == 0)).ToList(); return PartialView(employee); } protected override void Dispose(bool disposing) { if (disposing) { db.Dispose(); } base.Dispose(disposing); } } }
Step 7: Create a partial view
Create a partial view name _LoadSearchEmployee in Employee Controller. Click right button on _LoadSearchEmployee action -> Add View -> Select “Create as a partial view” as follows.
Modify the partial view “_LoadSearchEmployee” in Views-> Employee folder as follows.
@model IEnumerable@{ ViewBag.Title = "View1"; } List of Employees
@*@Html.ActionLink("Create New", "Create")
*@
@foreach (var item in Model) { @Html.DisplayNameFor(model => model.EmpCode) @Html.DisplayNameFor(model => model.FullName) @Html.DisplayNameFor(model => model.NickName) @Html.DisplayNameFor(model => model.Designation.Name) @Html.DisplayNameFor(model => model.Dept.Name) @Html.DisplayNameFor(model => model.Phone) @Html.DisplayNameFor(model => model.Email) } @Html.DisplayFor(modelItem => item.EmpCode) @Html.DisplayFor(modelItem => item.FullName) @Html.DisplayFor(modelItem => item.NickName) @Html.DisplayFor(modelItem => item.Designation.Name) @item.DesignationId @Html.DisplayFor(modelItem => item.Dept.Name) @item.DeptId @Html.DisplayFor(modelItem => item.Phone) @Html.DisplayFor(modelItem => item.Email) @item.Address @item.Id | @Html.ActionLink("Details", "Details", new { id = item.Id }) | @Html.ActionLink("Delete", "Delete", new { id = item.Id })
Step 8: Create a View
Right click on Create action -> Add View as follows.
Modify the “Create” View and javascript bottom of the view in View->Employee folder as follows.
@model Web.HRM.Models.Employee @{ ViewBag.Title = "Create"; var lstDept = ViewBag.DeptList; var lstDesignation = ViewBag.DesignationList; } @*Create
*@ @using (Html.BeginForm()) { @Html.AntiForgeryToken()} @*Employee Information
@Html.ValidationSummary(true) @*@Html.HiddenFor(model => model.Id)*@
@Html.LabelFor(model => model.EmpCode, new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.EditorFor(model => model.EmpCode) @Html.ValidationMessageFor(model => model.EmpCode) @Html.LabelFor(model => model.FullName, new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.EditorFor(model => model.FullName) @Html.ValidationMessageFor(model => model.FullName) @Html.LabelFor(model => model.NickName, new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.EditorFor(model => model.NickName) @Html.ValidationMessageFor(model => model.NickName) @Html.LabelFor(model => model.DesignationId, "Designation", new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.DropDownList("DesignationId", "---Select Dept---") @Html.ValidationMessageFor(model => model.DesignationId) @Html.LabelFor(model => model.DeptId, "Dept", new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.DropDownList("DeptId", "---Select Dept---") @Html.ValidationMessageFor(model => model.DeptId) @Html.LabelFor(model => model.Phone, new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.EditorFor(model => model.Phone) @Html.ValidationMessageFor(model => model.Phone) @Html.LabelFor(model => model.Email, new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) @Html.LabelFor(model => model.Address, new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.EditorFor(model => model.Address) @Html.ValidationMessageFor(model => model.Address) || @Html.ActionLink("Clear", "Create", "Employee", null, new { @class = "btn btn-primary" }) @*@Html.ActionLink("Back to List", "Index")*@
@Html.Label("Dept: ", new { @style = "width : 150px", @class = "control-label col-md-2" }) @Html.DropDownList("DeptSearch", new SelectList(lstDept, "Id", "Name"), "---Select Dept---", new { @style = "width : 200px", @class = "form-control" }) @Html.Label("Designation: ", new { @class = "control-label col-md-2" }) @Html.DropDownList("DesigSearch", new SelectList(lstDesignation, "Id", "Name"), "---Select Designation---", new { @style = "width : 200px", @class = "form-control" }) @Html.ActionLink("Back to List", "Index")*@
@{ Html.RenderAction("_LoadSearchEmployee", new { desigId = "", deptId = "" }); }@section Scripts { @Scripts.Render("~/bundles/jqueryval") }
Step 9: Modify the RouteConfig
Modify route configuration in App_Start in RouteConfig.cs is as follows. Main reason to modify this class to run the create page by default.
using System.Web.Mvc; using System.Web.Routing; namespace Web.HRM { public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Employee", action = "Create", id = UrlParameter.Optional } ); } } }
Now run the application, you will see the following output. You can add, view, update and delete employee information in a same page. Thanks for your patience.