Today let me show you how to send (Pass) multiple parameters to WebMethod in jQuery AJAX POST 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 = "Peter" />
    </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}Password: {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.

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>

HostForLIFE.eu ASP.NET 4.6 Hosting
European best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.