ASP.NET如何从复选框显示AjaxControlToolkit模式弹出窗口

当用户选中/取消选中GridView中作为模板字段的复选框控件时，我需要显示AjaxControlToolkit ModalPopupXtender控件

-更新日期：2013年5月24日

请参阅此处的最终解决方案

我们终于解决了这个问题。所以我决定在这里发布完整的解决方案和最终代码

网格视图

有些事情需要知道

1 ModalPopupExtender1控件位于GridView TemplateField内，因为它需要访问复选框1及其click事件。它可能不是有史以来最好的解决方案，但它是有效的，因此如果您的GridView不是太复杂，并且是分页的，它对性能不会有太大影响

2为了捕获ConfirmButton Click事件，必须从ModalPopupXtender控件设置中删除OKControlID属性

-结束

-更新日期：2013年5月22日

然后我需要相应行的ID来更新数据库

-结束

这是GridView

这是ModalPopp街区

现在，我想在每次选中/取消选中复选框时显示ModalPopup，并且该弹出窗口必须显示带有两个按钮的确认消息：确认和取消。 确认必须对数据库进行更新，然后回发。 取消只需隐藏弹出窗口而不回发

---

我知道ModalPopupXtender会侦听OnClick事件。那么，我需要按钮、链接按钮、图像按钮等吗？或者我可以做我想做的吗？

你说得对，它监听onclick事件，但监听客户端事件，因此，扩展器的目标控件可以是你可以点击的任何东西，甚至是div或标签。

你说得对，它监听onclick事件，但监听客户端事件，所以，扩展器的目标控件可以是您可以单击的任何对象，甚至是div或标签。

尝试从chkArchiviare_CheckedChanged事件中显示/隐藏ModalPopupExtender1，如下所示

ModalPopupExtender1.show();

<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />

及

取一个隐藏按钮，将其设置为TargetControlID，如下所示

ModalPopupExtender1.show();

<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />

---

您无需调用取消按钮单击事件来隐藏ModalPopupExtender1。

尝试从chkArchiviare_CheckedChanged事件中显示/隐藏ModalPopupExtender1，如下所示

ModalPopupExtender1.show();

<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />

及

取一个隐藏按钮，将其设置为TargetControlID，如下所示

ModalPopupExtender1.show();

<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />

---

您不需要调用取消按钮单击事件来隐藏ModalPopupExtender1。

您不需要在GridView中包含ModalPopup Extender。您可以在GridView的模板字段中绑定复选框控件，并在其中使用OnCheckedChanged属性…所以模板如下所示

 <asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
    <ItemStyle HorizontalAlign="Center"/>
    <ItemTemplate>
        <asp:CheckBox ID="chkArchiviare" runat="server" 
             OnCheckedChanged="chkArchiviare_CheckedChanged"/>
    </ItemTemplate>
</asp:TemplateField>

这里ModalPopupExtender1是ModalPopupXtender控件的ID

还有一件事你必须记住使用.aspx页面上的一个按钮。并将此按钮ID传递到ModalPopupXtender TargetControlID。。。像这样

 <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True"  
      TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup" 
      OkControlID="btnConferma" CancelControlID="btnAnnulla" />

 <asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; 
      background-color:White; border-width:2px; border-color:Black; border-
      style:solid; padding:20px;"> Are you sure?<br /><br />
   <div style="text-align:right;">
    <asp:Button ID="btnConferma" runat="server" Text="Conferma" 
         OnClick="btnConferma_Click"/>
    <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" 
         OnClick="btnAnnulla_Click" />
   </div>
 </asp:Panel>

这里是我为什么使用此按钮的原因？…此按钮没有任何用处，因为我们使用的是“代码隐藏中的显示…”但如果我们不将按钮Id传递给ModAppUpExtender TargetControlId属性。它会给你一个错误

因此，以这种方式使用ModalPopupXtender…您可以将其与LinkButton、Label、Button一起使用。有关示例的更多详细信息，您可以查看以下链接

---

我希望这篇文章能消除你所有的疑虑…享受并与他人分享…谢谢

您不需要在GridView中包含ModalPopup Extender。您可以在GridView的模板字段中绑定复选框控件，并在其中使用OnCheckedChanged属性…所以模板如下所示

 <asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
    <ItemStyle HorizontalAlign="Center"/>
    <ItemTemplate>
        <asp:CheckBox ID="chkArchiviare" runat="server" 
             OnCheckedChanged="chkArchiviare_CheckedChanged"/>
    </ItemTemplate>
</asp:TemplateField>

这里ModalPopupExtender1是ModalPopupXtender控件的ID

还有一件事你必须记住使用.aspx页面上的一个按钮。并将此按钮ID传递到ModalPopupXtender TargetControlID。。。像这样

 <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True"  
      TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup" 
      OkControlID="btnConferma" CancelControlID="btnAnnulla" />

 <asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; 
      background-color:White; border-width:2px; border-color:Black; border-
      style:solid; padding:20px;"> Are you sure?<br /><br />
   <div style="text-align:right;">
    <asp:Button ID="btnConferma" runat="server" Text="Conferma" 
         OnClick="btnConferma_Click"/>
    <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" 
         OnClick="btnAnnulla_Click" />
   </div>
 </asp:Panel>

