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 database Using jQuery (post method) in ASP.Net with out creating web service.

Last 5 inserted record.
IDContact NameContact No
90740ram786876756756
90739asdadasdsad
90738sadsadsasadada
90737hello8989898989
90736234234324324

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ContactInfo.aspx.cs" Inherits="ASPJquerySaveData.ContactInfo1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <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>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <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;">Please wait! Data Saving...</div>
                </td>
            </tr>
        </table>
    </div>
</asp:Content>




Posted By : Sourav Mondal