Introduction

In this blog, we will learn how to insert and retrieve data using jQuery Ajax in asp.net. We will create a web service and consume that web service in our project with the help of jQuery Ajax.

Step 1

Create a database in the SQL server of your choice.

1. CREATE TABLE [dbo].[tblEmployees](  
2.     [ID] [int] IDENTITY(1,1) NOT NULL,  
3.     [Name] nvarchar NULL,  
4.     [Gender] char NULL,  
5.     [Phone] nvarchar NULL,  
6.     [Email] nvarchar NULL,  
7.     [Age] [int] NULL,  
8.     [Salary] nvarchar NULL,  
9.  CONSTRAINT [PK_tblEmployees] PRIMARY KEY CLUSTERED   
10. (  
11.     [ID] ASC  
12. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
13. ) ON [PRIMARY]  
14.   
15. GO  
16.   
17. CREATE procedure [dbo].[spAddNewEmployee]  
18. (  
19. @Name nvarchar(50),  
20. @Gender char(10),  
21. @Phone nvarchar(50),  
22. @Email nvarchar(50),  
23. @Age int,  
24. @Salary nvarchar(50)  
25. )  
26. as  
27. begin  
28. insert into tblEmployees(Name,Gender,Phone,Email,Age,Salary)  
29. values(@Name,@Gender,@Phone,@Email,@Age,@Salary)  
30. end  
31.   
32. CREATE procedure [dbo].[spGetEmployees]  
33. as  
34. begin  
35. select ID,Name,Gender,Phone,Email,Age, Salary from tblEmployees  
36. end  

Step 2

Add code in the webconfig file:

1.   
2.     <add name=“DBCS” connectionString=“data source=FARHAN\SQLEXPRESS; database=JQueryDB; integrated security=SSPI;” providerName=“System.Data.SqlClient”/>  
3.     
4. <system.web>  
5.       
6.         
7.         <add name=“HttpGet”/>  
8.         
9.       
10.   </system.web>  

Step 3

Create class – right click on new item, choose class, give the name employee.cs:

1. public class Employee  
2.     {  
3.         public int ID { get; set; }  
4.         public string Name { get; set; }  
5.         public string Gender { get; set;}  
6.         public string Phone { get; set; }  
7.         public string Email { get; set; }  
8.         public int Age { get; set; }  
9.         public string Salary { get; set; }  
10.     }  

#ajax #asp.net #retrieve data