如何关闭放置在TemplateField中的modalpopupextender而不使用BehaviorID属性

How to close modalpopupextender placed in a TemplateField without using the BehaviorID property

本文关键字：属性 BehaviorID modalpopupextender 中的 何关闭 TemplateField      更新时间：2023-09-26

我需要使用如下所示的确认框问题是，我还需要添加一个关闭x按钮在标题栏，但我通常使用的方式来关闭一个模态弹出不会工作。我认为这是因为行为学id必须是唯一的，因为它是在一个ItemTemplate内，ASP将尝试创建多个ModalPopupExtender具有相同的行为学id。

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
            RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
            runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkDelete" CommandArgument='<%# Eval("Id") %>' OnClick="DeleteRecord"
                            runat="server" Text="Delete"></asp:LinkButton>
                        <cc1:ConfirmButtonExtender ID="cbe" runat="server" DisplayModalPopupID="mpe" TargetControlID="lnkDelete">
                        </cc1:ConfirmButtonExtender>
                        <cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkDelete"
                            OkControlID="btnYes" CancelControlID="btnNo" BackgroundCssClass="modalBackground"
                            BehaviorID="mpeClosePopup">
                        </cc1:ModalPopupExtender>
                        <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
                            <div class="header">
                                Confirmation <a href="javascript:;" onclick="ClosePopup('mpeClosePopup');" title="Cerrar">
                                    &nbsp;&nbsp;X&nbsp;&nbsp; </a>
                            </div>
                            <div class="body">
                                Do you want to delete this record?
                            </div>
                            <div class="footer" align="right">
                                <asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
                                <asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
                            </div>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

长话短说，你知道我怎么能关闭模态弹出窗口，如果我不能使用行为学id为此目的吗??我知道这可以很容易地解决使用jQuery，但我就是不允许使用它。

提前感谢。

您可以从代码后面获得正确的模式弹出式扩展器的id。

首先，从你的模式弹出式扩展器中移除BehaviorId属性。

<cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkDelete"
    OkControlID="btnYes" CancelControlID="btnNo" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>

第二，通过给id和runat="server"，使关闭弹出的链接成为服务器控件。

<div class="header">
    Confirmation <a id="linkClose" runat="server" href="javascript:;" title="Cerrar">&nbsp;&nbsp;X&nbsp;&nbsp;
    </a>
</div>

第三，使用GridView的RowDataBound事件，根据mpe的ClientID为网格视图中的每一行设置linkClose的onclick。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        HtmlAnchor linkClose = (HtmlAnchor)e.Row.FindControl("linkClose");
        linkClose.Attributes.Add("onclick", string.Format("ClosePopup('{0}');", e.Row.FindControl("mpe").ClientID));
    }
}

第四，将GridView控件上的OnRowDataBound设置为与上面定义的相同的名称。

OnRowDataBound="GridView1_RowDataBound"

最后，ClosePopup js函数

<script type="text/javascript">
    function ClosePopup(id) {
        $find(id).hide();
    }
</script>

因此，作为第一行的一个例子，一旦呈现，链接将看起来像这样，onclick属性设置为正确的模式弹出式扩展器id。

<a id="GridView1_linkClose_0" onclick="ClosePopup('GridView1_mpe_0');" title="Cerrar" href="javascript:;" tabindex="0">  X  </a>

不确定这是否是最简单的解决方案，但这是我过去做过的类似的事情。

相关文章：