In this article I will explain with an example, how to send (pass) parameters to Web Method in jQuery AJAX POST call in ASP.Net.
Generally people face issues with jQuery AJAX POST call to WebMethod when multiple parameters have to be passed, due to syntax errors the WebMethod does not get called.
Hence I have come up in an innovative way where using JSON object and JSON2 Stringify method one can easily post any number and any type of parameters to WebMethod using jQuery AJAX.
 
 
HTML Markup
The HTML Markup consists of a sample form with TextBoxes for accepting Name and Age and a Button to post the values to server’s WebMethod using jQuery AJAX.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        Name:
    </td>
    <td>
        <asp:TextBox ID="txtName" runat="server" Text = "Mudassar" />
    </td>
</tr>
<tr>
    <td>
        Age:
    </td>
    <td>
        <asp:TextBox ID="txtAge" runat="server" Text = "29"/>
    </td>
</tr>
<tr>
    <td>
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
    </td>
</tr>
</table>
 
 
WebMethod accepting multiple parameters
The following WebMethod accepts multiple parameters from client side using the jQuery AJAX.
C#
[System.Web.Services.WebMethod]
public static string SendParameters(string name, int age)
{
    return string.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine);
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function SendParameters(name As String, age As Integer) As String
    Return String.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine)
End Function
 
 
Passing multiple parameters to WebMethod in jQuery AJAX POST in ASP.Net
When the Button is clicked, the Name and Age is fetched from their respective TextBoxes and are assigned to a JSON object in which I have created two properties with the name same as that of the WebMethod parameters.
Note: JavaScript is case sensitive and hence make sure the spelling and the case of the parameter name and the property name are same otherwise the WebMethod will not get called.
The JSON object is now serialized to a JSON string using JSON2 Stringify method and then passed as parameter to the WebMethod.
In this technique there are no syntax errors and also there’s no need to convert values of TextBoxes to integer or some other Data Type.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=btnSubmit]").click(function () {
        var obj = {};
        obj.name = $.trim($("[id*=txtName]").val());
        obj.age = $.trim($("[id*=txtAge]").val());
        $.ajax({
            type: "POST",
            url: "CS.aspx/SendParameters",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert(r.d);
            }
        });
        return false;
    });
});
</script>
 
jQuery AJAX call with parameters example: Send parameters to WebMethod in jQuery AJAX POST call
 
Demo
View Demo
 
 
Downloads

Download Code