In this article I will explain with an example, how to insert or update data asynchronously (without PostBack) to database using jQuery AJAX and Page Methods (WebMethod) in ASP.Net.
This article will also explain how use an ASP.Net WebMethod to fetch data from the form fields i.e. TextBox, DropDownList, etc. and later insert it into database table.
 
 
Database
I have made use of the following table named Users with the schema as follows.
Insert (Update) Data to Database with jQuery AJAX and WebMethod in ASP.Net
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 

HTML Markup
The following HTML Markup consists of two TextBoxes, a Button control and a GridView control.
The GridView control will be used to display the inserted Usernames and Passwords.
The Button has been assigned jQuery Click event handler.
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Username:</td>
        <td><asp:TextBox ID="txtUsername" runat="server" Text=""/></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/></td>
    </tr>
    <tr>
        <td></td>
        <td><asp:Button ID="btnSave" Text="Save" runat="server"/></td>
    </tr>
</table>
<hr/>
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Username" HeaderText="Username"/>
        <asp:BoundField DataField="Password" HeaderText="Password"/>
    </Columns>
</asp:GridView>
 
 
Class Implementation
The following class consists of two properties i.e. Username and Password.
Note: An object of this class will be used to fetch and hold and transfer the Username and Password values between the Client and the Server.
 
C#
public class User
{
    public string Username { getset; }
    public string Password { getset; }
}
 
VB.Net
Public Class User
    Public Property Username() As String
    Public Property Password() As String
End Class
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
 
 
Binding the GridView
Inside the Page Load event, the ASP.Net GridView is populated with the records from the Users table.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM Users", con))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                gvUsers.DataSource = dt;
                gvUsers.DataBind();
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As New SqlConnection(constr)
            Using sda As New SqlDataAdapter("SELECT * FROM Users", con)
                Dim dt As New DataTable()
                sda.Fill(dt)
                gvUsers.DataSource = dt
                gvUsers.DataBind()
            End Using
        End Using
    End If
End Sub
 
 
Server Side WebMethod
The following WebMethod will be called using jQuery AJAX function on the Client Side.
The User object sent from the Client Side is accepted as parameters and then the values of the Username and Password are inserted into the SQL Server Database table.
C#
[WebMethod]
public static void SaveUser(User user)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Users VALUES(@Username, @Password)"))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@Username", user.Username);
            cmd.Parameters.AddWithValue("@Password", user.Password);
            cmd.Connection = con;
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}
 
VB.Net
<WebMethod()> _
Public Shared Sub SaveUser(user As User)
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand("INSERT INTO Users VALUES(@Username, @Password)")
            cmd.CommandType = CommandType.Text
            cmd.Parameters.AddWithValue("@Username", user.Username)
            cmd.Parameters.AddWithValue("@Password", user.Password)
            cmd.Connection = con
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
End Sub
 
 
jQuery AJAX implementation
When the Save Button is clicked, the values of the Username and Password TextBoxes are wrapped into a JSON object.
Then the JSON object is passed to the Server Side WebMethod using the jQuery AJAX call.
Note: The names of the properties within the class must exactly match with that of the JSON object otherwise the jQuery AJAX will NOT call the WebMethod.
 
Finally, inside the Success event handler, a JavaScript Alert Message Box is displayed and the page is reloaded in order to refresh the GridView.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnSave]").bind("click"function () {
            var user = {};
            user.Username = $("[id*=txtUsername]").val();
            user.Password = $("[id*=txtPassword]").val();
            $.ajax({
                type: "POST",
                url: "Default.aspx/SaveUser",
                data: '{user: ' + JSON.stringify(user) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert("User has been added successfully.");
                    window.location.reload();
                }
            });
            return false;
        });
    });
</script>
 
 
Screenshot
Insert (Update) Data to Database with jQuery AJAX and WebMethod in ASP.Net
 
 
Downloads