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:
To install jquery.ui type the flowing command:
To install entity framework type the following command:
To install Json package type the following command:
9) Add a generic hander in a project (EmployeeDetails.ashx)
10) Add a class JsonResponse in a project:
11) Add another class Employee in a project:
12) Add one more class in a project EmployeeDbContext:
13) You also have to configure your web.config file for the implementation of this project. Add the connectionStrings element under configuration tag:
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:
16) EmployeeDetails.ashx contains the following code to insert, update, delete the data into the database and read the data from the database:
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.
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.