MVC Core中解决分页触发自动切换至首个标签视图的问题

在MVC Core中实现了带分页的标签视图，用于展示两类不同记录。当前功能整体正常，但存在一个问题：点击第二个标签的分页按钮时，页面重载后会自动切换回第一个标签，需要手动切换至第二个标签才能查看对应分页内容。希望点击对应标签的分页时，能直接显示该标签视图。

解决方案 #

1. 修改Controller，添加激活标签参数 #

在List方法中新增activeTab参数，用于接收当前激活的标签，并将其存入ViewBag供前端使用，同时简化冗余的判断逻辑：

public async Task<IActionResult> List(int? page, int? pagePast, string activeTab = "presentRecord")
{
    var pageNumber = page ?? 1;
    var pageNumberPast = pagePast ?? 1;
    
    XCardViewModel viewModel = await _mediator.Send(new GetXQuery());
    ViewBag.presentPageCount = viewModel.X;
    
    XCardViewModel pastViewModel = await _mediator.Send(new GetPastXQuery());
    ViewBag.pastPageCount = pastViewModel.PastX;
    
    // 直接生成分页列表，无需冗余判断
    ViewBag.PageList = viewModel.X.ToPagedList(pageNumber, 5);
    ViewBag.PastPageList = pastViewModel.PastX.ToPagedList(pageNumberPast, 5);
    
    // 传递当前激活的标签标识
    ViewBag.ActiveTab = activeTab;
    
    return View(viewModel);
}

2. 修正前端标签内容容器结构 #

将两类记录分别放入对应ID的容器中，并添加city类，确保openTab函数能正确控制显示隐藏；同时修改分页链接，携带当前激活标签的参数：

<div class="tabbarClass">
    <a class="card" href="javascript:void(0)" onclick="openTab(event, 'presentRecord');">
        <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding w3-border-blue">
            <h2>Current Records</h2>
        </div>
    </a>
    <a class="card" href="javascript:void(0)" onclick="openTab(event, 'pastRecord');">
        <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">
            <h2>Past Records</h2>
        </div>    
    </a>  
</div>

<!-- 当前记录容器 -->
<div id="presentRecord" class="city">
    @foreach (var item in ViewBag.PageList)
    {
        @item.Header
    }
    <div id="paginationOrder">
        @Html.PagedListPager( (IPagedList)ViewBag.PageList, page => Url.Action("List", new { page, activeTab = "presentRecord" }), new PagedListRenderOptions {   })
    </div>
</div>

<!-- 历史记录容器（默认隐藏） -->
<div id="pastRecord" class="city" style="display:none;">
    @foreach (var item in ViewBag.PastPageList)
    {
        @item.Header
    }
    <div id="pastpaginationOrder">
        @Html.PagedListPager( (IPagedList)ViewBag.PastPageList, pagePast => Url.Action("List", new { pagePast, activeTab = "pastRecord" }), new PagedListRenderOptions {   })
    </div>
</div>

3. 修改JavaScript，页面加载时自动激活对应标签 #

添加页面加载逻辑，根据ViewBag传递的ActiveTab自动激活目标标签，同时简化分页显示的判断逻辑：

<script>
    var presentPage = '@ViewBag.presentPageCount.Count';
    const pageModal = document.querySelector("#paginationOrder");     
    if(presentPage <= 5){
        pageModal.style.display = "none";
    }

    var pastPage = '@ViewBag.pastPageCount.Count';
    const pastpageModal = document.querySelector("#pastpaginationOrder");
    if (pastPage <= 5) {
        pastpageModal.style.display = "none";
    }
    
    function openTab(evt, tableID) {
        var i, x, tablinks;
        x = document.getElementsByClassName("city");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" w3-border-blue", "");
        }
        document.getElementById(tableID).style.display = "block";
        evt.currentTarget.firstElementChild.className += " w3-border-blue";
    }

    // 页面加载时自动激活对应标签
    window.onload = function() {
        var activeTab = '@ViewBag.ActiveTab';
        if(activeTab) {
            // 模拟点击对应标签元素
            var tabElement = document.querySelector(`a[onclick="openTab(event, '${activeTab}')"]`);
            if(tabElement) {
                tabElement.click();
            }
        }
    }
</script>

内容的提问来源于stack exchange，提问作者i13k32