.NET Core 3.1 Razor Page动态日期表格重载保留已填值方案咨询

1. 更优实现方案 #

• 方案1：前端自主生成表格行，取消服务端拉取Partial的逻辑
  把日期范围计算逻辑迁移到前端实现，用户选择起始日期和天数后，直接对比现有表格的日期条目：已存在的日期行完全保留，超出新天数范围的行删除，不足的新增空白行。全程无服务端请求，原有填写的数值不会被覆盖，性能也更好。
• 方案2：服务端渲染时携带已有值
  如果需要保留服务端生成表格的逻辑，每次点击Set按钮请求Partial时，把当前已填写的表单数据一同传给接口，服务端生成SpcTable实例时，匹配对应日期的已填值赋值，返回的Partial渲染后就自带之前填写的内容，不会丢失。

2. 现有方案保留已填数值的实现方法 #

推荐用前端缓存回填的方案，改动最小，不需要修改服务端代码，只需修改现有点击Set的JQuery逻辑即可，示例代码如下：

$(document).ready(function () {
    $("#load").click(function () {
        // 第一步：重载前缓存所有已填的日期对应数值
        const valueCache = {};
        $('#spc_data_table table tr').each(function() {
            const date = $(this).find('input[name*="tableDate"]').val();
            const inputValue = $(this).find('input[name*="tableValue"]').val();
            if (date && inputValue) {
                valueCache[date] = inputValue;
            }
        });

        // 原有请求逻辑
        var startDate = $("#StartDate").val();
        var duration = $('#Duration').val();
        var turl = '/SPC/Index?handler=CarPartial&StartDate=' + startDate + '&Duration=' + duration;        
        
        // 第二步：Partial加载完成后回填缓存值
        $('#spc_data_table').load(turl, function() {
            $('#spc_data_table table tr').each(function() {
                const currentDate = $(this).find('input[name*="tableDate"]').val();
                if (valueCache[currentDate]) {
                    $(this).find('input[name*="tableValue"]').val(valueCache[currentDate]);
                }
            });
        });
    });
});

这个方案的逻辑是重载Partial前先把所有已经填写的「日期-数值」对存在临时变量里，等新的表格渲染完成后，按日期匹配把原来填的值填回去，原有逻辑几乎不用改，就能解决数值丢失的问题。

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