在gridview行上单击打开模态

Question

我有一个GridView的用户控件，当用户点击此GridView中的某一行调用函数OnSelectedIndexChanged时，我想要一个模态发生这种情况后弹出。我使用ScriptManager来调用打开模态的脚本$('#seasonInfoModal').modal()。问题是打开在同一用户控件中定义的模态时它不起作用。模态在page.aspx内部时会打开，但在控件.ascx内部时不会打开。我把所有东西都搞定了，并省略了一些细节。这是整体代码的样子

main page.aspx

<%@ Page Title="" Language="C#" ... %>
<%@ Register Src="~/Controls/MyControl.ascx" TagPrefix="ACT" TagName="GeneralADM" %>

<ACT:GeneralADM runat="server"" />

MyControl.ascx

<%@ Language="C#" AutoWireUP="true" Codebehind="" Inherits="" %>

<div runat="server">

     <!-- Seasonal Info-->
     <div runat="server" id="seasonInfoModal" class="modal fade" role="dialog" draggable="true">
     </div>
     <!-- End seasonal info-->

     <!-- Start of Season Edit Modal -->
     <div id="seasonEditInfo" class="modal fade" role="dialog" draggable="false">
     </div>
     <!-- End of Season Edit Modal -->

      <asp:GridView>
      </asp:GridView>

</div>

在后面的代码中我尝试打开这样的模态

MyControl.ascx.cs

protected void OnSelectedIndexChanged(object sender, GridViewEventArgs e){
    ScriptManager.RegisterStartupScript(this, 
      this.GetType(), 
      "seasonInfoModal", 
      "$('#seasonInfoModal').modal();", 
      true);
}

问题

#seasonInfoModal不会弹出，而是在其中没有任何内容的情况下制作新模态，并且点击时屏幕会变暗。当我将#seasonInfoModal从控件中拉出到我插入控件本身的页面时，模式实际上会弹出。

问题

如果模式#seasonInfoModal位于控件的内部，那么该控件的代码隐藏特别是来自OnSelectedIndexChanged函数内部？

Answer 1

问题可能是由ASP.NET执行的ID mangling引起的。由于modal div是服务器控件（由runat="server"指定），因此呈现的HTML中的ID不是seasonInfoModal，而是MyControl1_seasonInfoModal。因此，Javascript选择器$('#seasonInfoModal')无法找到它。

您可以更改启动脚本代码，并将seasonInfoModal.ClientID的值传递给jQuery选择器，以解释ID错误：

protected void OnSelectedIndexChanged(object sender, GridViewEventArgs e){
    ScriptManager.RegisterStartupScript(this, 
      this.GetType(), 
      "seasonInfoModal", 
      string.Format("$('#{0}').modal();", seasonInfoModal.ClientID),
      true);
}

避免ID伪造的其他替代方法是：

1. 如果您不需要在代码隐藏中访问div控件，则删除runat="server"属性
2. 将clientidmode="static"添加到div。
3. 使用类名（使用相应的jQuery类选择器）而不是模态div的ID。

但是，如果表单中存在多个用户控件实例，则这3个解决方案将无法正常运行。将始终使用第一个实例的模态，在第1和第2个案例中，表单的多个控件将具有相同的ID。