Home > DeveloperSection > Articles > CURD Operations in ASP.NET MVC using jQuery dialog with EF

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


ASP.Net ASP.Net  JQuery  ASP.NET MVC  Mvc  Entity Framework  Jquery UI 
Ratings:
2 Comment(s)
 1461  View(s)
Rate this:

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

 

 


 


$("#dialog-alert").dialog Problem

By Mahfuzur Rahman on   7 months ago
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

how to download this project?

By Dipen Patel on   2 months ago
how to download this project?

Don't want to miss updates? Please click the below button!

Follow MindStick