5

我有一个带有以下内容的 ASP.NET UpdatePanel：

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
    <%-- jQuery dialog - Suppliers --%>
    <div id="divSuppliers" style="display: none;">
        <asp:ListBox ID="lstSuppliers" runat="server" SelectionMode="Single" Rows="10" Width="100%"
            DataValueField="SupplierID" DataTextField="SupplierName">
        </asp:ListBox>
        <br /><br />
        <asp:Button ID="btnSelectSupplier" runat="server" Text="Select 2" OnClick="btnSelectSupplier_Click" />
    </div>

    <asp:GridView ID="gvSuppliers" runat="server" AutoGenerateColumns="false" SkinID="gvSkin"
        DataKeyNames="SupplierID" EmptyDataText="No Existing User Roles">
        <Columns>
            <asp:TemplateField HeaderText="Supplier Name">
                <ItemTemplate>
                    <asp:Label ID="lblSupplierName" runat="server" Text='<%# Eval("SupplierName") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    <asp:Button ID="btnAddSupplier" runat="server" Text="Add Supplier" 
        Visible="false" OnClick="btnAddSupplier_Click" />

</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnSelectSupplier" />
</Triggers>
</asp:UpdatePanel>

很简单，真的。只不过是一个用于我的 jQuery 对话框弹出窗口的 div、一个带有单列的 ASP.NET GridView 控件和一个用于异步回发的 ASP.NET 按钮。

这是处理 btnSelectSupplier 的异步回发的 click 事件。

protected void btnSelectSupplier_Click(object sender, EventArgs e) {

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+=    
    // WORKS JUST FINE
    List<SupplierItem> suppliers = new List<SupplierItem>();    

    foreach (int i in lstSuppliers.GetSelectedIndices()) {
        suppliers.Add(
            new SupplierItem { SupplierID = Convert.ToInt32(lstSuppliers.Items[i].Value), SupplierName = lstSuppliers.Items[i].Text });
        lstSuppliers.Items[i].Selected = false;
    }

    gvSuppliers.DataSource = suppliers;
    gvSuppliers.DataBind();

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+=
    // DOES NOT WORK!!
    string jq = "$('#divSuppliers').dialog('close');";

    ScriptManager sm = ScriptManager.GetCurrent(this);
    if (sm != null && sm.IsInAsyncPostBack) {
        ScriptManager.RegisterClientScriptBlock(
            this, typeof(Page), Guid.NewGuid().ToString(),
            jq, true);
    }
}

问题： GridView 将在异步回发期间正常更新（参见上面的点击事件）；但是，jQuery 对话框拒绝关闭（再次，请参阅上面的事件以及它说不工作的地方）。我正在页面上的 ScriptManager 中注册 javascript (jquery)，因此它应该正在执行并关闭对话框，但由于某种原因它没有。

编辑： 打开 jQuery 对话框并使其成为模态的代码。

protected void btnAddSupplier_Click(object sender, EventArgs e) {
    lstSuppliers.ClearSelection();
    lstSuppliers.DataSource = Suppliers.GetAllSuppliers();
    lstSuppliers.DataBind();

    string jq = "var dlg = $('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); dlg.parent().appendTo($('form:first'));";

    ScriptManager sm = ScriptManager.GetCurrent(this);
    if (sm != null && sm.IsInAsyncPostBack) {
        ScriptManager.RegisterClientScriptBlock(
            this, typeof(Page), Guid.NewGuid().ToString(),
            jq, true);
    }
}
4

3 回答 3

2

用于 jQuery UI 对话框的 div 应该在 UpdatePanel 之外。

在btnAddSupplier_Click您创建对话框并将其移到 UpdatePanel 之外。
在btnSelectSupplier_Click您拥有 2 个具有 divSuppliers id 的 div 之后，移动的一个和从服务器接收的一个（UpdatePanel 机制允许通过使用从服务器返回的 html 重建整个 UpdatePanel DOM 来进行部分页面更新）。

我还建议使用console.log来帮助调试。
添加到关闭对话框js：console.log($('#divSuppliers'))

于 2012-05-16T14:40:44.310 回答
1

您是否考虑过采用更简单的路线并将事件绑定到按钮客户端以关闭对话框？

 $(function () {
    $('#btnSelectSupplier').click(function () {

        $('#divSuppliers').dialog('close');
    });
});

从用户的角度来看，流程仍然相同。他们单击按钮，对话框关闭。服务器端代码将在对话框关闭后运行，但由于似乎没有任何服务器端逻辑决定您是否要在单击后关闭对话框，这可能符合您的需要。

编辑我看到你的问题。您遇到了问题，因为您没有打开现有对话框，而是在单击时重新定义对话框：

 string jq = "var dlg = $('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); dlg.parent().appendTo($('form:first'));";

相反，您想在 document.ready 函数中定义对话框。

 $(function () {
    //define the div as a dialog. By default, it will not open until you tell it to
$('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 });

});

单击时，您应该像这样打开它

 $('#divSuppliers').dialog('open');

再次，您可能希望在客户端执行此操作，而不是尝试将脚本推送到服务器端事件的页面中，但这取决于您。

最简单的完整解决方案：

$(function () {

$('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 });

$('#btnAddSupplier').click(function () {

    $('#divSuppliers').dialog('close');
});
$('#btnSelectSupplier').click(function () {

    $('#divSuppliers').dialog('open');
});
});
于 2012-05-09T21:00:00.340 回答
0

所以这里是解决方案：不要尝试将 ASP.NET UpdatePanel 与 jQuery Dialog 混合使用，因为它们不能很好地配合使用。

我之所以选择这个方向，是因为我认为通过使用 .NET 的 ScriptManager 和 UpdatePanel 控件而不是在 jQuery 中完成这一切，我将花费更少的时间来实现 AJAX。在这一点上，我似乎错了，因为我要回去撕掉 .NET 垃圾并将其全部替换为 jQuery。所以我认为我会节省的所有时间都像风一样消失了。

故事的寓意：如果没有必要，不要将两者混为一谈。

于 2012-05-10T14:55:34.560 回答