CURD Operations in ASP.NET MVC using jQuery dialog with EF

 

Introduction: 

In this article I will try to demonstrate, CURD (Create, Update, Delete, and Retrieve) operation using jQuery dialog with entity framework. In this scenario, I have using code first approach. For this I have using following Employee model with its EmployeeDBContext file:

public class Employee
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        public int EmpID { get; set; }
        [Required]
        [Display(Name = "Full Name")]
        public string FullName { get; set; }
        [Required]
        [Display(Name = "Email-id")]
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }
        [Display(Name = "Address")]
        public string Address { get; set; }
        [Display(Name = "Country")]
        public string Town { get; set; }
        [Display(Name = "Mobile Number")]
        public int Mobile_No { get; set; }
    }
    public class EmployeeDBContext : DbContext
    {
        public DbSet<Employee> Employees { get; set; }
    }

For more details about Code first approach click below link:

Code First Approach in Entity framework

 

Index View for Curd Operation using jQuery:

 

@model
IEnumerable<CURD_Jquery.Models.Employee>
@{
    ViewBag.Title = "Index";
    Layout = null;
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script>
    $(document).ready(function () {
        var url = "";
        $("#dialog-alert").dialog({
            autoOpen: false,
            resizable: true,
            height: 100,
            width: 350,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
 
                }
            }
        });
        if ('@TempData["msg"]' != "") {
            $("#dialog-alert").dialog('open');
        }
        $("#Emp-edit").dialog({
            title: 'Create Employee',
            autoOpen: false,
            resizable: true,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            }
        });
        $("#Emp-delete").dialog({
            title: 'Delete Employee',
            autoOpen: false,
            resizable: true,
            height: 170,
            width: 350,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: false,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    window.location.href = url;
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#Emp-detail").dialog({
            title: 'View Employee',
            autoOpen: false,
            resizable: true,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#EmpCreate").live("click", function (e) {
            url = $(this).attr('href');
            $("#Emp-edit").dialog('open');
            debugger;
            return false;
        });
        $(".EmpEdit").live("click", function (e) {
            url = $(this).attr('href');
            $(".ui-dialog-title").html("Update Employee");
            $("#Emp-edit").dialog('open');
            return false;
        });
        $(".EmpDelete").live("click", function (e) {
            url = $(this).attr('href');
            $("#Emp-delete").dialog('open');
            return false;
        });
        $(".EmpDetail").live("click", function (e) {
            url = $(this).attr('href');
            $("#Emp-detail").dialog('open');
            return false;
        });
        $("#btncancel").live("click", function (e) {
            $("#Emp-edit").dialog("close");
            return false;
        });
    });
</script>
<div id="dialog-alert" style="display: none">
    <p>
        @TempData["msg"]!
    </p>
</div>
<div id="Emp-delete" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure want to delete?
    </p>
</div>
 
<div id="Emp-edit" style="display: none">
</div>
<div id="Emp-detail" style="display: none">
</div>
<div style="padding-left: 200px">
    <h2>Employee Index</h2>
    <p>
        @Html.ActionLink("Create New", "Create", null, new { id = "EmpCreate" })
    </p>
    <table cellspacing=" 12">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FullName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Town)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Mobile_No)
            </th>
            <th>Actions
            </th>
 
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem=> item.FullName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Town)
                </td>
                <td>
                    @Html.DisplayFor(modelItem=> item.Mobile_No)
                </td>
                <td>
  @Html.ActionLink("Edit", "Edit", new { id = item.EmpID }, new { @class = "EmpEdit" }) |
  @Html.ActionLink("Details", "Details", new { id = item.EmpID }, new { @class = "EmpDetail" }) |
  @Html.ActionLink("Delete", "Delete", new { id = item.EmpID }, new { @class = "EmpDelete" })
                </td>
            </tr>
        }
    </table>
