更新面板中的异步回发后，JQuery UI 模式对话框未关闭

Question

我在 ASP.Net 应用程序中使用 jQuery UI 的模式对话框。

该页面包含用于异步回发的UpdatePanel 组件。

aspx code

                <script>
                   function ShowDialog() {
                      $('#modal').dialog({
                         autoOpen: false,
                         modal: true,
                         dialogClass: 'dialog',
                         resizable: false,
                         width: 500,
                         height: 400
                      });
                      $('#modal).dialog('open');
                   }

                   function CloseDialog(){
                      $('#modal).dialog('close');
                   }
                </script>
                <asp:UpdatePanel ID="updatepanel" runat="server" RenderMode="Inline">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                </Triggers>
                <ContentTemplate>
                    <asp:Repeater ID="repEducationHistory" runat="server">
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <th>Field 1</th>
                                    <th>Field 2</th>
                                </tr>                                            
                        </HeaderTemplate>
                        <ItemTemplate>
                             <tr>
                                <td><asp:Literal ID="litField1" runat="server">
                                   </asp:Literal>
                                </td>
                                <td><asp:Literal ID="litField1" runat="server">
                                   </asp:Literal>
                                </td>
                             </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                           </table>
                        </FooterTemplate>
                    </asp:Repeater>

                    <asp:LinkButton ID="btnAdd" runat="server" Text="Add new"
                       OnClick="BtnAdd_Click" />

                    <div id="modal" title="Add item" style="display:none;">
                        <div>
                            <label>Educational institution:</label>
                            <asp:TextBox ID="tbField1" runat="server"/>
                            <br />
                            <label>Country:</label>
                            <asp:DropDownList ID="tbField2" runat="server" 
                               DataValueField="Id" DataTextField="Name" />
                            <br />
                            <asp:LinkButton ID="btnSave" runat="server" 
                               Text="Save" OnClick="BtnSave_Click"></asp:LinkButton>
                        </div>
                    </div>
                    <asp:LinkButton ID="btnSave" runat="server" CausesValidation="true"
                         ValidationGroup="vgMpt" Text="Save" OnClick="BtnSaveUsrEdu_Click">
                    </asp:LinkButton>

cs code

   protected void BtnAdd_Click(object sender, EventArgs e)
    {
        tbField1.Text=string.Empty;
        ddlField2.SelectedIndex=0;
        ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(), 
           Guid.NewGuid().ToString(), "ShowDialog();", true);
    }
    protected void BtnSaveUsrEdu_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(), 
           Guid.NewGuid().ToString(), "CloseDialog();", true);
    }

当单击“添加”按钮时，隐藏代码会在对话框上准备控件（放入值或删除它们，这取决于对话框是否用于添加项目或编辑项目），然后发送脚本来创建和显示对话框。单击“保存”按钮时，后面的代码（在此处省略了检查数据输入、存储数据并重新绑定中继器的例程之后）发送脚本以关闭对话框。问题是对话框没有关闭。 JavaScript 函数 CloseDialog 被调用，但 $('#modal).dialog('close');没有做需要做的事情。

有什么想法如何解决这个问题吗？

Answer 1

下面的代码对我来说效果很好：

<asp:UpdatePanel ID="updatepanel" runat="server" UpdateMode="Conditional" RenderMode="Inline">
     <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnSave" />
     </Triggers>
     <ContentTemplate>
          <asp:LinkButton ID="btnAdd" runat="server" Text="Add new" OnClick="BtnAdd_Click" />
     </ContentTemplate>
</asp:UpdatePanel>
<div id="modal" title="Add item" style="display: none;">
     <asp:UpdatePanel runat="server" ID="DialogUpdatePanel">
          <ContentTemplate>
               <div>
                    <label>
                         Educational institution:
                         <asp:TextBox ID="tbField1" runat="server" />
                    </label>
                    <br />
                    <label>
                         Country:
                         <asp:DropDownList ID="tbField2" runat="server" DataValueField="Id" DataTextField="Name" />
                    </label>
                    <br />
                    <asp:LinkButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click"></asp:LinkButton>
               </div>
          </ContentTemplate>
     </asp:UpdatePanel>
</div>

代码隐藏：

protected void BtnAdd_Click(object sender, EventArgs e)
{
    tbField1.Text = string.Empty;
    ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(),
        Guid.NewGuid().ToString(), "ShowDialog();", true);
}
protected void btnSave_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(DialogUpdatePanel, DialogUpdatePanel.GetType(),
        Guid.NewGuid().ToString(), "CloseDialog();", true);
}

Answer 2

我自己解决了。

显示/关闭对话框的脚本是这样的：

           function ShowDialog() { 
              $('#modal').dialog({ 
                 autoOpen: false, 
                 modal: true, 
                 dialogClass: 'dialog', 
                 resizable: false, 
                 width: 500, 
                 height: 400 
              }); 
              $('#modal).dialog('open'); 
           } 

           function CloseDialog(){ 
              $('#modal).dialog('close'); 
           } 

我所做的是：添加到关闭函数对话框的定义：

           function CloseDialog(){ 
              $('#modal').dialog({ 
                 autoOpen: false, 
                 modal: true, 
                 dialogClass: 'dialog', 
                 resizable: false, 
                 width: 500, 
                 height: 400 
              }); 
              $('#modal).dialog('close'); 
           }

现在对话框正在毫无问题地关闭。

但！！！

Yuriy Rozhovetskiy 的贡献非常有价值：将 UpdatePanel 添加到对话框 DIV 的内容解决了从代码隐藏更新对话框的许多其他问题。我相信，在 UpdatePanel 中使用 jQuery UI 对话框的最佳解决方案是在对话框中再添加一个 UpdatePanel。谢谢，尤里！