Question

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

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

aspx代码

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

当单击按钮Add时，代码隐藏准备对话框上的控件（放置值或删除它们，它取决于使用对话框添加项目或编辑它的事实），然后发送脚本以创建和显示对话框。当单击“保存”按钮时，后面的代码（在此处省略了检查数据条目，存储它并重新绑定转发器的例程之后）发送脚本以关闭对话框。问题是对话框没有关闭。调用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'); 
           }

现在对话框正在关闭而没有问题。

BUT !!!

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

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

2 个答案: