In this article I am going to explain how can we achieve
simple crud operation (create, read, update and delete) using Jquery and Http
handler in asp.net without using asp.net heavy controls on web page.
This article will demonstrate step-by-step, how to create a
basic application of CRUD (Create, Read, Update, Delete) Operations using HttpHandler
in ASP.Net and JQuery Ajax API. We will also see how can we use jquery.ui
modal dialog and datepicker and for database we will use entity
framework code first approach that will automatically generate database and
required tables according to our DbContext class.
Let’s follow the steps in order to create an application:
1) Open
Microsoft Visual Studio
2) Select
New Project
3) Select
Web from the Installed Templates
4) Select
ASP.NET Empty Web Application
5) Enter
the project name CRUDOperationUsingASHX in the Name textbox
6) Click
OK.
7)
Add a web form in an application (EmployeeForm.aspx)
8) Now
add some required libraries through Package Manager Console.
a) Go
to Tools
b) Select
Library Package Manager
c) Select
Package Manager Console
To Install JQuery type the following command:
install-package jquery
To install jquery.ui type the flowing command:
Install-package jquery.ui.combined
To install entity framework type the following
command:
Install-package entityframework
To install Json package type the following command:
Install-package Newtonsoft.Json
9)
Add a generic hander in a project (EmployeeDetails.ashx)
10)
Add a class JsonResponse in a project:
namespace
CRUDOperationUsingASHX
{
public class JsonResponse
{
public bool
IsSuccess { get; set; }
public string
Message { get; set; }
public object Data
{ get; set; }
public string
CallBack { get; set; }
}
}
11)
Add another class Employee in a project:
using
System;
namespace
CRUDOperationUsingASHX
{
public class Employee
{
public int Id {
get; set; }
public string
FirstName { get; set; }
public string
LastName { get; set; }
public DateTime Dob
{ get; set; }
public string
Country { get; set; }
public string
Address { get; set; }
}
}
12)
Add one more class in a project EmployeeDbContext:
using
System.Data.Entity;
namespace
CRUDOperationUsingASHX
{
public class EmployeeDbContext: DbContext
{
public DbSet<Employee>
Employees { get; set; }
}
}
13)
You also have to configure your web.config file for the implementation
of this project. Add the connectionStrings element under configuration
tag:
<connectionStrings>
<add name="EmployeeDbContext" connectionString="Data
Source=.\SQLEXPRESS;Initial Catalog=EmployeeDb;Integrated Security=true;" providerName="System.Data.SqlClient" />
</connectionStrings>
14)
Add a java script file for an application (app.js)
After adding above libraries and project files the solution
explorer should something like below:
Now we will cover coding part in our application.
15)
Enter the html and css in EmployeeForm.aspx page given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmployeeForm.aspx.cs" Inherits="CRUDOperationUsingASHX.EmployeeForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/jquery-ui-1.10.3.js"></script>
<script src="Scripts/app.js"></script>
<style type="text/css">
body
{
font-family: Georgia, Verdana;
font-size: .9em;
}
#div-employee-form div {
padding-bottom:10px;
}
#div-employee-form div span{
display:inline-block;
width:130px;
}
.grid {
margin-top:10px;
border: 1px solid black;
display:table;
}
.grid .header {
display:table-row;
border: 1px solid black;
}
.grid .header span {
font-weight:bold;
display:table-cell;
padding:10px;
border-bottom:1px solid black;
border-right:1px solid black;
}
.grid .content {
display:table-cell;
padding:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" class="openDialog" title="New
Employee Form">Create New</a>
</div>
<div id="div-employee-list" class="grid">
</div>
<div id="div-employee-form" style="display: none;">
<div>
<span>First
Name:</span>
<input type="text" id="txtFirstName" />
</div>
<div>
<span>Last
Name:</span>
<input type="text" id="txtLastName" />
</div>
<div>
<span>Date
of Birth:</span>
<input type="text" id="txtDob" />
</div>
<div>
<span>Country:</span>
<select id="cmbCountry">
<option value="">Select
Country</option>
<option value="India">India</option>
<option value="Newzeland">Newzeland</option>
</select>
</div>
<div>
<span style="vertical-align:top;">Address:</span>
<textarea cols="20" rows="2" id="txtAddress"></textarea>
</div>
</div>
<div id="div-confirm-dialog" style="display:none">
<span>Are
you sure want to delete this record?</span>
</div>
</form>
</body>
</html>
16)
EmployeeDetails.ashx contains the following code to insert, update,
delete the data into the database and read the data from the database:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
Newtonsoft.Json;
namespace
CRUDOperationUsingASHX
{
public class EmployeeDetails : IHttpHandler
{
string
methodname = string.Empty;
string
callbackmethodname = string.Empty;
string
parameter = string.Empty;
EmployeeDbContext
dbEmployee = new EmployeeDbContext();
public void
ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
methodname
= context.Request.Params["method"];
parameter
= context.Request.Params["param"];
callbackmethodname = context.Request.Params["callbackmethod"];
switch
(methodname.ToLower())
{
case "getemployees":
context.Response.Write(GetEmployees());
break;
case "getbyid":
context.Response.Write(GetById(int.Parse(context.Request.Params["Id"])));
break;
case "insert":
context.Response.Write(Insert(context));
break;
case "update":
context.Response.Write(Update(context));
break;
case "delete":
context.Response.Write(Delete(int.Parse(context.Request.Params["Id"])));
break;
}
}
public string
Insert(HttpContext context)
{
JsonResponse
response = new JsonResponse();
try
{
Employee emp
= new Employee
{
FirstName = context.Request.Params["FirstName"],
LastName = context.Request.Params["LastName"],
Dob = Convert.ToDateTime(context.Request.Params["Dob"]),
Country = context.Request.Params["Country"],
Address = context.Request.Params["Address"]
};
dbEmployee.Employees.Add(emp);
dbEmployee.SaveChanges();
response.IsSuccess = true;
response.Data = emp;
response.Message = "Employee inserted successfully!";
response.CallBack = callbackmethodname;
}
catch (Exception ex)
{
response.IsSuccess = false;
response.Message = ex.Message;
}
return JsonConvert.SerializeObject(response);
}
public string
Update(HttpContext context)
{
JsonResponse
response = new JsonResponse();
try
{
int id =
int.Parse(context.Request.Params["Id"]);
Employee emp
= dbEmployee.Employees.FirstOrDefault(m => m.Id == id);
emp.FirstName = context.Request.Params["FirstName"];
emp.LastName = context.Request.Params["LastName"];
emp.Dob = Convert.ToDateTime(context.Request.Params["Dob"]);
emp.Country
= context.Request.Params["Country"];
emp.Address = context.Request.Params["Address"];
dbEmployee.SaveChanges();
response.IsSuccess = true;
response.Data = emp;
response.Message = "Employee updated successfully!";
response.CallBack = callbackmethodname;
}
catch (Exception ex)
{
response.IsSuccess = false;
response.Message = ex.Message;
}
return JsonConvert.SerializeObject(response);
}
public string
Delete(int id)
{
JsonResponse
response = new JsonResponse();
try
{
Employee emp
= dbEmployee.Employees.FirstOrDefault(m => m.Id == id);
if (emp
!= null)
{
dbEmployee.Employees.Remove(emp);
dbEmployee.SaveChanges();
response.IsSuccess
= true;
response.CallBack = callbackmethodname;
response.Data = "Employee Deleted successfully!";
response.Message = "Employee Deleted successfully!";
}
else
{
response.IsSuccess = false;
response.Message = "Employee not exist!";
}
}
catch (Exception ex)
{
response.IsSuccess = false;
response.Message = ex.Message;
}
return JsonConvert.SerializeObject(response);
}
public string
GetEmployees()
{
JsonResponse
response = new JsonResponse();
try
{
IEnumerable<Employee>
employees = dbEmployee.Employees.ToList();
response.IsSuccess = true;
response.CallBack = callbackmethodname;
response.Data = employees;
}
catch (Exception ex)
{
response.Message = ex.Message;
response.IsSuccess = false;
}
return JsonConvert.SerializeObject(response);
}
public string
GetById(int id)
{
JsonResponse
response = new JsonResponse();
try
{
Employee emp
= dbEmployee.Employees.FirstOrDefault(m => m.Id == id);
response.IsSuccess = true;
response.CallBack
= callbackmethodname;
response.Data = emp;
}
catch (Exception ex)
{
response.IsSuccess = false;
response.Message = ex.Message;
}
return JsonConvert.SerializeObject(response);
}
public bool
IsReusable
{
get
{
return false;
}
}
}
}
17)
Client side script file (app.js) contains the following code in
order to open modal dialog, creating datepicker, making ajax request and
updating the ui (User Interface) dynamically by using jquery.
var
employeeId = 0;
$(function () {
$.ajaxSetup({
cache: false });
$("a").button();
$("#txtDob").datepicker();
$(document).on('click', '.openDialog', function
(event) {
event.preventDefault(); //use this or return false
var
$title = $(this).attr("title");
var data
= $(this).attr("data-val");
$("#div-employee-form").dialog({
title:
$title,
autoOpen: false,
resizable:
false,
height:
340,
width:
380,
show: {
effect: 'drop', direction: "up" },
modal: true,
draggable:
true,
buttons: {
"Save": function () {
saveEmployee();
},
"Cancel": function () {
$(this).dialog('close');
}
},
open: function (ev,
ui) {
if
(data) {
employeeId = data;
getEmployeeById(employeeId);
}
},
close: function (ev,
ui) {
}
});
$("#div-employee-form").dialog('open');
return false;
});
$(document).on("click", ".confirmDialog", function
(event) {
event.preventDefault();
var data
= $(this).attr("data-val");
$("#div-confirm-dialog").dialog({
title: 'Delete
Employee',
autoOpen: false,
resizable:
false,
height:
170,
width:
300,
show: {
effect: 'drop', direction: "up" },
modal: true,
draggable:
true,
buttons: {
"Done": function () {
employeeId = data;
deleteEmployee(employeeId);
},
"Cancel": function () {
$(this).dialog('close');
}
},
});
$("#div-confirm-dialog").dialog('open');
return false;
});
getEmployeeList();
});
function
makeAjaxCall(parameter) {
$.ajax({
type: 'POST',
url: "EmployeeDetails.ashx",
data:
parameter,
dataType: 'json',
success: function
(response) {
if
(response.IsSuccess) {
eval(response.CallBack + '(response.Data, response.Message)');
}
else {
}
},
error: function () {
}
})
}
function
getEmployeeList() {
makeAjaxCall({
method: "getemployees", callbackmethod: "getEmployeeListOnSuccess" })
}
function
getEmployeeListOnSuccess(data) {
var html
= "<div class='header'><span>First
Name</span><span>Last
Name</span><span>DOB</span><span>Country</span><span>Address</span></div>";
$.each(data, function (i,
val) {
html +=
createRow(val);
});
$("#div-employee-list").html(html);
}
function
getEmployeeById(id) {
makeAjaxCall({
method: "getbyid", callbackmethod: "editEmployeeSuccess", Id:
id });
}
function
insertEmployeeSuccess(data, message) {
alert(message);
$("#div-employee-form").dialog('close');
$("#div-employee-list").append(createRow(data));
}
function
editEmployeeSuccess(data) {
setValues(data);
}
function
updateEmployeeSuccess(data, message) {
var
divToUpdate = $(".grid div[id=" +
employeeId + "]");
var
rowHtml = createRow(data);
var
newDiv = $(rowHtml).filter("div[id=" +
employeeId + "]");
$(divToUpdate).html($(newDiv).html());
alert(message);
employeeId = 0;
$("#div-employee-form").dialog('close');
}
function
deleteEmployeeSuccess(message) {
var
divToUpdate = $(".grid div[id=" +
employeeId + "]");
$(divToUpdate).remove();
alert(message);
employeeId = 0;
$("#div-confirm-dialog").dialog('close');
}
function
saveEmployee() {
var
firstNameValue = $("#txtFirstName").val();
var
lastNameValue = $("#txtLastName").val();
var
dobValue = $("#txtDob").val();
var
countryValue = $("#cmbCountry").val();
var
addressValue = $("#txtAddress").val();
if
(employeeId == 0)
makeAjaxCall({
method: "insert", callbackmethod: "insertEmployeeSuccess",
FirstName: firstNameValue, LastName: lastNameValue, Dob: dobValue, Country:
countryValue, Address: addressValue });
else
makeAjaxCall({
method: "update", callbackmethod: "updateEmployeeSuccess", Id:
employeeId, FirstName: firstNameValue, LastName: lastNameValue, Dob: dobValue,
Country: countryValue, Address: addressValue });
}
function
deleteEmployee(id) {
makeAjaxCall({
method: "delete", callbackmethod: "deleteEmployeeSuccess", Id:
id });
}
function
createRow(objEmployee) {
var
htmlRow = "";
var
dateValue = new Date(objEmployee.Dob);
var
dateValueAfterFormat = dateValue.getFullYear() + "-" +
(dateValue.getMonth() + 1) + "-" +
dateValue.getDate();
htmlRow += "<div
style='display:table-row' id=\"" + objEmployee.Id + "\">";
htmlRow += "<span
class='content'>" + objEmployee.FirstName + "</span>";
htmlRow += "<span
class='content'>" + objEmployee.LastName + "</span>";
htmlRow += "<span
class='content'>" + dateValueAfterFormat + "</span>";
htmlRow += "<span
class='content'>" + objEmployee.Country + "</span>";
htmlRow += "<span
class='content'>" + objEmployee.Address + "</span>";
htmlRow += "<a
class='content openDialog' href='#' data-val=\"" +
objEmployee.Id + "\">Edit</a>";
htmlRow += "<a
class='content confirmDialog' href='#' data-val=\"" +
objEmployee.Id + "\">Delete</a>";
htmlRow += "</div>";
return
htmlRow;
}
function
setValues(objEmployee) {
$("#txtFirstName").val(objEmployee.FirstName);
$("#txtLastName").val(objEmployee.LastName);
//12/03/2013
var
dateValue = new Date(objEmployee.Dob);
var
dateValueAfterFormat = (dateValue.getMonth() + 1) + "/" +
dateValue.getDate() + "/" +
dateValue.getFullYear();
$("#txtDob").val(dateValueAfterFormat);
$("#cmbCountry").val(objEmployee.Country);
$("#txtAddress").val(objEmployee.Address);
}
After the doing and understanding the above major stuff,
let’s build and run an application, the ouput should be something like below
figure:
In order to add or create a new employee, click on Create
New button, it will show you a employee entry form in modal dialog.
You can fill the necessary details of employees provided in
the form and save it into the database by using Save button.
After adding or updating the data will be reflected in the
grid format in main application form i.e. EmployeeForm.aspx
You can also delete the employee record by using delete
hyperlink in the employee record in the grid.
In the same way you can also edit the employee information.
Thanks for reading this article. I think this will help you
a lot.
Please provide you valuable comments and suggestions.
