MVC 中的 Ajax.BeginForm 仅适用于 IE答案

【问题标题】：Ajax.BeginForm in MVC is working only in IEMVC 中的 Ajax.BeginForm 仅适用于 IE
【发布时间】：2021-11-17 17:43:50
【问题描述】：

我使用 Razor 在我的 Asp.Net MVC 应用程序中创建了一个表。此表中的每一行都是使用 FOREACH 循环动态生成的。每行包含一个带有一个文本字段和一个按钮的 FORM。

代码看起来像，

var trId = 0;
foreach(var item in Model.MyData)
    {
      trId++;
      <tr>
        @using (Ajax.BeginForm("SaveData","User",null, new AjaxOptions {HttpMethod = "POST", InsertionMode = InsertionMode.Replace}, new {id = "form1", role = "form", @class = "form-horizontal"}))
        {
          <td>
            @Html.TextBoxFor(modelitem => item.Name)
          </td>
          <td>
            <button type="submit" title="Update" class="btn btn-primary" id="btnUpdate_@trId" onclick="return Validate(item.Name)">
              Save Data
            </button>
          </td>
        }
      </tr>
    }

这将在 IE 中工作。但它不适用于 Edge 或 Chrome。

当我在 IE 中检查页面时，html 代码会是这样的，

<tr>
  <form class="form-horizontal" id="form1" role="form" action="/User/SaveData" method="post" data-ajax-method="POST" data-ajax="true">
    <td>
      <input name="item.Name" type="text" value="test" />
    </td>
    <td>
      <button title="Update" class="btn btn-primary" id="btnUpdate_1" onclick="return Validate('test')" type="submit">Save Data</button>
    </td>
  </form>
</tr>

但在 Chrome 和 Edge 中，表单不包含文本字段和按钮。

<tr>
  <form class="form-horizontal" id="form1" role="form" action="/User/SaveData" method="post" data-ajax-method="POST" data-ajax="true"></form>
    <td>
      <input name="item.Name" type="text" value="test" />
    </td>
    <td>
      <button title="Update" class="btn btn-primary" id="btnUpdate_1" onclick="return Validate('test')" type="submit">Save Data</button>
    </td>
</tr>

为什么这个 Ajax.BeginForm 在 Edge/Chrome 中不起作用，但在 IE 中却可以正常工作？这个问题和 HTML 的区别有什么关系吗？为什么 html 在 IE 和 Edge 中看起来不一样？

谁能为这个问题提出解决方案？

注意：我在PartialView 中生成此表行。

【问题讨论】：

我看到你把form元素直接放在<tr>上。在 HTML 语法中，tr 下应该是 td 或 th。此外，您为表单设置了相同的 id。请尝试为每个表单元素设置唯一 ID
@LeVu ：我也尝试使用唯一的表单 ID。但我仍然遇到同样的问题。这在 IE 中运行良好。为什么在 IE 和 Edge 中，我们会为相同的 UI 获得 2 个不同的 HTML 代码？
你能把form移动到整个桌子周围吗？
@Rojo ：表头部分在主视图中是静态的。只有部分在 PartialView 中动态生成。前几个块具有此 FORM，其他几个块使用另一个 FORM 并在另一个 PartialView 中定义。因此，无法将此 FORM 移动到围绕整个表格。
此链接可能对您有所帮助stackoverflow.com/questions/5967564/form-inside-a-table

【解决方案1】：

<form> 内不能有表单，但<td> 内可以有表单。

例如。

var trId = 0;
foreach(var item in Model.MyData)
    {
      trId++;
      <tr>
          <td>
          @using (Ajax.BeginForm("SaveData","User",null, new AjaxOptions {HttpMethod = "POST", InsertionMode = InsertionMode.Replace}, new {id = "form1", role = "form", @class = "form-horizontal"}))
          {
            @Html.TextBoxFor(modelitem => item.Name)

            <button type="submit" title="Update" class="btn btn-primary" id="btnUpdate_@trId" onclick="return Validate(item.Name)">
              Save Data
            </button>
          }
          </td>
      </tr>
    }

【讨论】：

谢谢萨德。但是，如果我应用此代码，文本框和按钮都将在一个中。但在表头部分，我们有 2 个单独的，一个用于文本框，第二个用于操作按钮。所以这会产生一些布局问题。