web-dev-qa-db-ja.com

bootstrapモーダル内のASP.NETボタンがクリックイベントをトリガーしない

こんにちは私はbootstrap modalで私のasp.netサイトで動作しています。モーダルは正常に動作していますが、モーダルフッター内のボタンbtnSaveImageがクリックイベントを起動していません。マスターページもあり、フォームタグはそれ、これが私のコードです

 <a href="#dvUpload" data-toggle="modal">
   <asp:Button runat="server" ID="lnkUploadPics" CssClass=" btn-large Greengradiant"
                                    Width="100%" Text="Upload pictures"></asp:Button>
   </a>
   <div id="dvUpload" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"  aria-hidden="true">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
         ×</button>
        <h3 id="myModalLabel">
             Upload Image</h3>
           </div>
             <div class="modal-body">
            <div class="row-fluid" style="padding-left: 10px; padding-right: 10px; padding-bottom: 20px;"> 
<div id="Upload" class="span6">
        <asp:FileUpload ID="fuImage" runat="server" />
       <img id="imgUPload" runat="server" src="" />
              </div>
             </div>
            </div>
          <div class="modal-footer">
           <button data-dismiss="modal" class="btn  btn-large"> Close</button>
           <asp:Button runat="server" ID="btnSaveImage" Text="Save Image" CssClass="Greengradiant btn-large" OnClick="btnSaveImage_Click" />
            </div>
         </div>
c#asp.nettwitter-bootstrapmodal-dialogbuttonclick
14
skhurams

あなたはあなたの例のようにASPボタンを使うことができます

<div class="modal-footer">
   <button data-dismiss="modal" class="btn  btn-large"> Close</button>
   <asp:Button runat="server" ID="btnSaveImage" Text="Save Image" CssClass="Greengradiant btn- large" OnClick="btnSaveImage_Click" />
</div>

UseSubmitBehavior = "false"と言ってみてくださいskhuramsおよびdata-dismiss = "modal"と組み合わせます

<div class="modal-footer">
   <button data-dismiss="modal" class="btn  btn-large"> Close</button>
   <asp:Button runat="server" ID="btnSaveImage" Text="Save Image" CssClass="Greengradiant btn- large" OnClick="btnSaveImage_Click" UseSubmitBehavior="false" data-dismiss="modal" />
</div>

これはモーダルを閉じてポストバックをトリガーします

33
bjvilory

ここでもう1つポイントを追加します。最終的にレンダリングされたモーダルダイアログがWebFormsの外に配置されたため、この問題に直面しました<form>タグ、およびUseSumbitBehavior="false"は私の問題を解決しませんでした。モーダルダイアログdivをフォーム内に移動すると、問題が解決しました。

$("div.modalForm").appendTo($("form:first"));
0
Fahad