Pass Multi Parameters in jQuery Ajax Script

Question

This is my Default.aspx + jQuery Script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
Inherits="Sample001.Default" %>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
        <asp:Label ID="masterlbl" Text="Master" runat="server" />
                </td>
                <td>
                    <span class="Mastercs">
                <asp:DropDownList ID="ddl1" runat="server">
                <asp:ListItem Text="Item1" Value="Item1" />
                <asp:ListItem Text="Item2" Value="Item2" />
                <asp:ListItem Text="Item3" Value="Item3" />
                <asp:ListItem Text="Item4" Value="Item4" />
                <asp:ListItem Text="Item5" Value="Item5" />
                </asp:DropDownList>
                    </span>
                </td>
                <td>
            <asp:Label ID="slavelbl" Text="Slave" runat="server" />
            </td>
                <td>
                    <span class="slavecs">
                    <asp:DropDownList ID="ddl2" runat="server" />
                    </span>
                </td>
            </tr>
        </table>
    </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('span.Mastercs select').change(function () {
                $.ajax({
                    type: "POST",
                    url: 'MyHandler.ashx',
                    dataType: "text",
                    data: "ItemSelected=" + $('select#ddl1').val(),
                    async: true,
                    success: function (data) { Handler_Success(data); }
                });
            });
            function Handler_Success(data) {
                $('select#ddl2').empty();
                $.each(data, function (i, slaveValue) {
$('select#ddl2').append($('<option></option>')
.val(data.Value).html(data.Text));
                });
            }
        });
    </script>
</body>
</html>

The above code work correctly. But I need to pass one more parameter, and there is a problem. I try This Way and also the following code, but retrieve null value:

$.ajax({
    type: "POST",
    url: 'MyHandler.ashx',
    dataType: "text",
    data: '{"ItemSelected=" ' + $('select#ddl1').val() + ', "ID="' + 
    $('select#ddl1').attr('id') + ' }',
    async: true,
    success: function (data) { Handler_Success(data); }
    });
});

Where is the problem?

Edit:

I also need to use HttpHandler rather WebService or WebMethod

this is my HttpHandler:

public class SlaveValue {
    public string Value { get; set; }
    public string Text { get; set; }
    }

public class SlaveValueHandler : IHttpHandler {

    public bool IsReusable {
    get { return true; }
    }

        public void ProcessRequest(HttpContext context) {
            string valueSelected = context.Request["ItemSelected"];
            string id = context.Request["ID"];
            List<SlaveValue> slaveValues = new List<SlaveValue>();
            SlaveValue sv;
            sv = new SlaveValue();
            sv.Text = "SV1";
            sv.Value = valueSelected + id + "s1";
            slaveValues.Add(sv);
string responseText = Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues);
context.Response.ContentType = "text/json";
context.Response.Write(responseText);
}
}

And My WebConfig:

<configuration>
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false" />
        <handlers>
            <add name="Slave Handler" verb="*" path="MyHandler.ashx" 
type="Sample001.SlaveValueHandler,Sample001" preCondition="integratedMode" />
        </handlers>
    </system.webServer>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>

</configuration>

Edit:

I Find it here: CodeProject

score 2 · Answer 1 · answered Nov 02 '11 at 08:42

If you are going to pass data in text format, you can probably only have one parameter - after all, how else would .NET know where the first parameter ends and the second one begins?

Instead, try passing the data in JSON format, and setting the data parameter to use JSON format.

$.ajax({
    type: "POST",
    url: 'MyHandler.ashx',
    dataType: "application/json",
    data: '{"ItemSelected":"' + $('select#ddl1').val() + '", "ID":"' + 
    $('select#ddl1').attr('id') + '" }',
    async: true,
    success: function (data) { Handler_Success(data); }
    });
});

This may not work for HTTP handlers like you have, though. Usually you want to do this in a Web Service (.asmx) file, and define a webmethod to do the work.

See Dave Ward's site, http://www.encosia.com, for more details. This post is a reasonable summary.

GregL, thank you, is there any way to use httphandler, I think to use HiddenField for store second parameter and use own code with 1 parameter. — Saeid, Nov 02 '11 at 09:20
I think if you have to use a HttpHandler, you might need a different way of submitting the form via AJAX. Might need to google that. The code I have is if you are calling a WebService or WebMethod. — GregL, Nov 02 '11 at 09:24

Rohan · Accepted Answer · 2011-11-02T09:31:16.113

1

There is another way - using json2.js

var postdata = new Object();
postdata.parameter1 = <value>;
postdata.parameter2 = <value>; 

$.ajax({ 
type: "POST", 
url: 'MyHandler.ashx', 
dataType: "application/json", 
data: JSON.stringify(postdata), 
async: true, 
success: function (data) { Handler_Success(data); } 
}); 
});

You are saved from formatting your JSON string everytime you add a new parameter. Make sure to read the it with the same name on the server side, else this wont work.

JSON 2 is available here: https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Mark as answer if this worked for you

edited Nov 02 '11 at 09:31

answered Nov 02 '11 at 09:02

Rohan

1,705
7
17
38

How can I retrieve parameter in Handler method, I used this: string valueSelected = context.Request["ItemSelected"]; what about now? – Saeid Nov 02 '11 at 09:51
string parameter1 = context.Request["parameter1"]; //from JSON string.. both names should be same. if still it did not work, let me know – Rohan Nov 02 '11 at 10:59
These links can help you: http://www.codeproject.com/Articles/203621/Call-HTTPhandler-from-jQuery-Pass-data-and-retriev and http://www.codeproject.com/Articles/203621/Call-HTTPhandler-from-jQuery-Pass-data-and-retriev – Rohan Nov 02 '11 at 11:01

Pass Multi Parameters in jQuery Ajax Script

2 Answers2

Linked