CRUD and search operation in ASP.NET MVC application using partial view

What is Partial View in ASP.NET MVC?

  • Partial view is a view which is rendered in another view
  • Partial view render portion of pages
  • Using partial view, you can reuse portion of page
  • Partial view is similar to a normal view with .cshtml


  • 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

    0106_01

    Select MVC Template and click OK

    0106_02


    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.

    0106_04

    Now select context, model name and type controller name as EmployeeController as follows.

    0106_05

    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.

    0106_06

    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.

    0106_07

    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.

    0106_08