Save (Insert) data to database when TextBox looses focus using jQuery AJAX in ASP.Net

Please refer this code. I have used jQuery Ajax WebMethod to insert the data.

Database

I have made use of the following table Names with the schema as follows.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<form id="form1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //Loop through all Labels with class 'editable'.
        $(".editable").each(function () {
            //Reference the Label.
            var label = $(this);

            //Add a TextBox next to the Label.
            label.after("<input type = 'text' style = 'display:none' />");

            //Reference the TextBox.
            var textbox = $(this).next();

            //Set the name attribute of the TextBox.
            textbox[0].name = $(this).attr("id").replace("lbl", "txt");

            //Assign the value of Label to TextBox.
            textbox.val(label.html());

            //When Label is clicked, hide Label and show TextBox.
            label.click(function () {
                $(this).hide();
                $(this).next().show();
            });

            //When focus is lost from TextBox, hide TextBox and show Label.
            textbox.focusout(function () {
                $.ajax({
                    type: "POST",
                    url: '<%= ResolveUrl("Default.aspx/InsertData") %>',
                    data: '{name: "' + $(this).val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {                            
                        textbox.hide();
                        textbox.prev().html(textbox.val());
                        textbox.prev().show();
                    }
                });
            });
        });
    });
</script>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Name:&nbsp;
        </td>
        <td>
            <asp:Label ID="lblName" runat="server" Text="Mudassar" CssClass="editable" />
        </td>
    </tr>
</table>
</form>

 Namespaces

using System.Data.SqlClient;
using System.Configuration;

C#

[System.Web.Services.WebMethod]
public static void InsertData(string name)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Names(Name) VALUES(@Name)"))
        {
            cmd.Connection = con;
            cmd.Parameters.AddWithValue("@Name", name);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

Screenshot

These are the inserted values