Post
Ask Question

Insert Data Into SQL Server Using JQuery in ASP.NET

In this article I provide a quick overview of how to insert a record into SQL Server using jQuery. You can do it in many ways such as using Generic Handlers and using a WCF service. Here you will see it using jQuery with Ajax in ASP.Net. First we create a database table named "TestTable".

Creating SQL Database Table

This database contains one table named test.

  1. CREATE TABLE [dbo].[TestTable]  
  2. (  
  3.       [Name] [varchar](50) NULL,  
  4.       [Email] [varchar](100) NULL  
  5. )  

Now press F5 to execute the script above that looks like this:

TestTable-in-SQLServer.jpg

ASPX Page

Right-click your ASP.NET project then select "Add New Item" -> "New Page" and give it the name "Default.aspx" and add the following control into it:

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET.jpg

Now click on the source tab and add the following code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.     <html xmlns="http://www.w3.org/1999/xhtml">  
  5.   
  6.     <head id="Head1" runat="server">  
  7.         <title>AutoComplete Box with jQuery</title>  
  8.         <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />  
  9.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  10.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
  11.         <script type="text/javascript">  
  12.             $(document).ready(function()
  13.                 {  
  14.                 $('#Button1').click(function()
  15.                    {  
  16.                     $.ajax({  
  17.                         type: 'POST',  
  18.                         contentType: "application/json; charset=utf-8",  
  19.                         url: 'Default.aspx/InsertMethod',  
  20.                         data: "{'Name':'" + document.getElementById('txtUserName').value + "', 'Email':'" + document.getElementById('txtEmail').value + "'}",  
  21.                         async: false,  
  22.                         success: function(response)
  23.                          {  
  24.                             $('#txtUserName').val('');  
  25.                             $('#txtEmail').val('');  
  26.                             alert("Record Has been Saved in Database");  
  27.                         },  
  28.                         error: function() 
  29.                         {  
  30.                             console.log('there is some error');  
  31.                         }  
  32.                     });  
  33.                 });  
  34.             });  
  35.         </script>  
  36.     </head>  
  37.   
  38.     <body>  
  39.         <form id="form1" runat="server">  
  40.             <div class="demo">  
  41.                 <div class="ui-widget">  
  42.                     <label for="tbAuto">  
  43.                         Enter UserName:  
  44.                     </label>  
  45.                        
  46.                     <asp:TextBox ID="txtUserName" runat="server" ClientIDMode="Static" Width="202px"></asp:TextBox>  
  47.                     <br />  
  48.                     <br /> Email:  
  49.                     <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static" Width="210px"></asp:TextBox>  
  50.                     <br />  
  51.                     <br />  
  52.                     <asp:Button ID="Button1" runat="server" Text="Button" ClientIDMode="Static" />  
  53.                 </div>  
  54.             </div>  
  55.         </form>  
  56.     </body>  
  57.   
  58.     </html>  

Now double-click on the default form and add the following .cs file code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data.SqlClient;  
  4. using System.Web.Services;  
  5. using System.Web;  
  6. using System.Data;  
  7.   
  8. public partial class _Default: System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e) {}  
  11.   
  12.     [WebMethod]  
  13.     public static string InsertMethod(string Name, string Email)  
  14.     {  
  15.         SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=TestDB;User ID=sa;Password=Micr0s0ft");  
  16.       {  
  17.             SqlCommand cmd = new SqlCommand("Insert into TestTable values('" + Name + "', '" + Email + "')", con);  
  18.             {  
  19.                 con.Open();  
  20.                 cmd.ExecuteNonQuery();  
  21.                 return "True";  
  22.             }  
  23.         }  
  24.     }  
  25. }  

Now run the application.

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-1.jpg

Now enter the name and email into the corresponding TextBox.

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-2.jpg

Now click on the Button control.

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-3.jpg

Now open the SQL Server database and check it.

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-4.jpg


Similar Articles