MVC中提交经JQuery处理的临时HTML表格的替代方案咨询

嘿，这个问题我太有共鸣了——硬编码处理临时表格提交确实越写越乱，尤其是当表格结构复杂或者需要频繁修改的时候。下面分享几个我在项目里用过的、更有条理的替代方案，覆盖你提到的JQuery、Controller和Model全环节：

核心思路是用ViewModel来映射临时表格的结构，让前端数据序列化和后端接收都更规范，完全告别硬编码拼接。

第一步：定义ViewModel #

先在后端对应表格结构创建ViewModel类，包含验证特性还能顺便做数据校验：

public class TempTableRowViewModel
{
    [Required(ErrorMessage = "请输入商品名称")]
    public string ItemName { get; set; }

    [Range(1, int.MaxValue, ErrorMessage = "数量必须大于0")]
    public int Quantity { get; set; }

    [Range(0.01, double.MaxValue, ErrorMessage = "价格必须大于0")]
    public decimal Price { get; set; }
}

public class TempTableSubmitViewModel
{
    public List<TempTableRowViewModel> Rows { get; set; } = new List<TempTableRowViewModel>();
}

第二步：前端JQuery整理并提交数据 #

不用手动拼表单字段，而是提取表格行数据整理成ViewModel对应的结构，序列化后提交：

// 提取表格所有行的数据
function collectTableData() {
    const rows = [];
    $('.temp-table-row').each(function() {
        const $row = $(this);
        rows.push({
            ItemName: $row.find('[data-field="ItemName"]').val().trim(),
            Quantity: parseInt($row.find('[data-field="Quantity"]').val()),
            Price: parseFloat($row.find('[data-field="Price"]').val())
        });
    });
    return { Rows: rows };
}

// 提交请求
$('#submit-btn').on('click', function() {
    const tableData = collectTableData();
    
    $.ajax({
        url: '/TempTable/SubmitData',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(tableData),
        success: function(res) {
            if (res.success) {
                alert('提交成功！');
            } else {
                alert('提交失败：' + res.errors.join('；'));
            }
        }
    });
});

第三步：Controller接收并处理 #

直接接收ViewModel，框架会自动完成序列化，还能利用ModelState做校验：

[HttpPost]
public IActionResult SubmitData(TempTableSubmitViewModel model)
{
    if (!ModelState.IsValid)
    {
        var errors = ModelState.Values
            .SelectMany(v => v.Errors)
            .Select(e => e.ErrorMessage)
            .ToList();
        return Json(new { success = false, errors });
    }

    // 这里处理业务逻辑，比如保存到数据库
    _tempTableService.SaveRows(model.Rows);
    
    return Json(new { success = true });
}

如果是Asp.Net Core项目，可以用TagHelper自动生成绑定ViewModel的表单字段，连前端的字段name都不用手动写：

视图层代码 #

<table class="table">
    <thead>
        <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Rows.Count; i++)
        {
            <tr class="temp-table-row">
                <td><input asp-for="Rows[i].ItemName" class="form-control" data-field="ItemName" /></td>
                <td><input asp-for="Rows[i].Quantity" type="number" class="form-control" data-field="Quantity" /></td>
                <td><input asp-for="Rows[i].Price" type="number" step="0.01" class="form-control" data-field="Price" /></td>
            </tr>
        }
    </tbody>
</table>

这种方式下，输入框的name会自动生成为Rows[0].ItemName格式，提交时直接用$('form').serialize()就能完成数据序列化，不用手动提取每行数据。

如果项目里经常需要处理这类临时表格，可以封装一个通用插件，避免重复写提取和提交逻辑：

$.fn.tempTableHandler = function(options) {
    const defaults = {
        rowSelector: '.temp-table-row',
        fieldAttr: 'data-field',
        submitUrl: '',
        onSuccess: function() {},
        onError: function() {}
    };
    const settings = $.extend({}, defaults, options);

    // 提取表格数据
    this.getTableData = function() {
        const rows = [];
        $(settings.rowSelector).each(function() {
            const rowData = {};
            $(this).find(`[${settings.fieldAttr}]`).each(function() {
                const field = $(this).attr(settings.fieldAttr);
                rowData[field] = $(this).val();
            });
            rows.push(rowData);
        });
        return { Rows: rows };
    };

    // 提交表格数据
    this.submit = function() {
        const data = this.getTableData();
        $.ajax({
            url: settings.submitUrl,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: settings.onSuccess,
            error: settings.onError
        });
    };

    return this;
};

// 使用示例
const myTable = $('#temp-table').tempTableHandler({
    submitUrl: '/TempTable/SubmitData',
    onSuccess: function(res) {
        alert('提交成功！');
    },
    onError: function(err) {
        alert('提交失败，请稍后重试');
    }
});

// 点击提交按钮时调用
$('#submit-btn').on('click', function() {
    myTable.submit();
});

• 前端验证：配合JQuery Validate插件在提交前做前端校验，减少无效请求
• 动态行处理：如果允许用户添加/删除行，确保动态生成的行也符合ViewModel绑定格式（比如Asp.Net Core里用EditorTemplate来生成行模板）
• 数据脱敏：如果涉及敏感数据，提交前要做必要的加密处理

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