.NET 6中如何更新局部视图外的TotalHours字段？

你遇到的核心问题是TempData不适合AJAX异步场景：TempData依赖Session存储，页面加载后@TempData["Total"]就变成了静态文本，后台设置后前端不会自动更新；同时TempData的读写机制（默认读取一次后标记删除）可能干扰局部视图的正常返回，导致表格刷新失败。

以下是三种可行的解决方案，按推荐程度排序：

方案一：返回JSON同时携带表格HTML和总工时（最推荐） #

后台一次性返回表格HTML和总工时，前端分别处理两部分内容，逻辑清晰且无依赖问题。

控制器代码修改 #

将返回类型改为JsonResult，先渲染局部视图为字符串，再和总工时一起封装返回：

[HttpPost]
public async Task<JsonResult> GetRows(Guid? cust, Guid? task, int? workType, int? weekFrom, int? weekTo, int? yearFrom, int? yearTo,
    string startDate = "", string endDate = "", string search = "",string sortName = "", string sortDir = "")
{
    var model = new List<TimeEntryViewModel>();
    try
    {
        // 原有筛选、映射、排序逻辑保持不变...
        
        // 简化求和计算
        var totalHours = Math.Round(model.Sum(m => m.TotalHours), 2);

        // 将局部视图渲染为HTML字符串
        var partialView = PartialView("_entryRows", model);
        using var sw = new StringWriter();
        var viewContext = new ViewContext(ControllerContext, partialView, ViewData, TempData, sw, new HtmlHelperOptions());
        await partialView.ExecuteAsync(viewContext);
        var tableHtml = sw.ToString();

        // 返回包含表格HTML和总工时的JSON
        return Json(new { TableHtml = tableHtml, TotalHours = totalHours });
    }
    catch (Exception e)
    {
        _logger.LogError(e.Message, e);
        return Json(new { TableHtml = "", TotalHours = 0 });
    }
}

前端AJAX修改 #

调整AJAX回调逻辑，分别更新表格和总工时字段：

// 示例AJAX请求（根据你的实际触发逻辑调整参数收集部分）
function loadFilteredRows() {
    var filterData = {
        cust: $('#customerDropDown').val(),
        task: $('#tasksDropDown').val(),
        workType: $('#workTypesDropDown').val(),
        search: $('#searchBox').val(),
        // 其他筛选参数...
    };

    $.ajax({
        url: '/YourControllerName/GetRows',
        type: 'POST',
        data: filterData,
        success: function (response) {
            // 更新表格内容
            $('#searchFilterResult').html(response.TableHtml);
            // 更新总工时显示
            $('#totalHours').text('Total Hours: ' + response.TotalHours);
        }
    });
}

方案二：局部视图嵌入隐藏总工时，前端提取更新 #

如果不想修改控制器返回类型，可以把总工时放到局部视图的隐藏元素中，前端更新表格后读取该值。

控制器代码修改 #

去掉TempData，改用ViewBag传递总工时：

// 原有逻辑不变...
var totalHours = Math.Round(model.Sum(m => m.TotalHours), 2);
ViewBag.TotalHours = totalHours; // 传递到局部视图
return PartialView("_entryRows", model);

局部视图修改 #

在局部视图末尾添加隐藏元素存储总工时：

@using TimeLogger.Core.Enums
@using TimeLogger.ViewModels
@model List<TimeEntryViewModel>

@foreach(var entry in Model)
{
    <!-- 原有表格行代码不变... -->
}

<!-- 添加隐藏元素存储总工时 -->
<span id="hiddenTotalHours" style="display: none;">@ViewBag.TotalHours</span>

前端AJAX修改 #

更新表格后读取隐藏元素的值，同步更新外部总工时字段：

$.ajax({
    url: '/YourControllerName/GetRows',
    type: 'POST',
    data: filterData,
    success: function (html) {
        $('#searchFilterResult').html(html);
        // 读取隐藏值并更新总工时
        var total = $('#hiddenTotalHours').text();
        $('#totalHours').text('Total Hours: ' + total);
    }
});

方案三：前端直接计算总工时（无需后台改动） #

如果数据量不大，可以在前端遍历表格的工时单元格，自行求和计算总工时：

$.ajax({
    url: '/YourControllerName/GetRows',
    type: 'POST',
    data: filterData,
    success: function (html) {
        $('#searchFilterResult').html(html);
        
        // 遍历表格第4列（TotalHours列）求和
        var totalHours = 0;
        $('#searchFilterResult tr td:nth-child(4)').each(function() {
            var hours = parseFloat($(this).text());
            if (!isNaN(hours)) {
                totalHours += hours;
            }
        });
        // 保留两位小数
        totalHours = Math.round(totalHours * 100) / 100;
        $('#totalHours').text('Total Hours: ' + totalHours);
    }
});

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