gridview行のモーダルを開く

Question

私はGridViewのユーザーコントロールを持っています。このGridViewの行をユーザーがクリックすると、OnSelectedIndexChangedという関数が呼び出されます。この後にモーダルがポップアップされます。 ScriptManagerを使用して、モーダルを開く際に機能するスクリプト$('#seasonInfoModal').modal()を呼び出しました。問題は、同じユーザーコントロール内で定義されたモーダルを開くときに機能しないことです。モーダルはpage.aspxの内側にあるときに開きますが、コントロールの内側にあるときは開きません.ascx。私はすべてが正しく結びついていて、いくつかの詳細を省いています。ここで私はこの

MyControlと同様にモーダルを開こうとすると背後に全体のコードはコードで

メイン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> 

次のようになります。 ascx.cs

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

号

#seasonInfoModal代わりにポップアップ表示されず、内部に何も入れずに新しいモーダルが作成され、クリックすると画面が暗くなります。 #seasonInfoModalをコントロールから外して、コントロール自体を挿入するページに移動すると、モーダルが実際にポップアップします。それはそのコントロールの分離コードから、具体的OnSelectedIndexChanged関数内からコントロール内にあるとき

質問

は、どのように私は、モーダル#seasonInfoModalを開くことができますか？

Answer 1

問題は、ASP.NETによって実行されたID manglingによって引き起こされる可能性があります。モーダルdivはサーバーコントロール（runat="server"で指定）であるため、レンダリングされたHTMLのIDはseasonInfoModalではなく、MyControl1_seasonInfoModalのようなものです。その結果、JavaScriptのセレクタ$('#seasonInfoModal')は見つかりませんでした。

あなたはIDのマングリングを考慮して、起動スクリプトコードを変更し、jQueryのセレクタにseasonInfoModal.ClientIDの値を渡すことができますIDマングリングは次のようになり避けるために

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

---

他の代替：

をあなたが広告にコードビハインド

でのdivコントロールにアクセスする必要がない場合はrunat="server"属性を削除するには

1. d clientidmode="static"をdivに追加します。
2. モーダルdivのIDではなく、クラス名（対応するjQueryクラスセレクタを使用）を使用します。

ただし、これらの3つのソリューションは、ユーザーコントロールのいくつかのインスタンスがフォームに存在する場合、正しく動作しません。最初のインスタンスのモーダルは常に使用され、ケース1と2では、フォームのいくつかのコントロールは同じIDを持ちます。