asp.net-core - 如何在 Asp.Net Core Razor 选项卡式页面中刷新特定选项卡

Question

我有一个选项卡式 Razor 页面，加载时没有要从服务器检索的数据，为第一个选项卡设置了活动选项卡。但是，当我更新一个选项卡上的数据并将其发布时，我希望页面仅获取该选项卡的数据。到目前为止我所拥有的是

<ul class="nav nav-tabs" id="PTWTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="PTW-tab" data-toggle="tab" href="#PTW" aria-controls="ptw" aria-selected="true" style="width:200px">Permit To Work</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="HazId-tab" data-toggle="tab" href="#HazId" aria-controls="hazid" aria-selected="false" style="width:200px">Hazard Identification</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="GasTest-tab" data-toggle="tab" href="#GasTest" aria-controls="gt" aria-selected="false" style="width:200px">Gas Testing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="IsoCert-tab" data-toggle="tab" href="#IsoCert" aria-controls="isocert" aria-selected="false" style="width:200px">Isolation Certificate</a>
    </li>
</ul>

和 cshtml 是：

public async Task<IActionResult> OnPostIsoCertAsync(int? PTWNo)
    {

        if (!ModelState.IsValid)
        {
            return Page();
        }

        var newIsoCert = await _context.ICContents.FindAsync(PTWNo);

        if (newIsoCert == null)
        {
            return NotFound();
        }

        if (await TryUpdateModelAsync<ICContent>(
                     newIsoCert,
                     "ICContent",
                       c => c.IdICD,
                       c => c.IsoStep,
                       c => c.EquipmentID,
                       c => c.EquipmentDescription,
                       c => c.EnSource,
                       c => c.IsType,
                       c => c.IsMethod,
                       c => c.LockNo,
                       c => c.PreparedBy,
                       c => c.ImplementedBy,
                       c => c.VerifiedBy,
                       c => c.IsStatus))
        {
            await _context.SaveChangesAsync();
            
            return Page();
        }

        return Page();
    }

还有一个 OnGet 过程和 html 来显示数据

标签： asp.net-corerazor-pages

Answer 1

当我更新一个选项卡上的数据并将其发布时，我希望页面仅获取该选项卡的数据。

如果您只想更新特定的选项卡部分内容，正如@Tavershima 所提到的，您可以尝试在 JavaScript 上使用 Ajax 动态呈现一些局部视图。以下简单的演示供您参考。

@page
@model WebGlobalSearch.MenuTabModel
@{
    ViewData["Title"] = "MenuTab";
}

<h1>MenuTab</h1>

<ul class="nav nav-tabs" id="PTWTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="PTW-tab" data-toggle="tab" href="#PTW" aria-controls="ptw" aria-selected="true" style="width:200px">Permit To Work</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="HazId-tab" data-toggle="tab" href="#HazId" aria-controls="hazid" aria-selected="false" style="width:200px">Hazard Identification</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="GasTest-tab" data-toggle="tab" href="#GasTest" aria-controls="gt" aria-selected="false" style="width:200px">Gas Testing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="IsoCert-tab" data-toggle="tab" href="#IsoCert" aria-controls="isocert" aria-selected="false" style="width:200px">Isolation Certificate</a>
    </li>
</ul>

<div class="tab-content">
    <div id="PTW" class="tab-pane fade active show">
        <h3>Permit To Work</h3>
        <br />
        <div class="tab-c">
            <partial name="PTW" />
        </div>
    </div>
    <div id="HazId" class="tab-pane fade">
        <h3>Hazard Identification</h3>
    </div>
    <div id="GasTest" class="tab-pane fade">
        <h3>Gas Testing</h3>
        <br />
        <div class="tab-c">
            <partial name="GasTest" />
        </div>
    </div>
    <div id="IsoCert" class="tab-pane fade">
        <h3>Isolation Certificate</h3>
    </div>
</div>

@Html.AntiForgeryToken()

@section scripts{
    <script>
        function UpdateGasTestFunc() {

            $.ajax({
                type: "POST",
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                url: "MenuTab?handler=UpdateGasTest",
                //data: data,
                success: function (res) {
                    $("#GasTest").find("div.tab-c").html(res);
                }
            });
        }
    </script>
}

OnPostUpdateGasTest 处理程序

public IActionResult OnPostUpdateGasTest()
{
    return Partial("GasTest");
}

部分视图的内容GasTest

Gas Testing Page @DateTime.Now.ToString()


<input type="button" value="Update" id="btn_update" onclick="UpdateGasTestFunc()" />

测试结果

我只是想避免使用 javascript，只更新与我有关的选项卡

在您在问题中描述的场景下，通常如果浏览器用户在没有 JavaScript 的情况下向服务器提交更新的数据，服务器会向浏览器客户端返回新的响应，并且整个页面将被重新呈现，而不仅仅是 html 内容的一部分。

更新：

我想要的是发布，刷新页面并显示我发布的标签

要在页面重新加载后动态重置活动选项卡，您可以参考以下代码片段。

$(function () {
    var active_tab_id = localStorage.getItem('activetab');

    if (active_tab_id != null) {
        //console.log(active_tab_id);
            $('#PTWTab a[id="' + active_tab_id + '"]').tab('show');
    }
           
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        //console.log($(e.target).attr("id")); 
        localStorage.setItem('activetab', $(e.target).attr('id'));
    });
})