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:


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

 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:


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

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


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


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:
CURD Operations in ASP.NET MVC using jQuery dialog with EF

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


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:

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

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:

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

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


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);
        }
    }
}

 

 


 

  Modified On Dec-16-2017 12:00:51 AM
  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