Search code examples
c#asp.netjqueryjquery-ui-tabs

jquery ui tab not posting data to asp.net(c#)


The HTML for jqueryUI tabs.

<div id="lodg_tabs" class="tabs">
    <ul>
        <li><a href="#tabs-1">Add/Remove</a></li>
        <li><a href="mand_lodg_upd.aspx">Update</a></li>
    </ul>
    <div id="tabs-1" class="forms">
        <h3 align="center">Mandate Lodgment</h3>
        <form name="mand_lodg" id="mand_lodg" method="post"> 

ajax code to send parameters to the tab loading "mand_lodg_upd.aspx"

$("#lodg_tabs").tabs({
    select: function (event, ui) {
        var res = valid('mand_lodg');
        $(this).tabs("option", { ajaxOptions: { data: $("#mand_lodg").serialize()} });
     },
     ajaxOptions: {
         type: 'POST',
         error: function (xhr, status, index, anchor) {
             $(anchor.hash).html("An error has been encountered while attempting to load this tab.");
         }
     },
     cache: false
});

the c# code behind

Response.Write(Request.Form["zone"] + Request.QueryString["zone"]);
            zone.Value = Request.Form["zone"];
            loc.Value = Request.Form["loc"];
            date.Value = Request.Form["date"];

The output: Output is ok, the file is loading in the tab

The problem : but the parameters passed with ajax i.e

$(this).tabs("option", { ajaxOptions: { data: $("#mand_lodg").serialize()} });

zone location and date are null in c# code behind


Solution

  • Request.Form is referring to HTTP request parameters via the POST method. JQuery by default issues a GET method request. Try setting your AJAX Options like so:

    $(this).tabs("option", { 
        ajaxOptions: { 
                       type: 'post', 
                       data: $("#mand_lodg").serialize()
                     } 
    });