在 ASP.NET 核心中执行 POST 操作后，使 Bootstrap 当前选项卡处于活动状态

Question

在下面的 ASP.NET MVC Core 视图中，每个 Bootstrap 选项卡窗格中使用了两种不同的形式。我们如何使提交表单的选项卡处于活动状态？注意：在实际场景中有两个以上的选项卡。为简洁起见，post 我只包含了两个选项卡。

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#Tab1">Test Tab</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane in active">
    <form asp-controller="myController" asp-action="myAction1" method="post">
      <h3>HOME</h3>
      <p>Some content.</p>
      <input type="submit" name="GO" value="Value1" />
    </form>
  </div>
  <div id="Tab1" class="tab-pane">
    <form asp-controller="myController" asp-action="myAction2" method="post">
      <h3>Test</h3>
      <p>Some content in here.</p>
      <input type="submit" name="GO" value="Value2" />
    </form>
  </div>
</div>

Answer 1

您可以添加一个 class 基于这样的视图模型：

<div class="tab-pane @(Model.HomeTab ? " active" : "")">
    ...
</div>

在 ASP.NET 核心中执行 POST 操作后，使 Bootstrap 当前选项卡处于活动状态

Make Bootstrap current tab active after a POST action in ASP.NET Core

twitter-bootstrap

bootstrap-tabs

visual-studio-2015

asp.net-core