articles

home / developersection / articles / curd operations in asp.net mvc using jquery dialog with ef

Ask Question

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

Anupam Mishra 8662 15-Mar-2016
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);
        }
    }
}

 

 


 

asp.net asp.net  jquery  asp.net mvc  mvc  entity framework  jquery ui 
Updated 07-Sep-2019
Anupam Mishra

Anupam Mishra

Follow

Leave Comment

1 Comments

View All Comments

Comments

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy