ASP.NET Core弹窗表单无法稳定向数据库新增数据问题求助

我仔细看了你的代码，发现几个关键问题导致了Save按钮偶尔才成功的情况，咱们一个个来修复：

1. 模态框ID错误导致DOM混乱 #

你的_CreatePartial视图里，模态框的ID多了个#符号，这会导致每次点击Create按钮时，页面上都会新增一个重复的模态框DOM元素，而不是替换旧的。当你点击Save时，JS可能找到的是旧的无效表单，直接导致请求失败。

修改_CreatePartial.cshtml的模态框ID：

<!-- 把#addEmployee改成addEmployee -->
<div class="modal fade" id="addEmployee">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- 同样去掉# -->
        <h4 class="modal-title" id="addEmployeeLabel">Add Category</h4>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span> <!-- 替换成标准的关闭符号，避免显示异常 -->
        </button>
      </div>
      <!-- 其他部分后续修改 -->
    </div>
  </div>
</div>

2. 表单配置缺失：POST方法、正确路由与防伪造令牌 #

你的表单没有指定method="post"，action还是硬写的Create，更重要的是缺少ASP.NET Core要求的防伪造令牌——这几乎是大部分请求失败的核心原因！

修改_CreatePartial.cshtml里的表单：

<!-- 使用ASP.NET Core标签助手生成正确的路由，指定POST方法 -->
<form asp-action="Create" asp-controller="Category" method="post">
  <!-- 添加防伪造令牌，必填项，否则POST请求会被拦截 -->
  @Html.AntiForgeryToken()
  <div class="form-group">
    <label asp-for="CategoryName"></label>
    <input asp-for="CategoryName" class="form-control" />
    <span asp-validation-for="CategoryName" class="text-danger"></span>
  </div>
</form>

3. JS请求未携带防伪造令牌 #

你的site.js里用$.post发送请求，但没有携带防伪造令牌，直接触发了ASP.NET Core的安全验证拦截，导致请求被拒绝。

修改site.js的POST请求逻辑：

PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
  var form = $(this).parents('.modal').find('form');
  var actionUrl = form.attr('action');
  // 获取页面中的防伪造令牌
  var antiForgeryToken = $('input[name="__RequestVerificationToken"]').val();
  var sendData = form.serialize();
  // 将令牌追加到请求数据中
  sendData += '&__RequestVerificationToken=' + antiForgeryToken;
  
  $.post(actionUrl, sendData)
  .done(function (data) {
    var modal = PlaceHolderElement.find('.modal');
    modal.modal('hide');
    // 模态框完全关闭后清空占位符，避免DOM重复
    modal.on('hidden.bs.modal', function () {
      PlaceHolderElement.empty();
    });
    // 保存成功后刷新页面，展示新增数据
    if (data.success) {
      window.location.reload();
    }
  })
  .fail(function(xhr, status, error) {
    // 添加错误提示，方便调试
    alertify.error('保存失败：' + error);
  });
})

4. 控制器Post方法补充验证与正确返回逻辑 #

你的Post Create方法没有检查模型有效性，返回PartialView还会导致DOM重复。应该先验证模型，再返回JSON信号让JS处理后续逻辑。

修改CategoryController的Post Create方法：

[HttpPost]
[ValidateAntiForgeryToken] // 显式启用防伪造令牌验证
public IActionResult Create(Category ca)
{
  if (ModelState.IsValid) // 先检查模型验证是否通过
  {
    _db.Category.Add(ca);
    _db.SaveChanges();
    TempData["save"] = "Category added successfully!";
    // 返回JSON告知前端保存成功
    return Json(new { success = true });
  }
  // 验证失败时返回PartialView，显示错误信息
  return PartialView("_CreatePartial", ca);
}

最后测试 #

做完这些修改后，你应该能稳定实现数据保存了：

• 点击Create按钮会弹出唯一的模态框
• 输入内容后点击Save，请求会携带必要的验证信息，稳定写入数据库
• 页面刷新后会显示新增的分类，同时弹出成功提示

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