分页表单提交异常：仅第一页数据可提交至控制器

你遇到的核心问题是DataTable分页时会将非当前页的表格行从DOM中移除，导致表单提交时只有当前页的表单元素被发送到服务器。而MVC的模型绑定依赖连续的索引（比如[0]、[1]）来识别List类型参数，当非第一页提交时，发送的索引是不连续的（比如第二页是[10]、[11]），模型绑定无法正确解析，因此数据无法正常接收。

推荐使用AJAX提交当前页数据的方式，既能保证只提交当前页内容，又能兼容MVC的模型绑定逻辑，同时避免DOM元素被移除带来的问题。

步骤1：初始化DataTable并保存实例 #

在页面脚本中初始化DataTable时，保存表格实例，方便后续获取当前页行：

// 初始化DataTable并保存实例
var translationsTable = $('#translations-table').DataTable({
    // 你的现有分页、排序等配置，例如：
    paging: true,
    pageLength: 10,
    ordering: false
});

步骤2：拦截表单默认提交，改用AJAX发送当前页数据 #

监听表单提交事件，阻止默认行为，收集当前页的所有表单数据后发送：

$('form').on('submit', function(e) {
    e.preventDefault();
    
    // 获取当前页的所有表格行DOM节点
    var currentPageRows = translationsTable.rows({ page: 'current' }).nodes();
    var formData = new FormData();
    
    // 遍历当前页行中的所有input元素，收集表单数据
    $(currentPageRows).find('input').each(function() {
        var inputName = $(this).attr('name');
        var inputValue = $(this).val();
        formData.append(inputName, inputValue);
    });
    
    // 发送AJAX请求到控制器
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: formData,
        processData: false,
        contentType: false,
        success: function(result) {
            // 提交成功后的处理，例如提示用户
            alert('数据更新成功');
        },
        error: function(xhr) {
            // 错误处理
            console.error('提交失败:', xhr.responseText);
            alert('数据更新失败，请重试');
        }
    });
});

步骤3：保持控制器Action参数不变 #

你的控制器Action无需修改，只要参数类型是对应List模型即可，AJAX发送的表单数据格式和原表单提交一致，MVC能正常绑定：

[HttpPost]
public IActionResult YourSaveAction(List<YourTranslationModel> model)
{
    // 处理当前页提交的数据
    // ...
    return RedirectToAction("Index");
}

如果你的数据量很小，可以修改表单字段的命名规则，让MVC支持非连续索引的模型绑定：

1. 将CSHTML中所有字段的索引从[i]改为唯一标识（比如[Model[i].SId]）：

@Html.HiddenFor(modelItem => Model[i].SId, new { @name = $"[{Model[i].SId}].SId" })
@Html.TextBox($"[{Model[i].SId}].Tr[{j}].TrValue", tr.TrValue, new { @class = "form-control" })

2. 控制器Action参数改为Dictionary<int, YourTranslationModel>（假设SId是int类型）：

[HttpPost]
public IActionResult YourSaveAction(Dictionary<int, YourTranslationModel> model)
{
    // 处理数据
    // ...
}

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