如何在回发ASP.Net Core后保持标签处于活动状态 [英] How to keep tab active after postback ASP.Net Core

问题描述

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

I have a View that contains a set of tabs each rendering a different partial view. After reading the documentation and W3Schools samples of these bootstrap tabs, I am unable to work out a way that makes the active tab remain active on Postback. All of the examples I've seen are using older versions of .Net and don't apply either.

这是我的代码。

My控制器动作：

Here is my code.
My controller action:

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等也是如此。每个标签都有自己的表格使用自己的按钮提交模型，当页面在提交后重新加载时，我可以在两个标签之间切换，看看我的图表渲染得很好但是它会在我发布的时候保持第一个标签处于活动状态。

And the same would go on for tab 2, tab 3, etc. Each tab has its own form with its own button that submits the model and when the page reloads after submit, I can swap between both tabs and see my charts rendering just fine however it keeps making the first tab active any time I post.

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

One of the several things I've tried was working out some of the older examples with a hidden field that I've seen some people use but I was unable to get that to work.

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

So with the code presented, how can I make it so that the current tab that you are viewing when you click submit is the one that's active on postback?

推荐答案

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

When user submits a form, you should follow the P-R-G pattern. So after saving, you should return a redirect response which issue a totally new GET request to load the page from scratch.

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

When issuing the redirect response, you can add a querystring speciific to the tab you want to select. For example, for the below sample markup, you can send the href value without the # as the querystring value and in the view read this querystring value and set to a js variable. In the document ready event, you can explicitly enable the tab you want with that.

<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行动中

And in your HttpPost action

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

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

And in the view, you inject IHttpContextAccessor implementation so that we can access Request and then 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>

这篇关于如何在回发ASP.Net Core后保持标签处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！