Prevent Boostrap modal closing after LinkButton Click inside modal

I got a LinkButton inside a boostrap modal with a ClickFunction in codeBehind. Everytime that i click in linkButton and event in codebehind is firing, the modal is closing. I wanna to keep modal open after a linkbutton click!

Check the asp LinkButton inside modal on tag modal-body with a Click event:

<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 function in code Behind:

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

The issue is: Everytime i click link button inside modal, which have a click event in codebehind, the modal is closing?

I just wanted to keep modal opened once the linkbutton was clicked

---

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

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

---

I FOUND SOLUTION GUYS! THE ANSWER IS:

" When you use UPDATE PANEL and occours a postback, the postback act in all controls inside update panel, and if modals html code is inside update panel, when postback occours, the modal will be "refreshed" and seted to default value again (Thats in closed state), so if you wanna to keep modal open after a postback, you should write this html code OUT of update panel, doing this every time a postback occour inside update panel, the code of modal doesn't be "touched" and "re wrote" by postback.

---

You can use bootstrap model either jQuery with URL action to your code behind method or Update panel using with Scriptmanager.

WebForm:

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

Code behind:

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

Second Method using Update Panel

WebForm:

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

Code behind: as it is no change

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

And one very simple method to use without using jquery or update panel, you can use simple jQuery to .

jQuery:

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

event.preventDefault(); for

To prevent postback from happening as we are ASP.Net TextBox control so If we had used input html element , there is no need to use ' e.preventDefault()' as posback will not happen.

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

上一篇: 通过点击模式外部来关闭模式

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