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