CRUD And Search Operation In ASP.NET MVC Application Using Partial View

8 minute read

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 have created 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
Select MVC Template and click OK

Step 2: Change or Add Connection String

Change or Add connection string in Web.config as follows

<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\HRMDB.mdf;Initial Catalog=HRMDB;Integrated Security=True" providerName="System.Data.SqlClient" />

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<employee> 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<Employee> 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<ApplicationUser>
    {
        public HRMContext()
            : base("DefaultConnection", throwIfV1Schema: false)
        {
        }
 
        public static HRMContext Create()
        {
            return new HRMContext();
        }
 
        public DbSet<Dept> Depts { get; set; }
        public DbSet<Designation> Designations { get; set; }
        public DbSet<Employee> Employees { get; set; }
    }
}

Step 5: Create Controller and Views

Click Right button on Controller Folder->Add Controller.
Now choose MVC 5 Controller with views, using Entity Framework as scaffolding template.
Click Add.
Now select HRMContext as context, Employee as model and type controller name as EmployeeController.

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<Dept> lstDept = db.Depts.ToList();
            ViewBag.DeptList = lstDept;
 
            List<Designation> 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> employee = new List<Employee>();
            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<Web.HRM.Models.Employee>
 
    @{
        ViewBag.Title = "View1";
    }
 
    <h2>List of Employees</h2>
 
    @*<p>
            @Html.ActionLink("Create New", "Create")
        </p>*@
    <table class="table">
        <tr>
 
            <th>
                @Html.DisplayNameFor(model => model.EmpCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FullName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NickName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Designation.Name)
            </th>
            <th hidden="hidden"></th>
            <th>
                @Html.DisplayNameFor(model => model.Dept.Name)
            </th>
            <th hidden="hidden"></th>
 
            <th>
                @Html.DisplayNameFor(model => model.Phone)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
 
            <th hidden="hidden"></th>
            <th hidden="hidden"></th>
 
            <th></th>
        </tr>
 
        @foreach (var item in Model)
        {
            <tr>
 
                <td>
                    @Html.DisplayFor(modelItem => item.EmpCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.NickName)
                </td>
 
 
                <td>
                    @Html.DisplayFor(modelItem => item.Designation.Name)
 
                </td>
                <td hidden="hidden">
                    @item.DesignationId
                </td>
 
                <td>
                    @Html.DisplayFor(modelItem => item.Dept.Name)
                </td>
 
                <td hidden="hidden">
                    @item.DeptId
                </td>
 
                <td>
                    @Html.DisplayFor(modelItem => item.Phone)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
 
                <td hidden="hidden">
                    @item.Address
                </td>
 
                <td hidden="hidden">
                    @item.Id
                </td>
                <td>
                <input type="button" id="editRow" value="Edit" class="btn btn-link editRow" />
                |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
 
    </table>
 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
 
            $('#EmpCode').val('');
            $('#FullName').val('');
            $('#NickName').val('');
            $('#Phone').val('');
            $('#Email').val('');
 
            $('.editRow').click(function () {
 
                $('#EmpCode').val($(this).closest('tr').find('td:eq(0)').text().trim());
                $('#FullName').val($(this).closest('tr').find('td:eq(1)').text().trim());
                $('#NickName').val($(this).closest('tr').find('td:eq(2)').text().trim());
 
                var designationId = $(this).closest('tr').find('td:eq(4)').text().trim();
                var deptId = $(this).closest('tr').find('td:eq(6)').text().trim();
                //alert(designationId);
                $("#DesignationId").val(designationId);
                $("#DeptId").val(deptId);
 
                $('#Phone').val($(this).closest('tr').find('td:eq(7)').text().trim());
                $('#Email').val($(this).closest('tr').find('td:eq(8)').text().trim());
 
                $('#Address').val($(this).closest('tr').find('td:eq(9)').text().trim());
 
                var empId = $(this).closest('tr').find('td:eq(10)').text().trim();
                //alert(empId);
                $("#Id").val(empId);
                $("#btnSave").val("Edit");
 
            });
        });
    </script>

Step 8: Create a View

Right click on Create action -> Add View name Create 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;
 
}
 
