Wie Registerkarte nach Postback aktiv ASP.Net Core

Question

Ich habe eine Ansicht, die eine Reihe von Registerkarten enthält jeweils Rendern eine andere Teilansicht. Nachdem ich die Dokumentation und die W3Schools-Beispiele dieser Bootstrap-Registerkarten gelesen habe, kann ich keinen Weg finden, die aktive Registerkarte beim Postback aktiv zu lassen. Alle Beispiele, die ich gesehen habe, verwenden ältere Versionen von .Net und gelten auch nicht.

Hier ist mein Code.
Meine Controller-Aktion:

public IActionResult DisplayCharts(DashboardChartsByMonthModel model) 
{ 
     //...do stuff 
     model.MonthOrQuarterChart = monthChart; 
     model.UserChart = userChart; 
     return View(model); 
} 

Im Blick @Scripts Abschnitt:

<script> 
    $(function(){ 
     var hash = window.location.hash; 
     hash && $('ul.nav a[href="' + hash + '"]').tab('show'); 

     $('.nav-tabs a').click(function (e) { 
      $(this).tab('show'); 
      var scrollmem = $('body').scrollTop() || $('html').scrollTop(); 
      window.location.hash = this.hash; 
      $('html,body').scrollTop(scrollmem); 
     }); 
    }); 
</script> 
<script> 
    $('a[data-toggle="tab"]').on('shown.bs.tab', 
     function(e) { 
      switch ($(e.target).attr('href')) { 
      case '#tab1': 
       drawMonthAndQuarterChart(); 
       break; 

      case '#tab2': 
        drawUserChart(); 
       break; 

      } 
     }); 
</script> 

Im Körper:

<ul class="nav nav-tabs" role="tablist" id="myTabs"> 
<li class="nav-item"> 
    <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">By Month & Quarter</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">By Leasing/Billing Rep</a> 
</li> 

<div class="tab-content" id="myTabContent"> 
    <div class="tab-pane active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab"> 
     <form method="post"> 
     ...model fields, etc. 
     <button type="submit" class="btn btn-success">Submit</button> 
      <div id="chart_monthandquarter_div"></div> 
     </form> 
    <div class="tab-pane" id="tab2" role="tabpanel" aria-labelledby="tab2-tab"> 
     <form method="post"> 
     .... 
     </form> 

Und das gleiche würde für Tab 2, Tab 3, etc. weitergehen. Jedes Tab hat sein eigenes Formular mit einer eigenen Schaltfläche, die das Modell übermittelt und wenn die Seite nach dem Senden neu geladen wird, kann ich zwischen beiden Tabs wechseln und nur meine Diagramme sehen gut, aber es macht den ersten Tab aktiv, wenn ich poste.

Eines der verschiedenen Dinge, die ich ausprobiert habe, war, einige der älteren Beispiele mit einem versteckten Feld auszuarbeiten, das ich bei einigen Leuten gesehen habe, aber ich konnte das nicht zum Laufen bringen.

Also mit dem Code dargestellt, wie kann ich es so machen, dass die aktuelle Registerkarte, die Sie anzeigen, wenn Sie auf "Senden" klicken, ist die, die Postback aktiv ist?

Answer 1

Wenn ein Benutzer ein Formular einreicht, sollten Sie dem P-R-G pattern folgen. Nach dem Speichern sollten Sie daher eine Umleitungsantwort zurückgeben, die eine völlig neue GET-Anfrage zum Laden der Seite von Grund auf neu ausgibt.

Wenn Sie die Weiterleitungsantwort ausgeben, können Sie der Registerkarte, die Sie auswählen möchten, einen spezifischen Querystring hinzufügen. Beispielsweise können Sie für die folgende Beispielmarkierung den href-Wert ohne den Wert # als querystring-Wert senden und in der Ansicht diesen querystring-Wert lesen und auf eine js-Variable festlegen. Im document ready-Ereignis können Sie die gewünschte Registerkarte explizit aktivieren.

<ul class="nav nav-tabs" role="tablist" id="myTabs"> 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
</ul> 

Und in Ihrer Httppost Aktion

public IActionResult UpdateProfile(YourViewModel model) 
{ 
    // to do :Save 
    return RedirectToAction("Index", new { t = "profile" }); 
} 

Und in der Ansicht, injizieren Sie IHttpContextAccessor Implementierung, so dass wir Request und dann querystrings

@inject IHttpContextAccessor HttpContextAccessor 

<!-- your code for the tabs goes here--> 

<script> 
    $(function() {  
     var t = '@HttpContextAccessor.HttpContext.Request.Query["t"]'; 
     if (t.length) { 
      $('#myTabs a[href="#' + t + '"]').tab('show'); 
     } 
    }); 
</script>