在 LinkButton 单击模态内部后防止 Bootstrap 模态关闭

Question

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

使用 Click 事件检查标签 modal-body 模态内的 asp LinkButton：

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

LinkButton Click函数在后面的代码中：

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

问题是：每次我点击模态框里的 link 按钮，它有一个代码隐藏中的单击事件，模式正在关闭？

我只是想在单击 link 按钮后保持模态打开

Answer 1

如您所述jQuery，试试这个

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

Answer 2

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

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

Answer 3

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

" 当您使用 UPDATE PANEL 并发生回发时，回发在更新面板内的所有控件中进行，如果模态 html 代码在更新面板内，当回发发生时，模态将是 "refreshed" 并再次设置为默认值（处于关闭状态），所以如果你想在回发后保持模式打开，你应该在更新面板之外编写这个 html 代码，每次回发时都这样做在更新面板中，模态代码不是 "touched" 和 "re wrote" 回传。

Answer 4

您可以使用 bootstrap 模型 jQuery 对您的代码隐藏方法执行 URL 操作，或者使用 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()' 因为回退不会发生。

在 LinkButton 单击模态内部后防止 Bootstrap 模态关闭

Prevent Boostrap modal closing after LinkButton Click inside modal

c#

asp.net

jquery

twitter-bootstrap

bootstrap-modal

在 LinkBut​​ton 单击模态内部后防止 Bootstrap 模态关闭

Prevent Boostrap modal closing after LinkButton Click inside modal

c#

asp.net

jquery

twitter-bootstrap

bootstrap-modal

在 LinkButton 单击模态内部后防止 Bootstrap 模态关闭