如何将ViewModel列表数据传递至Controller？

嘿，我来帮你搞定这个问题！要把AddNewsModel的列表传递到Controller，咱们可以通过几种常见的方式实现，下面一步步给你讲清楚：

1. 传统表单提交（同步场景） #

如果是用MVC的强类型视图做同步提交，核心是让表单字段名称和模型绑定规则匹配——对于列表来说，要用到索引来标识每个元素。

视图代码示例 #

假设你的视图模型是List<AddNewsModel>，可以这么写：

@model List<AddNewsModel>

@using (Html.BeginForm("SaveNewsList", "News", FormMethod.Post))
{
    @* 用for循环遍历列表，确保索引能被模型绑定器识别 *@
    for (int i = 0; i < Model.Count; i++)
    {
        <div class="news-item">
            <h4>第 @(i+1) 条新闻</h4>
            
            @* 渲染分类选择（这里用单选框示例）*@
            <div>
                <label>新闻分类:</label>
                @foreach (var category in Model[i].Category)
                {
                    <input type="radio" name="[@i].NewsModel.Category" value="@category.ID" />
                    <span>@category.Name</span>
                }
            </div>
            
            @* 渲染NewsModel的其他属性 *@
            <div>
                <label>标题:</label>
                @Html.TextBoxFor(m => m[i].NewsModel.Headline)
            </div>
            <div>
                <label>来源:</label>
                @Html.TextBoxFor(m => m[i].NewsModel.Source)
            </div>
            <div>
                <label>发布日期:</label>
                @Html.TextBoxFor(m => m[i].NewsModel.Publish_Date, new { type = "date" })
            </div>
            
            <hr />
        </div>
    }
    
    <button type="submit">提交所有新闻</button>
}

Controller接收代码 #

对应的Action方法直接接收List<AddNewsModel>即可：

[HttpPost]
public ActionResult SaveNewsList(List<AddNewsModel> model)
{
    if (ModelState.IsValid)
    {
        // 这里就可以拿到完整的列表数据，比如存库或者做其他处理
        return RedirectToAction("SubmitSuccess");
    }
    // 验证失败返回原视图
    return View(model);
}

2. AJAX异步提交（异步场景） #

如果是单页交互或者需要无刷新提交，可以把数据序列化为JSON后发送，记得给Action加上[FromBody]特性。

前端JS代码（jQuery示例） #

// 从页面收集所有新闻数据，组装成数组
let newsList = [];
$('.news-item').each(function(index) {
    let $item = $(this);
    let newsItem = {
        // 如果需要传递Category列表，也可以在这里收集页面上的分类数据
        Category: [
            { Name: "科技", ID: 1 },
            { Name: "体育", ID: 2 }
        ],
        NewsModel: {
            Category: $item.find('[name*="NewsModel.Category"]:checked').val(),
            Headline: $item.find('[name*="Headline"]').val(),
            Source: $item.find('[name*="Source"]').val(),
            Publish_Date: $item.find('[name*="Publish_Date"]').val()
        }
    };
    newsList.push(newsItem);
});

// 发送AJAX请求
$.ajax({
    url: '/News/SaveNewsList',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(newsList),
    success: function(res) {
        alert('提交成功！');
    },
    error: function(xhr) {
        console.error('提交失败:', xhr.responseText);
    }
});

Controller接收代码 #

[HttpPost]
public JsonResult SaveNewsList([FromBody] List<AddNewsModel> model)
{
    if (ModelState.IsValid)
    {
        // 处理数据逻辑
        return Json(new { success = true, message = "数据保存成功" });
    }
    // 返回验证错误信息
    var errors = ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage);
    return Json(new { success = false, errors = errors });
}

关键注意事项 #

• 用for循环而非foreach遍历列表：模型绑定需要索引（[i]）来区分列表中的每个元素
• 字段命名要遵循规则：嵌套属性要写成[索引].父属性.子属性的格式，比如[@i].NewsModel.Headline
• 日期格式要兼容：可以给Publish_Date加[DisplayFormat]特性确保格式统一：

  public class NewsModel {
      // ...
      [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
      public DateTime Publish_Date { get; set; }
  }
  

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