ASP.NET MVC中模态框内提交按钮无响应问题求助

嘿，我帮你排查了代码里的问题，找到了几个可能导致提交按钮没反应的原因，咱们一步步来解决：

1. HTML结构错误（最可能的核心原因） #

你在<tbody>标签里直接放了<form>元素，但根据HTML规范，<tbody>的直接子元素只能是<tr>。浏览器会自动修正这种无效结构，把表单移到<table>外面，这就导致模态框里的提交按钮和表单彻底失去了关联，点击自然没反应。

快速修复（适配你当前的多模态框写法） #

把所有表单和模态框移到<table>外面，避免破坏表格的结构规则：

<div class="card-body">
  <table id="datatablesSimple">
    <thead>
      <tr style="background-color:gray">
        <th>No</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </tfoot>
    <tbody>
      @{ var stt = 1;}
      @foreach (var item in ViewBag.List)
      {
        var itemName = "#exampleModalss" + item.id_category;
        <tr>
          <td>@stt</td>
          <td>@item.name</td>
          <td>
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="@itemName">Edit</button>
          </td>
        </tr>
        stt++;
      }
    </tbody>
  </table>
</div>

<!-- 把所有模态框和表单移到表格外面 -->
@foreach (var item in ViewBag.List)
{
  var itemName1 = "exampleModalss" + item.id_category;
  <form action="/Category/edit" method="post">
    <div class="modal fade" id="@itemName1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit Category Book</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div id="resultss" class="modal-body">
            <div class="row">
              <div class="col">
                <div class="">
                  <label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Name Category: </label>
                  <input class="form-control" type="text" id="name" name="name" value="@item.name">
                  <input class="form-control" type="hidden" id="id_category" name="id_category" value="@item.id_category">
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button style="width:100px" type="submit" class="btn btn-primary">Edit</button>
          </div>
        </div>
      </div>
    </div>
  </form>
}

更优方案（单模态框+JS动态填充） #

生成多个模态框会增加DOM体积，更推荐只用一个模态框，点击Edit按钮时用JS把对应数据填进去：

<div class="card-body">
  <table id="datatablesSimple">
    <!-- 表头、表脚不变 -->
    <tbody>
      @{ var stt = 1;}
      @foreach (var item in ViewBag.List)
      {
        <tr>
          <td>@stt</td>
          <td>@item.name</td>
          <td>
            <button type="button" class="btn btn-danger edit-btn" data-bs-toggle="modal" data-bs-target="#exampleModal" data-id="@item.id_category" data-name="@item.name">Edit</button>
          </td>
        </tr>
        stt++;
      }
    </tbody>
  </table>
</div>

<!-- 单个复用的模态框 -->
<form action="/Category/edit" method="post">
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Edit Category Book</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col">
              <div class="">
                <label for="category-name" class="col-form-label" style="font-weight:bold;width : 140px">Name Category: </label>
                <input class="form-control" type="text" id="category-name" name="name">
                <input class="form-control" type="hidden" id="category-id" name="id_category">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button style="width:100px" type="submit" class="btn btn-primary">Edit</button>
        </div>
      </div>
    </div>
  </div>
</form>

<script>
// 绑定Edit按钮点击事件，填充模态框数据
document.querySelectorAll('.edit-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const categoryId = this.dataset.id;
    const categoryName = this.dataset.name;
    document.getElementById('category-id').value = categoryId;
    document.getElementById('category-name').value = categoryName;
  });
});
</script>

2. 其他需要检查的细节 #

• DAO层空引用防护：你的DAO代码里最好加个判断，避免找不到分类时出现空引用错误：

  public void edit(Category category)
  {
    var result = myDb.categories.SingleOrDefault(c => c.id_category == category.id_category);
    if(result != null) // 新增判断
    {
      result.name = category.name;
      myDb.SaveChanges();
    }
  }
  

• 浏览器控制台排查：按F12打开开发者工具，切换到Console标签，看看有没有JS报错（比如Bootstrap模态框初始化失败、DOM元素找不到等），这些也可能导致按钮无响应。
• 路由有效性：确保/Category/edit的路由能正确映射到你的CategoryController的edit方法（你当前的代码标注了[HttpPost]，这点是对的）。

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