How to save Data using Ajax and jquery in asp.net

This article will demonstrate how to save record using ajax and jquery in asp.net.
Step 1- Create a new empty website.
Step 2- Add a new web form .
Step 3- Write down the following code to your web form.

<form id="form1" runat="server">
     <div>
        <table>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <input type="text" id="txtName" />
                </td>
            </tr>
            <tr>
                <td>
                    Position
                </td>
                <td>
                    <input type="text" id="txtPosition" />
                </td>
            </tr>
            <tr>
                <td>
                    Age
                </td>
                <td>
                    <input type="text" id="txtAge" />
                </td>
            </tr>
            <tr>
                <td>
                    Salary
                </td>
                <td>
                    <input type="text" id="txtSalary" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" onclick="SaveData();" value="Save" />
                </td>
            </tr>
        </table>
    </div>
    </form>

Step 4- Write down the following JS Code .

function SaveData() {
            var errMsg = '';
            var name = $('#txtName').val().trim();
            var position = $('#txtPosition').val().trim();
            var age = parseInt($('#txtAge').val().trim());
            var salary = parseInt($('#txtSalary').val().trim());
            $.ajax({
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                url: 'Index.aspx/SaveData',
                data: "{ 'Name':' " + name + "', 'Position':' " + position + "', 'Age':' " + age + "', 'Salary':' " + salary + "' }",
                success: function (data) {
                    alert(data.d);
                    clearAll();
                },
                error: function (data) {
                    alert(data.d);
                }
            });
        }
        function clearAll() {
            $('#txtName').val('');
            $('#txtPosition').val('');
            $('#txtAge').val('');
            $('#txtSalary').val('');
        }

Step 5- As Ajax is caliing SaveData WebMethod . so write down the webmethod in code behind (Index.aspx.cs)

 [WebMethod]
    public static string SaveData(string Name, string Position, int Age, int Salary)
    {
        string str = ConfigurationManager.ConnectionStrings["connect"].ConnectionString;
        string msg = "";
        try
        {
            SqlConnection con = new SqlConnection(str);
            con.Open();
            SqlCommand cmd = new SqlCommand("insert into Employee values (@1,@2,@3,@4)", con);
            cmd.Parameters.Add("@1", Name);
            cmd.Parameters.Add("@2", Position);
            cmd.Parameters.Add("@3", Age);
            cmd.Parameters.Add("@4", Salary);
            cmd.ExecuteNonQuery();
            con.Close();
            msg = "Record Inserted";
        }
        catch (Exception ex)
        {
            msg = "Record Not Inserted" + ex.Message;
        }

        return msg;
    }

Note: Download above code Download