Question

我有一个遗留系统，我希望改善用户体验。在其中一个表格中有2个下拉列表框;一个ddl级联到下一个级联的变化。在当前表单中，这是通过selectedindexchanged事件实现的，其中可以重新填充其他ddl。虽然这样可行，但为了触发事件，控件必须设置autopostback = true属性。此回发会创建糟糕的用户体验。所以简单的解决方案是将ddls放入更新面板控件中。但是，这样做会导致禁用我的JQuery Cluetip控件的奇怪效果。我不知道为什么会这样。在这种情况下，我终于完成了使用JQuery和/或AJAX填充控件的时间。所以我在测试应用程序中尝试了以下解决方案。但是，当我单击提交按钮时，我对子类别ddl所做的更改不会在我的按钮（服务器端控件）的代码隐藏事件中被选中。原因似乎是客户端更新发生在最后一次回发之后，因此在服务器上控件仍然具有先前的值。如何在服务器端获取新值，还是应该尝试其他方法？我正在使用服务器控制按钮，因为这是原始遗留代码的作用，将所有内容更改为客户端将是一项重要工作。

网页;

<%@ 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" DataSourceID="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>

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']));
                });
            });
        }
    });
});

Answer 1

ASP.NET无法真正被告知在回发之间提交对控件的任何更改，除非它们以预期的方式执行（例如编辑文本框）。在服务器事件之外任意更改DropDownList的选项是一种不可跟踪的更改（至少在任何合理的意义上）。幸运的是，像以前一样使用UpdatePanel是一种可行的方法，并且纠正您使用工具提示描述的问题实际上非常简单。

要解决在UpdatePanel回发后没有出现jQuery Cluetips的问题，您需要在部分刷新之后重新初始化插件，因为它不再注册到DOM中存在的元素（因为您的部分刷新替换了那些元件）。您可以通过将插件初始化程序包装在名为pageLoad()的javascript方法中来实现此目的：

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

在每次完整和部分页面加载后，ASP.NET将自动调用任何名为pageLoad()的javascript方法。使用此技术，您可以在从UpdatePanel的回发中重新填充DropDownLists后恢复jQuery Cluetips。有关详细信息，请查看ASP.NET AJAX Client Life-Cycle Events上的这篇优秀文章。

ASP.NET，JQUERY：如何在上一次回发后获取客户端上填充的值？

1 个答案: