Verhindern modales Schließen von Bootstrap auf Postback in ASP.NET

Ich habe ein Bootstrap-modal, das ich anzeigen möchte, um eine Suche durchzuführen und Funktionalität in einem ASP.NET-Webformular auszuwählen. Das Problem ist, wenn der Benutzer auf die Schaltfläche "Suchen" klickt, schließt sich das Modal. Ich möchte, dass das Modal geöffnet bleibt, um Suchergebnisse in GridView anzuzeigen, und schließt, wenn der Benutzer ein GridView-Element auswählt.Verhindern modales Schließen von Bootstrap auf Postback in ASP.NET

Ich habe versucht andere Lösungen in anderen Threads erwähnt, aber nichts scheint zu funktionieren. Ich verwende ein WebForm mit einer Masterseite, ich weiß nicht, ob es das Problem verursachen kann.

Das ist mein modal Code:

<div class="modal fade" id="modSearchByAccount" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Search by Account</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-md-8"> 
        <asp:TextBox ID="txtSearchText" runat="server" CssClass="form-control" placeholder="Account name"></asp:TextBox> 
       </div> 
       <div class="col-md-4"> 
        <asp:Button ID="btnSearchAccount" runat="server" OnClick="btnSearchAccount_Click" Text="Buscar" CssClass="btn btn-default" /> 
       </div>  
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        <asp:Panel ID="pnlSearchResults" runat="server" ScrollBars="Vertical" Height="200px" Width="100%"> 
         <asp:GridView ID="gvSearchResults" runat="server" AutoGenerateColumns="False" DataKeyNames="ACCOUNT_ID" OnSelectedIndexChanged="gvSearchResults_SelectedIndexChanged" CssClass="table table-striped table-hover"> 
          <Columns> 
           <asp:BoundField DataField="ACCOUNT_ID" HeaderText="ID" /> 
           <asp:BoundField DataField="ACCOUNT_NAME" HeaderText="Name" /> 
           <asp:CommandField ShowSelectButton ="true" /> 
          </Columns> 
         </asp:GridView> 
        </asp:Panel> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div>

Irgendwelche Ideen? Kann ich irgendwo ein UpdatePanel verwenden?

Vielen Dank im Voraus!

Quelle

2016-09-21 Gustavo Alvarado

Wenn die Taste eine Post-Rück verursacht wird dann die modalen nicht schließen wird, die * Seite wird neu geladen *. Sie müssen das Modal auslösen, um es beim Laden der Seite wieder zu öffnen. Oder führen Sie die Operation möglicherweise über AJAX aus, anstatt die Seite an erster Stelle neu zu laden. – David

Ich habe versucht, das Modal wieder zu öffnen, aber es sieht nicht gut aus, es verbirgt sich und ein zweiter Schaum wird gezeigt. Kann ich ein UpdatePanel innerhalb des Modales und um die Schaltflächen herum verwenden? –

Kannst du Ajax anstelle eines vollständigen Posts verwenden? Auf diese Weise können Sie die Standardaktion des Posts verhindern (es gibt also kein erneutes Laden), und Sie müssen nur Ihr Formular aktualisieren, basierend auf dem, was zurückgegeben wird. Stellen Sie dann sicher, dass auf Ihrer Schaltfläche, die die Daten veröffentlicht, keine Kündigungseigenschaft vorhanden ist. – Kolichikov

Wahrscheinlich zu spät jetzt, aber ja, es kann getan werden. Der Schlüssel ist, ein äußeres UpdatePanel und ein inneres UpdatePanel zu haben. Das äußere Panel sollte auf einen UpdateMode von conditional und ChildrenAsTriggers = true gesetzt werden.

In meinem Fall zog ich den inneren Körper in einen User Control, aber Ihr Codebeispiel wie folgt arbeiten:

<asp:UpdatePanel runat="server" ID="updatePanelTop" UpdateMode="Conditional" ChildrenAsTriggers="True"> 
<ContentTemplate> 
    <div class="modal fade" id="modSearchByAccount" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Search by Account</h4> 
      </div> 
      <div class="modal-body"> 
       <asp:UpdatePanel runat="server"> 
       <ContentTemplate> 
        <div class="row"> 
         <div class="col-md-8"> 
          <asp:TextBox ID="txtSearchText" runat="server" CssClass="form-control" placeholder="Account name"></asp:TextBox> 
         </div> 
         <div class="col-md-4"> 
          <asp:Button ID="btnSearchAccount" runat="server" OnClick="btnSearchAccount_Click" Text="Buscar" CssClass="btn btn-default" /> 
         </div>  
        </div> 
        <div class="row"> 
         <div class="col-md-12"> 
          <asp:Panel ID="pnlSearchResults" runat="server" ScrollBars="Vertical" Height="200px" Width="100%"> 
           <asp:GridView ID="gvSearchResults" runat="server" AutoGenerateColumns="False" DataKeyNames="ACCOUNT_ID" OnSelectedIndexChanged="gvSearchResults_SelectedIndexChanged" CssClass="table table-striped table-hover"> 
            <Columns> 
             <asp:BoundField DataField="ACCOUNT_ID" HeaderText="ID" /> 
             <asp:BoundField DataField="ACCOUNT_NAME" HeaderText="Name" /> 
             <asp:CommandField ShowSelectButton ="true" /> 
            </Columns> 
           </asp:GridView> 
          </asp:Panel> 
         </div> 
        </div> 
       </ContentTemplate> 
       </asp:UpdatePanel> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</ContentTemplate> 
</asp:UpdatePanel>

Quelle

2017-11-07 15:35:41

Verhindern modales Schließen von Bootstrap auf Postback in ASP.NET

Antwort

Verwandte Themen