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 –

1. Visual Studio 2013
2. Visual C#
3. ASP.NET MVC 5
4. Entity Framework 6
5. Razor view engine
6. 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 List Employees { 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 List Employees { 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");

            List lstDept = 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)

                
                

                

                    @Html.DisplayFor(modelItem => item.Dept.Name)
                

                

                

                    @Html.DisplayFor(modelItem => item.Phone)
                
                

                    @Html.DisplayFor(modelItem => item.Email)
                

                

                
                

                
                |
                @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.

Please share, if it is helpful