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);
}
}
}
Last updated:9/7/2019 12:16:14 AM
Mahfuzur Rahman