.NET MVC中jQuery Ajax POST时浏览器缓存表单数据如何解决？

以下是几个非hacky、低错误率的解决方案，无需手动清空每个字段：

方案1：利用autocomplete分组隔离填充数据 #

给每个标签页的表单设置唯一的autocomplete分组标识，让浏览器按分组存储填充数据，避免跨标签页混淆：

<!-- 服务器端生成标签页表单时，添加唯一的分组值 -->
<form autocomplete="section-tab-@Model.UniqueTabId">
    <input type="text" name="FirstName" />
    <input type="text" name="LastName" />
    <!-- 其他表单字段 -->
    <button class="delete-tab">删除标签页</button>
</form>

当删除标签页后，新生成的标签页会使用全新的UniqueTabId对应的分组，浏览器不会将旧标签页的填充数据应用到新分组的表单中。如果不需要任何自动填充，也可以直接给表单设置autocomplete="off"，但分组方式更友好，能保留用户正常的自动填充需求。

方案2：动态字段前缀（推荐，适配.NET MVC模型绑定） #

通过给每个标签页的表单字段添加动态索引前缀，让新旧标签页的字段名完全不同，从根源避免浏览器混淆填充：
服务器端局部视图代码（Razor）：

@model List<TabFormViewModel>
@{
    for (int tabIndex = 0; tabIndex < Model.Count; tabIndex++)
    {
        <div class="tab-pane" id="tab-@tabIndex">
            <form>
                @* 利用TextBoxFor生成带索引前缀的字段名，如[0].FirstName *@
                @Html.TextBoxFor(m => m[tabIndex].FirstName, new { @class = "form-control" })
                @Html.TextBoxFor(m => m[tabIndex].LastName, new { @class = "form-control" })
                <!-- 其他表单字段 -->
                <button class="delete-tab" data-tab-index="@tabIndex">删除标签页</button>
            </form>
        </div>
    }
}

删除标签页2后，新的标签页集合索引变为0和1，对应字段名是[0].FirstName（原标签页1）和[1].FirstName（原标签页3），和旧标签页2的[1].FirstName完全不同，浏览器不会自动填充旧数据，同时.NET MVC的模型绑定能正常解析这些带索引的字段。

方案3：替换DOM后调用表单重置 #

在Ajax请求完成并替换标签区域后，调用原生表单的reset()方法，将表单恢复到初始状态（即局部视图返回的空值状态）：

$('.delete-tab').on('click', function(e) {
    e.preventDefault();
    const tabId = $(this).data('tab-id');
    $.post('/Tabs/DeleteTab', { tabId: tabId }, function(partialView) {
        $('#tab-container').empty().html(partialView);
        // 遍历所有标签页的表单并重置
        $('#tab-container .tab-pane form').each(function() {
            this.reset();
        });
    });
});

form.reset()是浏览器原生方法，会自动清除所有表单字段的用户输入和浏览器自动填充内容，无需手动遍历每个字段，简洁高效且兼容性好。

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