这里是我为什么使用此按钮的原因？…此按钮没有任何用处，因为我们使用的是“代码隐藏中的显示…”但如果我们不将按钮Id传递给ModAppUpExtender TargetControlId属性。它会给你一个错误

因此，以这种方式使用ModalPopupXtender…您可以将其与LinkButton、Label、Button一起使用。有关示例的更多详细信息，您可以查看以下链接

---

我希望这篇文章能消除你所有的疑虑…享受并与他人分享…谢谢

哦，太好了！我试试看！谢谢我将TargetControlID=chkArchiviare这是我的复选框控件的名称放在GridView上，但AjaxControlToolkit出现了一个运行时错误，它说：ModalPopupExtender1的TargetControlID无效。找不到ID为chkArchiviare的控件。有什么想法吗？你需要把modalpopup和panel放到gridview项目模板中，我敢肯定是的，看起来就是这样。但我有两个问题：1.将ModalPopup和带有按钮的面板放在TemplateField上是否正确？它们不是每行初始化一次吗？2在我的页面上，我有一个带有复选框的主GridView，该复选框必须显示ModalPopup，但在第一个复选框下还有一个详细的GridView，当用户单击ROWID时显示。那个细节网格

---

---

视图具有相同的复选框列，该列应具有与另一个相同的行为。我需要把另一个ModalPopp块与它自己的面板和按钮放在一起吗您必须删除ModalPopupExtender定义上的OKControlID，以便“确定”按钮可以按照正常方式触发事件OnClick，您可以使用“button\u OnClick”捕捉事件，然后进行回发。谢谢哦，太好了！我试试看！谢谢我将TargetControlID=chkArchiviare这是我的复选框控件的名称放在GridView上，但AjaxControlToolkit出现了一个运行时错误，它说：ModalPopupExtender1的TargetControlID无效。找不到ID为chkArchiviare的控件。有什么想法吗？你需要把modalpopup和panel放到gridview项目模板中，我敢肯定是的，看起来就是这样。但我有两个问题：1.将ModalPopup和带有按钮的面板放在TemplateField上是否正确？它们不是每行初始化一次吗？2在我的页面上，我有一个带有复选框的主GridView，该复选框必须显示ModalPopup，但在第一个复选框下还有一个详细的GridView，当用户单击ROWID时显示。该细节GridView具有与另一个相同的行为的相同复选框列。我需要把另一个ModalPopp块与它自己的面板和按钮放在一起吗您必须删除ModalPopupExtender定义上的OKControlID，以便“确定”按钮可以按照正常方式触发事件OnClick，您可以使用“button\u OnClick”捕捉事件，然后进行回发。谢谢我这样做了，但每当弹出窗口显示它冻结，所以即使我点击取消按钮，它也不会隐藏。我做了一个Cancel\u Clickobject sender，EventArgs e事件，在这里我调用ModalPopupExtender1.hide；。将CancelControlID=Cancel按钮名称属性放入ModalPopupExtender1标记中。它将自动关闭您的ModalPopupExtender1。正如您在代码块上看到的，按钮控件的名称是CancelControlID=btnAnnulla，但它不起作用。请查看我编辑的答案。也许我发现了问题。。。我将TargetControlID=panModalPopup和PopupControlID=panModalPopup放在一起。因此，应该激活模式弹出窗口的目标控件是弹出窗口本身。。。无论如何，如果我把TargetControlID=chkArchiviare这是我的复选框控件的名称放在GridView中，我会得到AjaxControlToolkit的运行时错误，它说：ModalPopupExtender1的TargetControlID无效。找不到ID为chkArchiviare的控件。可能是因为GridView将在ModalPopup的初始化事件之后生成？我这样做了，但每当弹出窗口显示它冻结时，即使我单击“取消”按钮，它也不会隐藏。我做了一个Cancel\u Clickobject sender，EventArgs e事件，在这里我调用ModalPopupExtender1.hide；。将CancelControlID=Cancel按钮名称属性放入ModalPopupExtender1标记中。它将自动关闭您的ModalPopupExtender1。正如您在代码块上看到的，按钮控件的名称是CancelControlID=btnAnnulla，但它不起作用。请查看我编辑的答案。也许我发现了问题。。。我将TargetControlID=panModalPopup和PopupControlID=panModalPopup放在一起。因此，应该激活模式弹出窗口的目标控件是弹出窗口本身。。。无论如何，如果我把TargetControlID=chkArchiviare这是我的复选框控件的名称放在GridView中，我会得到AjaxControlToolkit的运行时错误，它说：ModalPopupExtender1的TargetControlID无效。找不到ID为chkArchiviare的控件。可能是因为GridView将在ModalPopup的初始化事件之后生成？