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" %>
  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">
  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>
  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>
  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>
  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;
  8. public partial class _Default: System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e) {}
  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