Open modal on gridview row click

Question

I have a user control that has a GridView and when a user clicks on a row in this GridView the function OnSelectedIndexChanged is called, I'd like a modal to pop up after this occurs. I used the ScriptManager to invoke the script $('#seasonInfoModal').modal() which works in opening modals. The problem is it doesn't work when opening a modal which is defined within the same user control. The modal opens when it is inside the page.aspx , but doesn't open when inside the control .ascx. I have everything hooked up properly and have omitted some details. Here's what the overall code looks like

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>

In the code behind I try to open the modal like this

MyControl.ascx.cs

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

issue

#seasonInfoModal doesn't popup instead a new modal is made with nothing inside it and the screen fades to dark on click. When I pull the #seasonInfoModal out of the control into the page where I am inserting the control itself, the modal actually pops up.

question

How can I open the modal #seasonInfoModal when it is inside the control from that control's codebehind specifically from inside OnSelectedIndexChanged function?

Answer 1

The problem may be caused by the ID mangling performed by ASP.NET. Since the modal div is a server control (as specified by runat="server"), its ID in the rendered HTML is not seasonInfoModal but something like MyControl1_seasonInfoModal. As a result, the Javascript selector $('#seasonInfoModal') cannot find it.

You can change the startup script code, and pass the value of seasonInfoModal.ClientID to the jQuery selector, to account for the ID mangling:

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

---

Other alternatives to avoid ID mangling would be:

1. To remove the runat="server" attribute if you don't need to access the div control in code-behind
2. To add clientidmode="static" to the div.
3. To use a class name (with the corresponding jQuery class selector) instead of an ID for the modal div.

These 3 solutions, however, would not behave correctly if several instances of the user control are present in the form. The modal of the first instance would always be used, and in cases 1 and 2, several controls of the form would have the same ID.