ASP.NET, JQUERY: How do I pick up values populated on the client AFTER the last postback?_问答_开发者

I have a legacy system where I want to improve the user experience. On one of the forms there are 2 drop down listboxes; the change of one ddl cascades to the next. On the current form, this is acheived by selectedindexchanged event from which the other ddl can be repopulated. Although this works, in order for the event to be fired, the control has to have the autopostback=true property set. This postback creates a bad user experience. So the simple solution is to put the ddls into an update panel control. However doing this has the odd knock on effect of disabling my JQuery Cluetip controls. I do not know why this is. In which case it is time I finally got round to populating my controls using JQuery and/or AJAX. So I have tried the following solution below in a test application. However when I click on the submit button, the changes I make to the Sub Categories ddl are not being picked up in the code behind event for my button (a server side control). The reason appears to be that the client side updates happened after the last postback, and so on the server the control still has the previous values. How do I pick up the new values on server side, or should I try something else? I am using a server control button because that is what the orginal legacy code does, and changing everything to client side would be a big job.

The web page;

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/RM.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
    <script type='text/javascript' src='Default.js'></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>Test Categories</h1>
          <table>
        <tr>
        <th class="wid3">Category:</th>
        <td class="wid4"><asp:DropDownList
                 ID="Categories_ddl" runat="server" DataSourceID="odsCategories"
                 DataTextField="Category1" DataValueField="Category_ID"
                 >
           </asp:DropDownList>
           </td>
        <th class="wid3">Sub Category:</th>
       <td class="wid4"><select
                 ID="Sub_Categories_ddl" runat="server" Data开发者_如何学PythonSourceID="odsSub_Categories_4_Category"
                 DataTextField="Sub_Category1" DataValueField="Sub_Category_Id">
           </select></td>
       </tr>
       </table>
       <asp:ObjectDataSource runat="server" ID="odsCategories" 
            TypeName="ClassLibraryRiskManCategories.DAL" SelectMethod="GetCategories" />
       <asp:ObjectDataSource runat="server" ID="odsSub_Categories_4_Category" 
            TypeName="ClassLibraryRiskManCategories.DAL" SelectMethod="GetSubCategories">
            <SelectParameters>
                <asp:ControlParameter ControlID="Categories_ddl" Name="categoryId" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
       </asp:ObjectDataSource> 
       <div style="padding:100px"><asp:Button runat="server" ID="btnTest" Text="Submit" 
               onclick="btnTest_Click" /></div>
    </div>
    </form>
</body>
</html>

The JScript

$(document).ready(function() {
    $("#Categories_ddl").change(function() {
        $("#Sub_Categories_ddl").html("");
        var CategoryId = $("#Categories_ddl > option:selected").attr("value");
        if (CategoryId != 0) {
            $.getJSON('LoadSubCategories.ashx?CategoryId=' + CategoryId, function(Sub_Category1) {
                $.each(Sub_Category1, function() {
                    $("#Sub_Categories_ddl").append($("<option></option>").val(this['Sub_Category_Id'].toString()).html(this['Sub_Category1']));
                });
            });
        }
    });
});

ASP.NET cannot really be told to commit any changes to a control between postbacks unless they are performed in a fashion that it expects (such as editing a textbox). Arbitrarily changing a DropDownList's options outside of a server event is one case of a non-trackable change (at least in any reasonable sense). Fortunately, using an UpdatePanel as you were before is a viable approach and correcting the issue you described with your tooltips is actually quite straightforward.

To address the issue of your jQuery Cluetips not appearing after an UpdatePanel postback, you will need to reinitialize the plugin just after the partial refresh as it is no longer registered to elements existing in the DOM (since your the partial refresh replaced those elements). You can achieve this by wrapping the plugin initializer in a javascript method called pageLoad():

function pageLoad() {
    // do some javascript here
}

Any javascript method called pageLoad() will automatically be called by ASP.NET after every full and partial page load. With this technique you will be able to restore your jQuery Cluetips after you repopulate the DropDownLists from the UpdatePanel's postback. Take a look at this excellent article on the ASP.NET AJAX Client Life-Cycle Events for more information.