@*<h2>Create</h2>*@
 
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
 
 
    <div class="form-horizontal">
        <h4>Employee Information</h4>
        <hr />
        @Html.ValidationSummary(true)
 
        @*@Html.HiddenFor(model => model.Id)*@
        <input type="hidden" value="0" id="Id" name="Id" />
 
        <table>
            <tr>
                <td>@Html.LabelFor(model => model.EmpCode, new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.EditorFor(model => model.EmpCode)
                    @Html.ValidationMessageFor(model => model.EmpCode)
                </td>
                <td>@Html.LabelFor(model => model.FullName, new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.EditorFor(model => model.FullName)
                    @Html.ValidationMessageFor(model => model.FullName)
                </td>
            </tr>
 
            <tr>
                <td>@Html.LabelFor(model => model.NickName, new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.EditorFor(model => model.NickName)
                    @Html.ValidationMessageFor(model => model.NickName)
                </td>
                <td>@Html.LabelFor(model => model.DesignationId, "Designation", new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.DropDownList("DesignationId", "---Select Dept---")
                    @Html.ValidationMessageFor(model => model.DesignationId)
                </td>
            </tr>
 
            <tr>
                <td>@Html.LabelFor(model => model.DeptId, "Dept", new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.DropDownList("DeptId", "---Select Dept---")
                    @Html.ValidationMessageFor(model => model.DeptId)
                </td>
                <td>@Html.LabelFor(model => model.Phone, new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.EditorFor(model => model.Phone)
                    @Html.ValidationMessageFor(model => model.Phone)
                </td>
            </tr>
 
            <tr>
                <td>@Html.LabelFor(model => model.Email, new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.EditorFor(model => model.Email)
                    @Html.ValidationMessageFor(model => model.Email)
                </td>
                <td>@Html.LabelFor(model => model.Address, new { @style = "width : 150px", @class = "control-label col-md-2" })</td>
                <td>
                    @Html.EditorFor(model => model.Address)
                    @Html.ValidationMessageFor(model => model.Address)
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="Save" id="btnSave" class="btn btn-primary" /> ||
                    @Html.ActionLink("Clear", "Create", "Employee", null, new { @class = "btn btn-primary" })
                    @*@Html.ActionLink("Back to List", "Index")*@
 
                </td>
                <td></td>
                <td></td>
            </tr>
        </table>
 
        <hr />
        <table>
            <tr>
                <td>@Html.Label("Dept: ", new { @style = "width : 150px", @class = "control-label col-md-2" }) </td>
                <td>
                    @Html.DropDownList("DeptSearch", new SelectList(lstDept, "Id", "Name"), "---Select Dept---", new { @style = "width : 200px", @class = "form-control" })
                </td>
                <td>@Html.Label("Designation: ", new { @class = "control-label col-md-2" })</td>
                <td>
 
                    @Html.DropDownList("DesigSearch", new SelectList(lstDesignation, "Id", "Name"), "---Select Designation---", new { @style = "width : 200px", @class = "form-control" })
                </td>
                <td>
                    <input type="button" value="Search" class="btn btn-primary" id="getData" />
                </td>
            </tr>
        </table>
 
    </div>
}
 
@*<div>
        @Html.ActionLink("Back to List", "Index")
    </div>*@
 
<br /><br /><br />
 
<div id="saveDiv">
    @{ Html.RenderAction("_LoadSearchEmployee", new { desigId = "", deptId = "" }); }
</div>
<div id="partial">
 
</div>
 
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
 
 
    <script>
        $(function () {
 
            $('#getData').click(function () {
                //alert('Clicked');
                var deptId = $('#DeptSearch').val();
                var desigId = $('#DesigSearch').val();
                $('#saveDiv').hide();
 
                var url = "@Html.Raw(Url.Action("_LoadSearchEmployee", "Employee", new { desigId = "-parameter", deptId = "sempar" }))";
                url = url.replace("-parameter", desigId);
                url = url.replace("sempar", deptId);
                $('#partial').load(url);
            });
 
        });
 
    </script>
}

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.

Twitter Facebook LinkedIn

Mahedee Hasan

CRUD And Search Operation In ASP.NET MVC Application Using Partial View

You May Also Enjoy

Step-by-Step Guide: Deploying an ASP.NET Core Application with Azure Kubernetes Services, Azure SQL Server, and Azure Container Registry

Understanding Different Kinds of Kubernetes Resources

How to Configure SSL and HTTPS for RabbitMQ in Docker

Utilizing Bulk Operations with Entity Framework and ASP.NET Core