如何在回发ASP.Net Core后保持标签处于活动状态

Question

我有一个视图，其中包含一组选项卡，每个选项卡呈现不同的局部视图。 在阅读了这些引导选项卡的文档和W3Schools示例之后，我无法找到使活动选项卡在Postback上保持活动状态的方法。 我见过的所有示例都使用旧版本的.Net，也不适用。

这是我的代码。
我的控制器动作：

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

在视图@Scripts部分中：

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

在体内：

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

对于选项卡2，选项卡3等也会如此。每个选项卡都有自己的表单，其中有自己的按钮提交模型，当页面在提交后重新加载时，我可以在两个选项卡之间切换，看看我的图表渲染就好了但是，无论何时发布，它都会使第一个标签处于活动状态。

我尝试过的几件事之一就是用隐藏的字段来制作一些旧的例子，我见过一些人使用但是我无法让它工作。

因此，使用提供的代码，我如何才能使您在单击提交时查看的当前选项卡是在回发时处于活动状态的选项卡？

Answer 1

当用户提交表单时，您应该遵循PRG模式 。 因此，在保存之后，您应该返回一个重定向响应，该响应会发出一个全新的GET请求以从头开始加载页面。

发出重定向响应时，您可以向要选择的选项卡添加特定的查询字符串。 例如，对于下面的示例标记，您可以发送不带#作为查询字符串值的href值，并在视图中读取此查询字符串值并设置为js变量。 在文档就绪事件中，您可以使用该选项卡显式启用所需的选项卡。

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

并在你的HttpPost行动

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

在视图中，您注入了IHttpContextAccessor实现，以便我们可以访问Request然后查询字符串

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