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

Introduction

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.

HTML Code

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

                        // here call server side function for save data using jquery ajax
                        $.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
                                    $('#<%=txtContactName.ClientID%>').val('');
                                    $('#<%=txtContactNo.ClientID%>').val('');
                                }
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(thrownError);
                            }
                        }).done(function () {
                            // here hide loading panel as function complete
                            $('#loadingPanel').hide();
                        });
                    });
                });
            </script>

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.

            [WebMethod]
            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())
                {
                    dc.ContactInfoes.Add(c);
                    dc.SaveChanges();
                    status = "success";
                }

                return status;
            }

Step-8: Run Application

Download Application Live Demo

Related Post :