ModalPopupExtender 只弹出一次UpdatePanel答案

【问题标题】：ModalPopupExtender only pops up the UpdatePanel onceModalPopupExtender 只弹出一次UpdatePanel
【发布时间】：2016-01-08 19:33:11
【问题描述】：

ModalPopupExtender 连接 btnCancel 按钮以触发 UpdatePanel 的弹出窗口。 UpdatePanel 是一个取消确认，其中包含一个是按钮和一个否按钮。单击否按钮后，面板关闭，但再次单击时 btnCancel 不再触发弹出窗口。 Yes 按钮起作用并触发服务器端 YesButton_Click 事件。这是我的代码。感谢您的帮助。

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
  <asp:Button ID="btnCancel" Text="Cancel Task" runat="server" ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />

  <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
    PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />

  <asp:UpdatePanel ID="upd_yes_no" runat="server">
    <ContentTemplate>
      <asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
        <div class="modalPopup-text">
          Are you sure you want to cancel this task?<br />
          <br />
          <asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />&nbsp;&nbsp; 
          <asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
        </div>
      </asp:Panel>
    </ContentTemplate>
  </asp:UpdatePanel>
</asp:Content>

【问题讨论】：

标签： asp.net webforms updatepanel ajaxcontroltoolkit

【解决方案1】：

我不是 100% 肯定的，但似乎 Extender 和 Extended 控件必须驻留在同一个 UpdatePanel 中。因此，如果您在 UpdatePanel 中移动 Cancel 按钮和 ModalPopupExtender 控件，它应该会按预期工作。

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

      <asp:UpdatePanel ID="upd_yes_no" runat="server">
  <ContentTemplate>

    <span id="buttons">
      <asp:Button ID="btnUndo" Text="Undo Edit" CommandArgument="undo" runat="server"
        OnClick="undo" CausesValidation="false" />
      <asp:Button ID="btnNewTask" Text="New Task" CommandArgument="newTask" runat="server"
        ToolTip="Unchange current and create new task"
        OnClick="NewTask" CausesValidation="false" />
      <asp:Button ID="btnCancel" Text="Cancel Task" runat="server"
        ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
    </span>

    <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel" PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
    <asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
      <div class="modalPopup-text">
        Are you sure you want to cancel this task?
        <br />
        <br />
        <asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />&nbsp;&nbsp;
        <asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
      </div>
    </asp:Panel>
  </ContentTemplate>
</asp:UpdatePanel>

【讨论】：

谢谢。那行得通。一个小问题是 btnCancel 与 SPAN 标记中的其他两个按钮作为一个组。在更新面板内移动此按钮会导致它在自己的行上。它在视觉上并不吸引人。我尝试在更新面板中移动 SPAN 标签和按钮。它导致 500 错误，抱怨不允许使用 SPAN 标签。
您能否提供 SPAN 标签的代码以及您尝试放入更新面板中的按钮？
谢谢。我用源代码更新了帖子。 SPAN 的样式是 #buttons { text-align: center; }
@user266909 - 我更新了我的答案。我能够在更新面板中使用标签进行渲染就好了。