.Net Core 3.1 使用jQuery Unobtrusive AJAX Post提交后表单未加载新ViewModel问题

你当前使用的是异步AJAX提交表单，没有配置AJAX请求成功后的内容更新规则，所以服务器返回的新页面内容没有被替换到当前页面上，自然看不到更新后的数值。你已经添加的ModelState.Clear()是正确的，不需要改动。

步骤1：添加更新容器并配置AJAX属性 #

给你的Razor页面添加承载待更新内容的容器，同时给form标签补充两个Unobtrusive AJAX专属属性，指定异步请求返回内容的更新位置和更新模式：

@model TestApp.ViewModels.EmployeeViewModel
<!-- 新增待更新容器 -->
<div id="updateContainer">
<form method="post"
      data-ajax="true"
      data-ajax-method="post"
      data-ajax-url="@Url.Action("Detail", "Employee")"
      <!-- 新增两个配置项 -->
      data-ajax-update="#updateContainer"
      data-ajax-mode="replace">

    <input asp-for="EmployeeFirstName" />
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

步骤2：确认静态资源引入正确 #

确保页面已经按顺序引入了依赖的JS文件，顺序不能颠倒：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>

你当前POST接口返回的是完整View，会把页面的其他冗余内容也一起返回，建议把表单部分单独抽为分部视图，POST接口返回分部视图，减少不必要的内容传输：

[HttpPost]
public IActionResult Detail(EmployeeViewModel employeeViewModel)
{
    employeeViewModel.EmployeeFirstName = "Brian";
    ModelState.Clear();
    // 返回单独的表单分部视图
    return PartialView("_EmployeeForm", employeeViewModel);
}

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