ASP.NET Web Forms jQuery AJAX Pass Multiple Paramaters to Web Method

Question

I am calling a Web Method in the code behind with a Method Signature that has 4+ strings accepted. I am creating a params variable and using it to add all input fields I want to pass to the method.

                var params = {
                    showStartDate: showStartDate,
                    showEndDate: showEndDate,
                    arrivalDate: arrivalDate,
                    pickUpDate: pickUpDate
                };

How do I then pass "params" in my AJAX call? Below is my current code which does not seem to be working. I don't want to have to pass each param explicitly in the data section.

                $.ajax({
                    type: "POST",
                    url: "OrderSummary.aspx/JSONUpdateOrder",
                    async: false,
                    data: "{'" + params + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                    }
                });

Answer 1

You can pass params itself, without the enclosing braces.

var params = 
{
  "showStartDate": showStartDate,
  "showEndDate": showEndDate,
  "arrivalDate": arrivalDate,
  "pickUpDate": pickUpDate
};

$.ajax({
  type: "POST",
  url: "OrderSummary.aspx/JSONUpdateOrder",
  async: false,
  data: params,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {
  }
});

Answer 2

Here is an example from my code:

A link to the JSON functions you see (http://www.json.org/js.html)

var selected = $("#ddPackageContainerType option:selected");    
var DTO =  JSON.stringify({ sContainerType: selected.val(), sLocation: '<%=Location%>' });

                    $.ajax({
                        data: DTO,
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        url:"helpers/packinguiservice.asmx/GetContainerDetail",

                        success: function (data, textStatus) {
                            var oContainerDetail = JSON.parse(data);

                            //Fill In All the data returned
                            $('#txtPackageLength').val(parseFloat(oContainerDetail.Length).toFixed(1));
                            $('#txtPackageWidth').val(parseFloat(oContainerDetail.Width).toFixed(1));
                            $('#txtPackageHeight').val(parseFloat(oContainerDetail.Height).toFixed(1));
                            $('#ddPackageDimensionsUOM').val(oContainerDetail.LengthUOM);
                            $('#txtPackageWeight').val(parseFloat(oContainerDetail.PackageWeight).toFixed(1));

                            hideInfoOverlay(); 
                        },
                        error: function(objXMLHttpRequest, textStatus, errorThrown) {
                            //Show Error
                            hideInfoOverlay();
                            showErrorOverlay(' ' + objXMLHttpRequest.responseText);    
                        }
                    });

And the corresponding WebMethod:

<WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
    Public Function GetContainerDetail(ByVal sContainerType As String, ByVal sLocation As String) As String
        Dim oPackageInfo As New Dictionary(Of String, String)()
        Dim oPackage As Pacejet.Base.Package

        Try
            AppStatic.MyLocation = sLocation

            oPackage = Pacejet.Base.Package.GetPackageByKey(sContainerType)
            If Not oPackage Is Nothing Then
                oPackageInfo.Add("Length", oPackage.Length.Value)
                oPackageInfo.Add("Width", oPackage.Width.Value)
                oPackageInfo.Add("Height", oPackage.Height.Value)
                oPackageInfo.Add("LengthUOM", oPackage.LengthUOM.Value)
                oPackageInfo.Add("PackageWeight", oPackage.StandardWeight.Value)
            End If

        Catch ex As Exception
            Throw New HttpException(System.Net.HttpStatusCode.InternalServerError, ex.Message)
        End Try

        Return New JavaScriptSerializer().Serialize(oPackageInfo)
    End Function

Answer 3

I think all you're missing is serializing your parameters to JSON with JSON.stringify(data).

Some browsers, like FF3+ and IE8, implement JSON.stringify natively. Others need a reference to http://json.org/json2.js (hosted on your own domain of course).

Also, try using removing async:false from the options - maybe it affects nothing but I've never used it.

One final thing: is your web method URL really OrderSummary.aspx/JSONUpdateOrder? Could it be '.asmx' instead of '.aspx'?

Edit: use fiddler to see what response the server returns, if any.

Answer 4

In simple way try this code its working

function ShowAvailability() {
    $.ajax({
        type: "POST",
        url: "CS.aspx/CheckUserName",
        data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '",userName1: "' + $("#<%=TextBox1.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response);
        }
    });
}

Answer 5

$.ajax({

type: "POST",

    url: "CS.aspx/CheckUserName",
    data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '",userName1: "' + $("#<%=TextBox1.ClientID%>")[0].value + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function(response) {
        alert(response);
    }
});