ASP.NET MVC含循环表单提交问题：传递模型列表至Post方法

1. 基础模型与ViewModel设计 #

首先得确保你的模型结构能承载列表数据，这里我们先定义业务模型和对应的ViewModel：

// 对应Excel单条记录的业务模型
public class ExcelRecord
{
    public int Id { get; set; } // 必须有唯一标识，用于删除和模型跟踪
    public string Name { get; set; }
    public decimal Amount { get; set; }
    // 根据你的Excel列添加其他属性
}

// 视图专用ViewModel，包装记录列表
public class ExcelRecordsViewModel
{
    public List<ExcelRecord> Records { get; set; } = new List<ExcelRecord>();
}

2. 从Excel加载数据到模型列表 #

在Controller的Get方法里实现Excel读取逻辑（这里用EPPlus举例，你可以替换成其他库）：

public ActionResult Index()
{
    var viewModel = new ExcelRecordsViewModel();
    
    // 读取Excel文件的示例逻辑
    using (var package = new ExcelPackage(new FileInfo(Server.MapPath("~/Content/YourExcelFile.xlsx"))))
    {
        var worksheet = package.Workbook.Worksheets.First();
        int rowCount = worksheet.Dimension.Rows;
        
        // 从第二行开始读取（假设第一行是表头）
        for (int row = 2; row <= rowCount; row++)
        {
            viewModel.Records.Add(new ExcelRecord
            {
                Id = row - 1, // 临时ID，实际可用数据库自增ID
                Name = worksheet.Cells[row, 1].Text,
                Amount = decimal.TryParse(worksheet.Cells[row, 2].Text, out var amount) ? amount : 0
                // 其他属性赋值，注意处理空值
            });
        }
    }
    
    return View(viewModel);
}

3. 视图中循环渲染表单控件（关键步骤） #

要让MVC模型绑定正确识别列表项，不能用foreach循环，必须用带索引的for循环或者EditorTemplate，确保生成的name属性是Records[0].Name这类格式。

方法一：用for循环直接渲染 #

@model ExcelRecordsViewModel

@using (Html.BeginForm("SaveRecords", "Home", FormMethod.Post))
{
    <table border="1">
        <thead>
            <tr>
                <th>名称</th>
                <th>金额</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.Records.Count; i++)
            {
                <tr>
                    <td>
                        @Html.HiddenFor(m => m.Records[i].Id)
                        @Html.TextBoxFor(m => m.Records[i].Name, new { @class = "form-control" })
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.Records[i].Amount, new { @class = "form-control" })
                    </td>
                    <td>
                        @* 同步删除按钮 *@
                        @Html.ActionLink("删除", "DeleteRecord", new { id = Model.Records[i].Id }, new { @class = "btn btn-danger" })
                    </td>
                </tr>
            }
        </tbody>
    </table>
    
    <button type="submit" class="btn btn-primary mt-3">保存所有修改</button>
}

方法二：用EditorTemplate（更优雅的复用方式） #

1. 在Views/Shared/EditorTemplates文件夹下创建ExcelRecord.cshtml：

@model ExcelRecord

<tr>
    <td>
        @Html.HiddenFor(m => m.Id)
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
    </td>
    <td>
        @Html.TextBoxFor(m => m.Amount, new { @class = "form-control" })
    </td>
    <td>
        <button type="button" class="btn btn-danger delete-btn" data-id="@Model.Id">删除</button>
    </td>
</tr>

2. 主视图中用EditorFor渲染整个列表：

@model ExcelRecordsViewModel

@using (Html.BeginForm("SaveRecords", "Home", FormMethod.Post))
{
    <table border="1">
        <thead>
            <tr>
                <th>名称</th>
                <th>金额</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @Html.EditorFor(m => m.Records)
        </tbody>
    </table>
    
    <button type="submit" class="btn btn-primary mt-3">保存所有修改</button>
}

4. Post方法接收模型列表 #

Controller中直接接收ViewModel即可，MVC会自动把表单数据绑定到列表：

[HttpPost]
public ActionResult SaveRecords(ExcelRecordsViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        // 这里处理保存逻辑：比如更新数据库、重新生成Excel等
        // viewModel.Records就是用户修改后的所有记录
        return RedirectToAction("Index");
    }
    
    // 验证失败，返回视图保留用户输入
    return View("Index", viewModel);
}

5. 删除功能实现 #

推荐用AJAX异步删除提升用户体验，同步删除也可以直接用ActionLink。

AJAX异步删除（推荐） #

在主视图中添加脚本：

@section Scripts {
    <script>
        $(document).ready(function() {
            $('.delete-btn').click(function() {
                if (confirm("确定要删除这条记录吗？")) {
                    var recordId = $(this).data('id');
                    var $row = $(this).closest('tr');
                    
                    $.ajax({
                        url: '@Url.Action("DeleteRecord", "Home")',
                        type: 'POST',
                        data: { id: recordId },
                        success: function(response) {
                            if (response.success) {
                                $row.fadeOut(function() { $(this).remove(); });
                            } else {
                                alert("删除失败：" + response.message);
                            }
                        },
                        error: function() {
                            alert("网络错误，请重试");
                        }
                    });
                }
            });
        });
    </script>
}

对应的Controller方法：

[HttpPost]
public JsonResult DeleteRecord(int id)
{
    try
    {
        // 这里实现删除逻辑：比如从数据库或内存列表中移除
        var viewModel = GetCurrentViewModel(); // 重新加载或从Session获取当前列表
        var recordToDelete = viewModel.Records.FirstOrDefault(r => r.Id == id);
        if (recordToDelete != null)
        {
            viewModel.Records.Remove(recordToDelete);
            // 如果是数据库，执行删除并SaveChanges
        }
        return Json(new { success = true });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message });
    }
}

// 辅助方法：获取当前视图模型（示例，实际根据你的存储方式调整）
private ExcelRecordsViewModel GetCurrentViewModel()
{
    // 这里可以从Session读取，或者重新加载Excel，或者从数据库查询
    return (ExcelRecordsViewModel)Session["ExcelRecords"] ?? new ExcelRecordsViewModel();
}

6. 常见坑点提醒 #

• 禁止用foreach循环：foreach不会生成带索引的name属性，MVC无法绑定到列表，必须用for循环或EditorTemplate。
• 必须保留唯一ID：不管是删除还是模型跟踪，ID是区分不同记录的关键，不能省略。
• 空值处理：读取Excel时要处理空单元格，避免类型转换异常（比如用decimal.TryParse）。
• 模型绑定验证：如果需要验证，记得给模型添加DataAnnotation特性，视图中用Html.ValidationMessageFor显示错误。

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