In this article I will explain with an example, how to save Form 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.
I have made use of the following table named Users with the schema as follows.
Save Form Data to Database with jQuery AJAX 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">
        <td><asp:TextBox ID="txtUsername" runat="server" Text=""/></td>
        <td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/></td>
        <td><asp:Button ID="btnSave" Text="Save" runat="server"/></td>
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false">
        <asp:BoundField DataField="Username" HeaderText="Username"/>
        <asp:BoundField DataField="Password" HeaderText="Password"/>
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.
public class User
    public string Username { getset; }
    public string Password { getset; }
Public Class User
    Public Property Username() As String
    Public Property Password() As String
End Class
You will need to import the following namespaces.
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
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.
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();
                gvUsers.DataSource = dt;
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()
                gvUsers.DataSource = dt
            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.
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;
<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
        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=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnSave]").bind("click"function () {
            var user = {};
            user.Username = $("[id*=txtUsername]").val();
            user.Password = $("[id*=txtPassword]").val();
                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.");
            return false;
Save Form Data to Database with jQuery AJAX in ASP.Net