ASP.NET按钮在Bootstrap模态框中无法触发点击事件

Question

我正在我的 asp.net 网站中使用 Bootstrap 模态框，模态框可以正常工作，但是模态框底部的 btnSaveImage 按钮无法触发点击事件，我还使用了主页面，并且其中包含 form 标签。

这是我的代码：

 <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>

- skhurams

---

您的页面中有必填字段验证器吗？ - jomsk1e

没有，我没有使用任何验证器。 - skhurams

另一个问题：你的模态框是否在表单内部？ - jomsk1e

是的，实际上当我点击“保存图像”时，会发生一个回发，但我已经在单击事件中设置了断点，如果我删除模态标记，则无法捕获该断点，然后按钮单击正常工作。 - skhurams

如果我删除模态标记，则按钮单击将起作用，因此我的代码没有问题。另外，我的一个同事说，如果您添加Bootstrap模态框，则服务器端代码的按钮单击事件将无法运行，我认为这是Bootstrap中的一个错误。 - skhurams

Answer 1

您可以像示例中那样使用 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>

只需尝试像skhurams所说的那样使用UseSubmitBehavior="false"并将其与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>

这将关闭模态框并触发回发

- bjvilory

---

在我的情况下，如果我添加UseSubmitBehavior="false" data-dismiss="modal"，则不会触发需要验证，并且模态弹出窗口将关闭。@bjvilory - Mr doubt

Answer 2

我想在这里再添加一点。我遇到了这个问题，因为我的最终渲染的模态对话框被放置在WebForms的<form>标签之外，并且使用UseSumbitBehavior="false"没有解决我的问题。将模态对话框div移动到表单内部解决了这个问题。

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

- Fahad