Question

我从具有scriptManager的页面调用我的UI对话框，这样：

function openDialog() {

     var $dialog = jQuery('#dialog');   
     $dialog.load('dialog.aspx');
     $dialog.dialog({
        autoOpen: false,
        title: 'Add New Contact Personel',
        modal: true,
        height: 200,
        width: 400,
        show: 'puff',
        hide: 'puff',
        close: function (event, ui) {
            $dialog.html('');
            $dialog.dialog('destroy');
        }
     });
    $dialog.dialog('open');
}

dialog.aspx的主体看起来像这样：

<body>
    <form id="form1" runat="server">
<%--    <asp:ScriptManagerProxy ID="proxyScriptor" runat="server"></asp:ScriptManagerProxy>
    <asp:UpdatePanel ID="upadatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>--%>

    <div>

        <table border="0">
            <tr>
                <th>SomeText:</th>
                <th><asp:TextBox ID="someTextBox" runat="server"></asp:TextBox></th>
            </tr>

        </table>
    </div>


    <asp:Panel ID="updatePanel" runat="server">
        <asp:Button ID="UpdateLoger" runat="server" Text="Update" onclick="Update_Click" />
    </asp:Panel>

<%--    </ContentTemplate>
    </asp:UpdatePanel>--%>


    </form>
</body>

现在：如果我点击updateBtn我想在回发中更新文本，关闭UI对话框并像这样刷新：

UpdateText(someTextBox.Text);
            string script = @"jQuery('#dialog').html('');jQuery('#dialog').dialog('destroy');window.location.reload()";
            ScriptManager.RegisterClientScriptBlock(this, typeof(UpdatePanel), "jscript", script, true);

所以如果在这个页面上添加另一个脚本管理器用于UI对话框，非常非常奇怪的事情发生（如__doPostBack不起作用），如果我删除scriptManager，updatePanel没有显示它的内容，如果我把scriptMangerProxy，updatePanel没有' t显示它的内容。那我应该怎么做呢？

Answer 1

你在这里有很多事情要做。您遇到的一个问题是，您正在处理dialog.aspx，就像它正在加载到自己的窗口或iframe中一样。实际上，它只是作为文档片段插入到页面的DOM中。我怀疑如果你检查来源，你会发现多个<body>标签。

有几种方法可以做到这一点。我的对话框通常对特定页面是唯一的，因此我将按照以下方式处理对话框：

Page.aspx

<html>
<head>...</head>
<body>
    <!-- page content -->

    <asp:Button ID="btnOpenDialog" runat="server" OnClick="btnOpenDialogClick" Text="Open Dialog" />

    <asp:UpdatePanel ID="upDialogs" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

    <asp:Panel ID="pnlDialog" runat="server" CssClass="pnlDialog" Visible="false">
        <!-- Dialog form -->
        <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmitClick" Text="Submit" />
    </asp:Panel>

    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostbackTrigger ControlID="btnOpenDialog" />
    </Triggers>
    </asp:UpdatePanel>

    <script>

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {


       $("div.pnlDialog").dialog({
          autoOpen: true,
          title: 'Add New Contact Personel',
          modal: true,
          height: 200,
          width: 400,
          show: 'puff',
          hide: 'puff',
          close: function (event, ui) {
             $dialog.html('');
             $dialog.dialog('destroy');
          }
       });

    }

    </script>

</body>
</html>

Page.aspx.cs

...
protected void btnOpenDialogClick(object sender, EventArgs e)
{
    pnlDialog.Visible = true;
    upDialogs.Update();
}

protected void btnSubmitClick(object sender, EventArgs e)
{
    ... save values ...
    pnlDialog.Visible = false;
    upDialogs.Update();
}
...

基本上，每次页面执行异步回发时，我们都会注册一个JS函数。此函数查找对话框代码。如果找到它，它会用jQueryUI连接它。如果它没有找到任何东西，它只是默默地完成。如果页面上有多个对话框，则可以轻松地重构这些对话框以灵活处理它们。

scriptManger和updatePanel的UI对话框问题

1 个答案: