如何在回发 ASP.Net Core 后保持选项卡处于活动状态

Posted 2023-04-13

【中文标题】如何在回发 ASP.Net Core 后保持选项卡处于活动状态

【英文标题】：How to keep tab active after postback ASP.Net Core

【发布时间】：2018-04-08 06:15:45

【问题描述】：

我有一个视图，其中包含一组选项卡，每个选项卡都呈现不同的局部视图。在阅读了这些引导选项卡的文档和 W3Schools 示例后，我无法找到一种方法使活动选项卡在回发时保持活动状态。我看到的所有示例都使用旧版本的 .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 等也是如此。每个选项卡都有自己的表单和提交模型的按钮，当页面在提交后重新加载时，我可以在两个选项卡之间切换并查看我的图表渲染得很好，但是在我发布任何时候它都会使第一个选项卡保持活动状态。

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

那么，有了所提供的代码，我怎样才能使您在单击提交时查看的当前选项卡成为回发时处于活动状态的选项卡？

【问题讨论】：

您从表单提交的 HttpPost 操作方法返回什么？

@Shyju return View(model); 只需根据我的选择列表值使用更新的模型刷新页面。

您可能需要考虑使用像 VueJS 这样的 javascript 框架。他们使这类问题变得微不足道。

@MattLaCrosse 添加这样的东西的开销是多少？是否像包含 Nuget 包和使用脚本或其他东西一样简单？如果可以，您能否提供更多信息或示例？

@Mkalafut 如果您使用的是 NodeJS，它通常就像在构建设置中包含正确的库/配置一样简单。然后根据需要使用框架。例如，我的 ASP.NET Core Webapp 使用 Aurelia 作为带有 Webpack 的前端 UI。 .NET 用于 API 后端。

【参考方案1】：

当用户提交表单时，您应该关注P-R-G pattern。因此，保存后，您应该返回一个重定向响应，该响应发出一个全新的 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>

【讨论】：

所以基本上我只需要将我的 Return 更改为 RedirectToAction 并传入这个字符串名称作为我制作标签 ID 的内容，然后在视图中我的 javascript 函数将从该值知道标签变为活动状态？

是的。每当您提交表单时，您应该遵循 PRG 模式，阅读答案中的链接，这解释了我们为什么需要它。

您可以通过使用?t=profile 之类的查询字符串导航到您的页面来测试它，假设您的标签标记与我在答案中的标记一样。 （ul 的 id 为“myTabs”）

明白。谢谢，我试试看！

我假设每个选项卡都有自己的表单（配置文件/设置等），您可能希望拥有自己的操作方法来处理表单提交。如果您从所有选项卡提交到单个操作方法，您可以在每个表单中包含一个隐藏元素，其值为我们需要查询字符串 (<input type="hidden" name="tab" value="profile" />) 并添加一个名为 tab 的新参数到您的 http发布操作方法并使用它来生成您的查询字符串 (return RedirectToAction("Index",new t=tab);)