如何在Ajax提交记录保存成功后无刷新拉取最新数据并渲染到表格

实现步骤 #

1. 新增后端列表查询接口 #

先在ProjectController里新增一个接口用来返回最新的项目列表数据：

[HttpGet]
public IActionResult GetProjectList()
{
    // 可根据业务逻辑调整筛选条件，示例为查询所有项目/当前操作ID关联的项目
    var projectList = _context.Projects.ToList();
    // 若仅查询当前操作的项目关联列表，可替换为下方筛选逻辑
    // var projectList = _context.Projects.Where(p=>p.Id == (int)TempData["ProID"]).ToList();
    return Json(projectList);
}

2. 给列表容器加唯一标识 #

在你用于展示记录的表格tbody标签上添加唯一ID，方便后续动态渲染数据：

<tbody id="projectListTbody">
<!-- 列表内容后续通过JS动态生成填充 -->
</tbody>

3. 编写列表拉取与渲染的通用函数 #

在JS代码中新增独立的列表加载函数，页面首次加载和提交成功后都可以复用：

function loadProjectList() {
    $.ajax({
        type: "Get",
        url: '@Url.Action("GetProjectList", "Project")',
        success: function (data) {
            let htmlStr = '';
            // 遍历后端返回的列表数据拼接表格行
            data.forEach(item => {
                htmlStr += `<tr>
                    <td>${item.KhdamatHesabrsee == 1 ? 'حسابرسی' : item.KhdamatHesabrsee ==2 ? 'مالیاتی' : 'منابع انسانی'}</td>
                    <td>${item.MablghGhrardad}</td>
                    <td>${item.ShoroeeProjectDate}</td>
                    <td>${item.PayanProjectDate}</td>
                    <td class="text-center">${item.MashmolArzeshAfzoode ? '<input type="checkbox" checked disabled>' : '<input type="checkbox" disabled>'}</td>
                    <td class="text-center"><!-- 自定义操作按钮可放置在此处 --></td>
                </tr>`;
            });
            // 将拼接好的内容填充到列表容器
            $("#projectListTbody").html(htmlStr);
        }
    });
}
// 页面首次加载时调用，渲染初始列表
$(function(){
    loadProjectList();
});

4. 修改原有提交逻辑，触发列表刷新 #

首先阻止表单按钮的默认提交行为，避免页面跳转刷新，再在提交成功的回调中调用列表加载函数：

$("#btn-send").on('click', function (e) {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();
    $.ajax({
        type: "Post",
        url: '@Url.Action("UpdateSubmitProjectStap2", "Project")',
        data: {
            'KhdamatHesabrsee': $("#KhdamatHesabrsee").val(),
            'MablghGhrardad': $("#MablghGhrardad").val(),
            'ShoroeeProjectDate': $("#ShoroeeProjectDate").val(),
            'PayanProjectDate': $("#PayanProjectDate").val(),
            'MashmolArzeshAfzoode': $("#MashmolArzeshAfzoode").val(),
        }
    }).done(function (res) {
        if (res.status == 'ok') {
            $("#ohsnap").removeClass('hidden').removeClass('alert-danger').addClass('alert-success').html('گام دوم با موفقیت ثبت شد');
            // 提交成功后触发列表刷新
            loadProjectList();
            // 可选：提交成功后清空表单，方便下次输入
            $('form')[0].reset();
        }
        else if (res.status == 'error') {
             $("#divmsg").removeClass('hidden').addClass('alert-danger').html('در ثبت اطلاعات خطایی رخ داده است');
        }
    });
});

注意事项 #

• 如果TempData["ProID"]存在生命周期失效问题，建议替换为Session存储或者前端隐藏域存储，避免查询列表时取不到对应ID
• 字段渲染逻辑可根据实际业务调整，比如日期格式化、枚举值转义、操作按钮绑定事件等

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