LinkBut​​ton後のBoostrapモーダル閉じを防ぐ

Question

codeBehindのClickFunctionを使用してboostrapモーダル内にLinkBut​​tonを持っています。 linkBut​​tonでクリックするたびに、コードビハインド内のイベントが発生しているので、モーダルが閉じています。私は、リンクボタンクリック後にモーダルを開いたままにしたい！

は、Clickイベントにタグモーダル体のモーダル内の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"; 
    } 

を問題は次のとおりです。毎回私はクリックしてくださいコードビハインドの クリックイベントを持つモーダル内のリンクボタン、モーダルが閉じていますか？あなたはjQueryのを述べてきたようにLinkBut​​tonコントロールが

Answer 1

私は実績のある男です！返信IS：

"ポストバックを使用すると、ポストバックが更新パネル内のすべてのコントロール内で動作し、モダールhtmlコードがアップデートパネル内にある場合、ポストバックが発生すると、モーダルが"リフレッシュ "されます。それはデフォルト値に再び設定されます（閉じた状態）。ポストバック後にモーダルを開いたままにしたい場合は、このHTMLコードをOUTパネルに書き込んでください。更新パネル内でポストバックが発生するたびにこれを行います。モーダルは、ポストバックで「再が書いた」「感動」とされていません。

Answer 2

をクリックした私は、モーダルを維持したい

が一度開かれ、あなたがモーダルポップアップを消える防ぐために、以下のようなモーダルプロパティを設定する必要があり、この

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

Answer 3

を試してみてください。

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

Answer 4

あなたがメソッドまたはのScriptManagerを使用して、更新パネルの後ろにあなたのコードにURLアクションとブートストラップモデルのいずれかのjQueryを使用することができます。

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：

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

012：更新パネル

Webフォームを使用して

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

第2の方法背後

コード：それは何の変化

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

そして、もう一つのjQueryや更新パネルを使用せずに使用することは非常に簡単な方法ではないとして、あなたがする簡単なjQueryのを使用することができます。

のjQuery：

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

イベント。preventDefault（）;

のために、我々はASP.Net TextBoxコントロールしているよう起こってからポストバックを防ぐために、我々は、入力html要素を使用していたのであれば、はposbackが起こらないよう「e.preventDefaultを（）」を使用する必要はありません。