在gridview行单击打开模式

Question

我有一个具有GridView 的用户控件，当用户单击此GridView 中的一行时，将调用函数OnSelectedIndexChanged，我希望在发生这种情况后弹出一个模式。我使用ScriptManager 调用脚本$('#seasonInfoModal').modal()，该脚本在打开模式中起作用。问题是打开在同一用户控件中定义的模式时它不起作用。模式在 page.aspx 内时打开，但在控件 .ascx 内时不打开。我已经把所有东西都连接好了，并省略了一些细节。这是整个代码的样子

主页.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 引起的。由于模态 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。