Stop Seite aktualisieren nach dem Klick auf die Schaltfläche

Question

Es ist kein Wiederholungsbeitrag, ich habe bereits alle Antworten im Netz überprüft und nichts funktioniert für mich, also poste ich dies hier.

Hier finden Sie den Code.

<form runat="server"> 
     <div class="card"> 
      <ul class="nav nav-tabs Main-Menu" role="tablist"> 
       <li role="presentation" class="active"><a href="#Enabled" class="element" style="font-size: 20px;" aria-controls="home" role="tab" data-toggle="tab">Check Box - Enabled</a></li> 
       <li role="presentation"><a href="#Disabled" class="element" style="font-size: 20px;" aria-controls="profile" role="tab" data-toggle="tab">Check Box - Disabled</a></li> 
      </ul> 

      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="Enabled"> 
        <asp:CheckBoxList runat="server" ID="CheckBoxEnabled" RepeatDirection="Horizontal"> 
         <asp:ListItem Text="Selenium IDE"></asp:ListItem> 
         <asp:ListItem Text="Selenium RC"></asp:ListItem> 
        </asp:CheckBoxList> 
        <asp:Button runat="server" Text="Submit" CssClass="btn btn-success Elements-Text" OnClick="btnEnabled_Click" /> 
        <asp:Label runat="server" ID="lblEnabled" CssClass="label success"></asp:Label> 
       </div> 
       <div role="tabpanel" class="tab-pane" id="Disabled"> 
        <asp:CheckBoxList runat="server" ID="CheckBoxDisbled" RepeatDirection="Horizontal" CellPadding="5" CellSpacing="5" CssClass="element form-control"> 
         <asp:ListItem Text="Selenium IDE"></asp:ListItem> 
         <asp:ListItem Text="Selenium RC" Enabled="false"></asp:ListItem> 
         <asp:ListItem Text="Selenium WebDriver"></asp:ListItem> 
         <asp:ListItem Text="Selenium Grid" Enabled="false"></asp:ListItem> 
        </asp:CheckBoxList> 
        <asp:Button runat="server" ID="btnDisabled" Text="Submit" CssClass="element btn btn-success" OnClick="btnDisabled_Click" /> 
        <asp:Label runat="server" ID="lblDisabled" CssClass="label success"></asp:Label> 
       </div> 
      </div> 
     </div> 
    </form> 

Ich habe 2 Tabs in meiner Seite, wenn ich auf dem zweiten Registerkarte bin, eine Checkbox, und klicken Sie auf der Schaltfläche mit #btnDisabled der Seite Postbacks wird und navigiert zu den ersten Registerkarte. Ich möchte, dass das aufhört.

Ich habe bereits versucht, 1. AutoPostBack = false 2. onClick = "return false;" aber nicht in der Lage, die Probleme zu lösen.

Jede Hilfe wird geschätzt. :)

Answer 1

Sie möchten btnDisabled_Click tun, aber nicht die gesamte Seite aktualisieren. Sie benötigen Ajax-Steuerelemente um die Schaltfläche oder irgendetwas muss aktualisiert werden. Überprüfen Sie die Werkzeugliste, um sie zu finden.

(Zuerst downloaden und AjaxControlToolkit installieren, wenn Sie nicht haben.)

Answer 2

Sie können den Index der aktiven Platte in einer versteckten Steuerung speichern und nach Post zurück zu verwenden.

<input type="hidden" runat="server" id="tabIndex" value="0" /> 

Ich weiß nicht, wie Sie zwischen den Registerkarten wechseln, sondern auf den einzelnen Registerkarten ändern müssen Sie den Index in verstecktes Feld (von Javascript) speichern. Wenn Sie beispielsweise die zweite Registerkarte auswählen, muss sich der Wert für das ausgeblendete Feld in ändern.

Schließlich fügen Sie dieses Skript nach all Ihren Tabs hinzu.

var tabIndex = $('#tabIndex').val(); 
$('.tab-pane').removeClass('active'); 
$('.tab-pane').eq(tabIndex).addClass('active');