setting 2nd listbox items on 1st listbox item change using jquery (ajax)

See more:

ASP.NET

jQuery

ASP.NET4

Hi,

I have written and coded all the function using asp.net ajax in which on categories listbox item change it autopostbacks and show the related subcategories listbox w.r.t category listbox selected item.

I want to do it in jquery.

How i can do it using ajax.

Thanks

Following is the markup :

$('#UpdatePanel1').panelReady(function () {
                           $('#lstcategory').click(function () {
                               //$("input#text1").val($("#lstcategory option:selected").val());
                               //var dataToSend = { MethodName: 'GenerateSubCategories', Category: $("#lstcategory option:selected").val() };
                               var dataToSend = { MethodName: 'GenerateSubCategories', Category: document.getElementById('lstcategory').value };
                               // var id = $.readQS('productId');
                               var options =
                                   {
                                       url: <%=Request.Url %>,
                                       data: dataToSend,
                                       dataType: 'JSON',
                                       type: 'POST',
                                       success: function () { $(this).dialog("close"); }
                                   };
                               $.ajax(options);
                           });
                       });


                   });

asp code :

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                             <contenttemplate>
                             <asp:ListBox ID="lstcategory" ClientIDMode="Static" runat="server" AutoPostBack="True"
                         Font-Bold="True" Font-Names="Arial" Font-Size="10pt" Height="150px" Width="220px"
                                     onselectedindexchanged="lstcategory_SelectedIndexChanged">
                         <asp:ListItem>None

                    <asp:ListBox ID="lstsubcategory" runat="server" ClientIDMode="Static"  AutoPostBack="True"
                         Height="150px" onselectedindexchanged="lstsubcategory_SelectedIndexChanged"
                         style="text-align: left" Visible="False" Width="220px">
                     <asp:Button ID="btngenerate" runat="server" onclick="btngenerate_Click"
                         Text="Generate Form" /></contenttemplate>
                         <triggers>
                         <asp:AsyncPostBackTrigger ControlId="lstcategory" />
                         <asp:AsyncPostBackTrigger ControlID="lstsubcategory" />
                         </triggers>

And c# code behind :

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Form["MethodName"] == "GenerateSubCategories")
        {
            var category = Request.Form["Category"].ToString();
            GenerateSubCategories(category);
        }
        if (Request.Form["MethodName"] == "GenerateForm")
        {
            var subcategory = Request.Form["SubCategory"].ToString();
            GenerateForm(subcategory);
        }

I am getting form method name as hashed code or id get mangled.

Instead if getting "GenerateSubCategories".