Asp.Net MVC中Ajax.BeginForm仅IE生效 Chrome/Edge无法运行问题求助

• 该问题和浏览器渲染出的HTML结构差异直接相关。根据W3C的HTML规范，<tr>标签的合法直接子元素只能是<td>或<th>，不允许直接嵌套<form>标签。
• Chrome、Edge等现代浏览器使用符合标准的Blink内核，检测到非法嵌套时会自动修正结构：提前闭合<form>标签，导致表单内没有任何关联的输入框和提交按钮，点击提交自然不会触发预期的保存逻辑。
• 旧版IE使用Trident内核，对非法HTML结构的容错逻辑不符合W3C标准，不会主动调整<form>的位置，因此表单可以正常包裹输入控件，功能正常。

核心是不同浏览器内核的HTML解析规则不同：

• 旧版IE的Trident内核对HTML语法错误的兼容逻辑是自研的非标准规则，允许在<tr>下直接插入<form>标签，不会主动调整DOM结构。
• 新版Edge、Chrome使用的Blink内核严格遵循W3C的HTML解析规范，遇到不符合嵌套规则的元素时，会自动修正DOM结构以符合规范，所以才会出现<form>被提前闭合的情况。
• 额外补充：你当前代码循环生成的所有表单ID都是form1，重复ID本身也不符合HTML规范，会加剧不同浏览器的解析差异。

以下方案任选其一即可：

方案1：使用HTML5 form属性关联表单元素（改动最小） #

修改Razor代码，保证每个表单ID唯一，给所有表单内的元素新增form属性关联对应表单ID，示例代码：

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 = $"form_{trId}", role = "form", @class = "form-horizontal"}))
        {
            // form标签虽会被提前闭合，但后续元素通过form属性关联即可生效
        }
        <td>
            @Html.TextBoxFor(modelitem => item.Name, new { form = $"form_{trId}" })
        </td>
        <td>
            <button type="submit" title="Update" class="btn btn-primary" id="btnUpdate_@trId" onclick="return Validate(item.Name)" form="form_@trId">
                Save Data
            </button>
        </td>
    </tr>
}

方案2：单表单+JS提交逻辑 #

整个表格外层只套一个表单，点击提交按钮时通过JS获取当前行的输入值，手动发起AJAX请求提交，不需要每行单独生成表单，逻辑更简洁。

方案3：调整布局规避嵌套限制 #

放弃原生table标签，用Flex/Grid布局模拟表格样式，此时没有元素嵌套限制，可以正常在每行外层包裹form标签。

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