CSHTML中一对多模型下多行数据的可编辑字段实现问题

没问题，我来帮你搞定这个多行明细转可编辑的需求！

问题根源 #

你现在用foreach输出的是静态文本，既没有生成可编辑的表单控件，也没办法让ASP.NET MVC在表单提交时正确绑定到CarrierEventItems集合。我们需要调整视图代码，让明细字段生成带正确绑定标识的输入控件。

解决方案一：使用for循环（最直接） #

首先需要把ViewModel里的IEnumerable<CarrierEventItem>改成List<CarrierEventItem>，因为for循环需要索引器来生成正确的绑定名称：

using CustomerPortal.Identity.Models;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Collections.Generic;
namespace CustomerPortal.Models
{
    public class EventViewModel
    {
        public string CustomerPONumber { get; set; }
        public string SupplierReferenceNumber { get; set; }
        public string CarrierProNumber { get; set; }
        // 改成List，支持索引访问
        public List<CarrierEventItem> CarrierEventItems { get; set; } = new List<CarrierEventItem>();
    }
}

然后修改CSHTML视图，用for循环替代foreach，这样会生成带索引的name属性（比如CarrierEventItems[0].CustomerItemNumber），ASP.NET MVC就能正确识别并绑定集合数据：

@model EventViewModel

<form method="post" asp-action="YourSubmitAction">
    <div class="list-item">
        <h3>Cust PO Number</h3>
        @Html.TextBoxFor(m => m.CustomerPONumber)
    </div>

    @for (int i = 0; i < Model.CarrierEventItems.Count; i++)
    {
        <div class="list-item">
            <h3>Customer Item @(i+1)</h3>
            <ul>
                <li>
                    Customer Item Number: 
                    @Html.TextBoxFor(m => m.CarrierEventItems[i].CustomerItemNumber)
                </li>
                <!-- 如果CarrierEventItem还有其他字段，按同样方式添加即可 -->
                <!-- 示例：
                <li>
                    Quantity: 
                    @Html.TextBoxFor(m => m.CarrierEventItems[i].Quantity)
                </li>
                -->
            </ul>
        </div>
    }

    <button type="submit">提交</button>
</form>

解决方案二：使用EditorTemplate（更优雅） #

如果你的明细字段较多，或者需要复用这个明细的编辑逻辑，推荐用EditorTemplate：

1. 在项目的Views/Shared文件夹下新建EditorTemplates子文件夹，然后创建CarrierEventItem.cshtml文件：

@model CarrierEventItem
<div class="list-item">
    <h3>Customer Item</h3>
    <ul>
        <li>
            Customer Item Number: 
            @Html.TextBoxFor(m => m.CustomerItemNumber)
        </li>
        <!-- 其他字段同理添加 -->
    </ul>
</div>

2. 修改主视图，直接用EditorFor渲染整个集合：

@model EventViewModel

<form method="post" asp-action="YourSubmitAction">
    <div class="list-item">
        <h3>Cust PO Number</h3>
        @Html.TextBoxFor(m => m.CustomerPONumber)
    </div>

    <!-- MVC会自动遍历集合，为每个元素渲染EditorTemplate -->
    @Html.EditorFor(m => m.CarrierEventItems)

    <button type="submit">提交</button>
</form>

注意事项 #

• 确保CarrierEventItem类的所有需要编辑的属性都有get和set方法，否则模型绑定无法赋值。
• 如果是新建表单，在控制器的Action里要先初始化CarrierEventItems，比如：

  public IActionResult Create()
  {
      var model = new EventViewModel();
      // 可以默认添加一行空的明细，方便用户直接编辑
      model.CarrierEventItems.Add(new CarrierEventItem());
      return View(model);
  }
  

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