Модальное диалоговое окно JQuery UI не закрывается после асинхронной обратной связи на панели обновления

Question

Я использую модальное диалоговое окно jQuery UI с моим приложением ASP.Net.

Страница содержит компонент 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

   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

Решил сам.

Сценарий для отображения / закрытия диалогового окна был таким:

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

И теперь диалог закрывается без проблем.

НО !!!

Вклад Юрия Рожовецкого был чрезвычайно ценным: добавление UpdatePanel к содержимому DIV диалогового окна решило множество других вопросов обновления диалога из кода. Я считаю, что лучшее решение для использования диалогового окна jQuery UI внутри UpdatePanel - это добавить еще одну UpdatePanel внутри диалога. Спасибо, Юрий !!!

Answer 2

Код ниже хорошо работает для меня:

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