提交BankHoliday记录后视图无法实时显示新数据的技术咨询

在ASP.NET Core项目中，新增BankHoliday记录并调用POST方法后，数据库已成功添加新记录，但视图仍显示更新前的数据。只有重新从菜单选择BankHoliday选项触发HttpGet方法，才能看到更新后的数据。尝试通过Return Redirect跳转到HttpGet，但出现样式问题无法使用，需要无需跳转即可实时展示新数据的解决方案。

原代码 #

Controller代码 #

[HttpGet]
public IActionResult BankHolidaySettings(int DEPT = 0, int YR = 0)
{
    return View(bankHoliday);
}

[HttpPost]
public IActionResult BankHolidaySettings(BankHoliday bankHoliday)
{
    if (ModelState.IsValid)
    {
        id =  _unitOfWork.BankHolidayRepo.AddBankHoliday(bankHolidayToAdd);

        ViewBag.Result = "Saved successfully";
            
        ModelState.Clear();
    }

    return View(bankHoliday);
}

View代码（BankHolidaySettings.cshtml） #

<form asp-controller="Employee"
      asp-action="BankHolidaySettings"
      data-ajax="true" data-ajax-method="POST"
      data-ajax-mode="replace" data-ajax-update="#content"
      class="form-horizontal" role="form"
      data-parsley-validate
      novalidate>
    <table id="holidays" class="table table-bordered table-striped ">
        <thead>
            <tr>
               <td>Date </td>
               <td>Depot No</td>
               <td>Depot </td>
               <td>Department </td>
               <td>Description </td>
               <td class="hidden">Edit</td>
               <td>Delete</td>
            </tr>
       </thead>
       <tbody>
             @foreach (BankHoliday bankHoliday in ViewBag.BankHolidays)
             {
          <tr>
               <td>@bankHoliday.Holidaydate</td>
               <td>@bankHoliday.DepotNo</td>
              <td>@bankHoliday.DepotName</td>
              <td>@bankHoliday.DepartmentName</td>
              <td>
                  @bankHoliday.Description
                </td>
               <td class="hidden"><a href="#"  
        </tr>
        }
        </tbody>
        </table>
<div class="center-block">
    <button type="submit" id="btnsubmit" class="btn btn-primary form-control submit">Save</button>
</div>

<script>
$(document).ready(function () {
        $('#btnsubmit').click(function (e) {
            e.preventDefault(); // Prevent the default form submission
            var formData = $('form').serialize(); // Serialize the form data
             $.ajax({
                type: "POST",
                url: "/Employee/BankHolidaySettings",
                data: formData,
                success: function (response) {
                    
                },
                error: function (error) {
                    // Handle the error response
                }
            });
        });
});
</script>

解决方案 #

1. 修正POST方法，返回更新后的数据集 #

原POST方法仅返回提交的bankHoliday对象，未重新查询最新的银行假日列表，导致ViewBag数据未更新。需要在保存成功后重新获取完整列表：

[HttpGet]
public IActionResult BankHolidaySettings(int DEPT = 0, int YR = 0)
{
    // 获取最新银行假日列表并赋值给ViewBag
    var bankHolidays = _unitOfWork.BankHolidayRepo.GetAllBankHolidays(DEPT, YR);
    ViewBag.BankHolidays = bankHolidays;
    return View();
}

[HttpPost]
public IActionResult BankHolidaySettings(BankHoliday bankHoliday)
{
    if (ModelState.IsValid)
    {
        var id = _unitOfWork.BankHolidayRepo.AddBankHoliday(bankHoliday);
        ViewBag.Result = "Saved successfully";
        ModelState.Clear();
        
        // 保存成功后重新获取最新列表
        var updatedBankHolidays = _unitOfWork.BankHolidayRepo.GetAllBankHolidays(0, 0); // 按需传递参数
        ViewBag.BankHolidays = updatedBankHolidays;
    }
    else
    {
        // 验证失败时也要确保ViewBag有旧数据，避免表格为空
        ViewBag.BankHolidays = _unitOfWork.BankHolidayRepo.GetAllBankHolidays(0, 0);
    }
    return View();
}

2. 统一AJAX提交逻辑，避免冲突 #

原视图同时使用了data-ajax属性和自定义jQuery AJAX，存在逻辑冲突，可选择以下两种方案：

方案一：使用ASP.NET Unobtrusive AJAX（推荐）

移除自定义jQuery AJAX代码，确保项目已引入jquery.unobtrusive-ajax.js，并将表格包裹在data-ajax-update指定的容器中：

<div id="content">
    <form asp-controller="Employee"
          asp-action="BankHolidaySettings"
          data-ajax="true" data-ajax-method="POST"
          data-ajax-mode="replace" data-ajax-update="#content"
          class="form-horizontal" role="form"
          data-parsley-validate
          novalidate>
        <!-- 新增记录的输入字段需补充在此处 -->
        <table id="holidays" class="table table-bordered table-striped ">
            <!-- 表格内容保持不变 -->
        </table>
        <div class="center-block">
            <button type="submit" id="btnsubmit" class="btn btn-primary form-control submit">Save</button>
        </div>
    </form>
</div>

方案二：自定义AJAX动态添加新行

若不想替换整个区域，可让POST方法返回JSON数据，在AJAX成功后动态插入新行：

修改Controller POST方法

[HttpPost]
public IActionResult BankHolidaySettings(BankHoliday bankHoliday)
{
    if (ModelState.IsValid)
    {
        var newHoliday = _unitOfWork.BankHolidayRepo.AddBankHoliday(bankHoliday);
        return Json(new { success = true, holiday = newHoliday, message = "Saved successfully" });
    }
    return Json(new { success = false, message = "Validation failed" });
}

修改视图AJAX代码

<script>
$(document).ready(function () {
    $('#btnsubmit').click(function (e) {
        e.preventDefault();
        var formData = $('form').serialize();
        $.ajax({
            type: "POST",
            url: "/Employee/BankHolidaySettings",
            data: formData,
            success: function (response) {
                if (response.success) {
                    alert(response.message);
                    // 动态插入新行到表格
                    var newRow = `
                        <tr>
                            <td>${response.holiday.Holidaydate}</td>
                            <td>${response.holiday.DepotNo}</td>
                            <td>${response.holiday.DepotName}</td>
                            <td>${response.holiday.DepartmentName}</td>
                            <td>${response.holiday.Description}</td>
                            <td class="hidden"><a href="#"></a></td>
                            <td><!-- 补充删除按钮 --></td>
                        </tr>
                    `;
                    $('#holidays tbody').append(newRow);
                    // 清空表单
                    $('form')[0].reset();
                } else {
                    alert(response.message);
                }
            },
            error: function () {
                alert('保存失败');
            }
        });
    });
});
</script>

3. 注意事项 #

• 确保GetAllBankHolidays方法能正确获取最新数据库记录，避免EF Core上下文缓存问题（必要时可使用AsNoTracking()或重新查询）。
• 视图中需补充新增BankHoliday的输入字段，确保提交的bankHoliday对象数据完整。

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