How to insert data into sql server databse using jquery (post method) in asp.net


In this post, I am explain How to insert data into sql server databse using jquery (post method) in asp.net
Here I have explain how to Insert Data Into SQL Server databse Using jQuery (post method) in ASP.Net with out creating web service.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for Save data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one tables as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a webpage and design for save data to sql server database.

            <h3>Insert Data Into SQL Server Using jQuery (post method) in ASP.Net</h3>
                        <td>Contact Name : </td>
                        <td><asp:TextBox ID="txtContactName" runat="server" Width="200px" /></td>
                        <td>Contact No: </td>
                        <td><asp:TextBox ID="txtContactNo" runat="server" Width="200px" /></td>
                            <input type="button" value="Submit" id="btnSave" />
                            <div id="loadingPanel" style="color:green; font-weight:bold;display:none;">Data Saving...</div>

Step-6: Add Jquery code for call server side function for save data to the sql server database.

Write this below jquery code inside page <head></head> section.
Jquery Code
            <script src="Scripts/jquery-1.7.1.js"></script>
                $(document).ready(function () {
                    $('#btnSave').click(function () {
                        var contactName = $('#<%=txtContactName.ClientID%>').val();
                        var contactNo = $('#<%=txtContactNo.ClientID%>').val();
                        if (contactName.trim() == "" || contactNo.trim() == "") {
                              alert("All the fields are required!");
                              return false;

                        // here call server side function for save data using jquery ajax
                            url: "ContactInfo.aspx/SaveData",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify({
                                "contactName": contactName,
                                "contactNo" : contactNo
                            success: function (data) {
                                if (data.d == "success") {
                                    alert("Data saved successfully");
                                    // clear text here after save complete
                            error: function (xhr, ajaxOptions, thrownError) {
                        }).done(function () {
                            // here hide loading panel as function complete

Step-7: Write server side code (function) for save data to the sql server database.

Before writing code add this namespace to your code behide page.

            using System.Web.Services;
Here is the function, which is called by jquery code.
            public static string SaveData(string contactName, string contactNo)
                string status = "";
                // apply validation here
                ContactInfo c = new ContactInfo { ID=0, ContactName = contactName, ContactNo = contactNo };

                // here MyDatabaseEntities  is our dbContext
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                    status = "success";

                return status;

Step-8: Run Application

Download Application     Live Demo

Related Post :

  1. How to Fetch & Show Sql Server database data in ASP.NET Page Using Ajax (Jquery).
  2. How to Fetch and Show Data from XML file using Jquery.
  3. How to bind dropdownList in ASP.NET Using Jquery and Get Value from Code behind.
  4. How to Create Simple Image Gallery using repeater control & Jquery in ASP.NET
  5. How to crop image and save the cropped image using asp.net & jquery

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.