防止在 LinkBut​​ton Click inside modal 后关闭 Bootstrap 模态

Question

我在 codeBehind 中有一个带有 ClickFunction 的 boostrap 模式内的 LinkBut​​ton。每次我单击链接按钮并且代码隐藏中的事件正在触发时，模式正在关闭。我想在点击链接按钮后保持模式打开！

使用 Click 事件检查标签 modal-body 上模态内的 asp LinkBut​​ton：

<div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
                                <h4 class="modal-title" id="txtTitle"><i>&nbsp;Pesquisa de Clientes</h4>
                            </div>
                            <div class="modal-body">
                                <asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
                                <asp:Label ID="lbl" runat="server"></asp:Label>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
                            </div>
                        </div>
                    </div>
                </div>

后面代码中的LinkBut​​ton点击函数：

 protected void link_Click(object sender, EventArgs e)
    {
        lbl.Text = "aaa";
    }

问题是：每次我点击模式内的链接按钮时，它都有一个 代码隐藏中的单击事件，模式正在关闭？

我只想在点击链接按钮后保持模式打开

Answer 1

您需要像下面这样设置模态属性以防止模态弹出消失：

$('#modalPesquisaCliente').modal({
  backdrop: 'static',
  keyboard: false
})

Answer 2

我找到了解决方案！答案是：

" 当您使用 UPDATE PANEL 并发生回发时，回发会在更新面板内的所有控件中起作用，如果 modals html 代码在更新面板内，则当回发发生时，模态将“刷新”并设置为默认值再次（即处于关闭状态），所以如果你想在回发后保持模式打开，你应该在更新面板中写这个 html 代码，每次在更新面板内发生回发时都这样做，模式的代码不是通过回发“感动”和“重新写”。

Answer 3

您可以使用带有 URL 操作的 jQuery 引导模型，或者使用带有 Scriptmanager 的更新面板。

网络表单：

<asp:Button ID="link" runat="server" OnClientClick="callAjaxMethod(event)"  Text="Call method using Ajax" />

后面的代码：

[System.Web.Services.WebMethod]
public static bool link_Click()
{
return "aaa";
}

jQuery:

function callAjaxMethod(e) {

e.preventDefault();

$.ajax({
type: "POST",
url: "SimpleAjax.aspx/IsLeapYear",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
  if (response.d) {
     $('#<%=lbl.ClientID%>').val(response.d);
  }
  else {
    $('#<%=lbl.ClientID%>').val('No value');
  }
},
failure: function (response) {
  $('#<%=lbl.ClientID%>').val("Error in calling Ajax:" + response.d);
}
});
}

使用更新面板的第二种方法

网络表单：

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <fieldset>
            <div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
                            <h4 class="modal-title" id="txtTitle"><i>&nbsp;Pesquisa de Clientes</h4>
                        </div>
                        <div class="modal-body">
                            <asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
                            <asp:Label ID="lbl" runat="server"></asp:Label>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
                        </div>
                    </div>
                </div>
            </div>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>

后面的代码：因为它没有变化

 protected void link_Click(object sender, EventArgs e)
 {
    lbl.Text = "aaa";
 }

还有一种非常简单的方法，不用jquery或更新面板，你可以用简单的jquery来。

jQuery:

 $(document).on('click', '#<%=link.ClientID%>', function (event) {
        event.preventDefault();
    });

event.preventDefault();对于

为了防止回发发生，因为我们是 ASP.Net TextBox 控件，所以如果我们使用输入 html 元素，则 不需要使用 ' e.preventDefault( )' 因为不会发生回发。

Answer 4

正如你提到的 jQuery，试试这个

 $(document).on('click', '#link', function (event) {
            event.preventDefault();
        });