</div>
<style>
    table tr:nth-child(even) {
        background-color: #eee;
    }
    table tr:nth-child(odd) {
        background-color: #fff;
    }
    table th {
        background-color: #ef3e0d;
        color: white;
    }
    table {
        border: 1px solid black;
        width: 60%;
        height: 30%;
    }
</style>

 

Output:



 Create View :


 
@model CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Create";
}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Employee</legend>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.FullName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FullName)
            @Html.ValidationMessageFor(model => model.FullName)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Town)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Town)
            @Html.ValidationMessageFor(model => model.Town)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Mobile_No)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Mobile_No)
            @Html.ValidationMessageFor(model => model.Mobile_No)
        </div>
 
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
 
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
 


Output:







Edit  View:



@model
CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Edit";
}
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Employee</legend>
 
        @Html.HiddenFor(model => model.EmpID)
 
        <div class="editor-label">
            @Html.LabelFor(model => model.FullName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FullName)
            @Html.ValidationMessageFor(model => model.FullName)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Town)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Town)
            @Html.ValidationMessageFor(model => model.Town)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Mobile_No)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Mobile_No)
            @Html.ValidationMessageFor(model => model.Mobile_No)
        </div>
 
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
 
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


Output:




Detail  View :


@model
CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Details";
}
<fieldset>
    <legend>Employee</legend>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.FullName)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.FullName)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Email)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Email)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Address)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Address)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Town)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Town)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Mobile_No)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Mobile_No)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.EmpID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

 

Output:



Delete  View:


@model CURD_Jquery.Models.Employee
 
@{
    ViewBag.Title = "Delete";
}
 
<h3>Are you sure you want to delete this?</h3>
<fieldset>
    <legend>Employee</legend>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.FullName)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.FullName)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Email)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Email)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Address)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Address)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Town)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Town)
    </div>
 
    <div class="display-label">
        @Html.DisplayNameFor(model => model.Mobile_No)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Mobile_No)
    </div>
</fieldset>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <p>
        <input type="submit" value="Delete" />
        |
        @Html.ActionLink("Back to List", "Index")
    </p>
}

Output:




Controller for Curd Operation using jQuery:

using System.Data;
using System.Linq;
using System.Web.Mvc;
using CURD_Jquery.Models;
namespace CURD_Jquery.Controllers
{
    public class EmployeeController : Controller
    {
        private EmployeeDBContext db = new EmployeeDBContext();
        // GET: /Employee/
        public ActionResult Index()
        {
            return View(db.Employees.ToList());
        }
        // GET: /Employee/Details/5
        public ActionResult Details(int id = 0)
        {
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return HttpNotFound();
            }
            return View(employee);
        }
        // GET: /Employee/Create
        public ActionResult Create()
        {
            return View();
        }
        // POST: /Employee/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Employee employee, string Command)
        {
            if (ModelState.IsValid)
            {
                db.Employees.Add(employee);
                db.SaveChanges();
                TempData["Msg"] = "Employee has been saved succeessfully";
                return RedirectToAction("Index");
            }
            return View(employee);
        }
        // GET: /Employee/Edit/5
        public ActionResult Edit(int id = 0)
        {
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return HttpNotFound();
            }
            return View(employee);
        }
        // POST: /Employee/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(Employee employee)
        {
            if (ModelState.IsValid)
            {
                db.Entry(employee).State = EntityState.Modified;
                db.SaveChanges();
                TempData["Msg"] = "Employee has been updated succeessfully";
                return RedirectToAction("Index");
            }
            return View(employee);
        }
        // GET: /Employee/Delete/5
        public ActionResult Delete(int id = 0)
        {
            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();
            TempData["Msg"] = "Employee has been deleted succeessfully";
            return RedirectToAction("Index");
        }
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

 

 


 

  1. This is the easiest tutorial I've ever seen . but in my case  $("#dialog-alert").dialog is not working so that the dialog  is not showing  . i'm using  jquery1.10.2.js . yaa data is storing but no dialog even the java script code is not executing . can you describe this problem . Thanks in advance

Leave Comment