阻止Boostrap模式在LinkButton单击内部模式后关闭

2018-06-30 02:27:07

我在代码隐藏中使用ClickFunction的boostrap模式中有一个LinkButton。每当我点击linkButton并且代码隐藏事件正在触发时，模式正在关闭。我想在链接按钮点击后保持模态打开！

用Click事件检查标记模态体上的模态内部的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功能Behind：

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

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

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

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

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

我找到解决方案的人！答案是：

“当你使用UPDATE PANEL并且发生回发时，回发在更新面板内的所有控件中执行，而且如果modals html代码在更新面板内，当回发时，模式将被”刷新“并重新设置为默认值在关闭状态下），所以如果你想在回发之后保持模态打开，你应该写更新面板的这个html代码，每次在更新面板中发送一个回发内容时，模态代码不会被“触摸”并通过回传“重新写入”。

您可以使用bootstrap模型将jQuery的URL动作添加到方法后面的代码中，或者使用Scriptmanager使用更新面板。

Web窗体：

<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);
}
});
}

第二种方法使用更新面板

Web窗体：

<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（）'，因为posback不会发生。

链接地址: http://www.djcxy.com/p/83991.html

上一篇: Prevent Boostrap modal closing after LinkButton Click inside modal

下一篇: Javascript is not working after clicking outside of modal window on bootstrap

阻止Boostrap模式在LinkBut​​ton单击内部模式后关闭

阻止Boostrap模式在LinkButton单击内部模式后关闭