ASP.NET MVC中无法将模型数据列表传递至视图的问题

核心问题梳理 #

你的代码存在几个关键问题，导致模型无法正确传递到视图并展示：

1. AJAX请求响应类型不匹配 #

你设置了dataType: 'json'，但控制器返回的是HTML视图，AJAX会尝试把HTML解析成JSON，直接触发错误回调，而且异步请求返回的视图不会自动替换当前页面内容。

2. 视图访问模型属性方式错误 #

视图里直接写foreach(var item in FruitData)是错误的，FruitData是FruitDataModel的属性，必须通过Model.FruitData访问。

3. 控制器路由配置错误 #

[Route("FruitController/FruitList")]的路由格式不符合ASP.NET MVC规范，控制器名称默认去掉Controller后缀，应该写成[Route("Fruit/FruitList")]，否则可能和@Url.Action生成的URL不匹配，导致请求无法命中POST方法。

4. API结果添加方式错误 #

如果CallApiAsync(item)返回的是List<Fruit>，用results.Add(result)会把整个列表作为单个元素嵌套进去，导致FruitData变成List<List<Fruit>>，和模型定义的List<Fruit>类型不匹配。

5. 空值判断缺失 #

即使Model不为null，Model.FruitData也可能是null，直接循环会引发空引用异常。

修正后的代码 #

1. 控制器代码 #

[HttpGet]
public ActionResult FruitList() 
{
  return View();
}

// 修正路由格式
[Route("Fruit/FruitList")]
[HttpPost]
public async Task<ActionResult> FruitList(List<string> fruitItems) 
{
  var items = fruitItems;
  List<Fruit> results = new List<Fruit>();
  foreach(var item in items) {
    var result = await CallApiAsync(item); 
    // 根据API返回值类型选择添加方式：单个Fruit用Add，列表用AddRange
    if(result != null)
    {
        // 假设CallApiAsync返回List<Fruit>，用AddRange批量添加
        results.AddRange(result);
        // 如果返回单个Fruit，替换为：results.Add(result);
    }
  }

  // 确保FruitData不为null
  var model = new FruitDataModel {
    FruitData = results ?? new List<Fruit>()
  };

  return View(model); // 直接返回视图，无需写完整路径（视图在对应文件夹下时）
}

2. 视图代码 #

@model Fruit.Models.FruitDataModel
@{
  ViewBag.Title = "FruitList";
  var index = 0;
}

<!-- 增加完整的空值判断 -->
@if (Model != null && Model.FruitData != null && Model.FruitData.Any()) {
  <ul>
    @foreach(var item in Model.FruitData) 
    { 
      <li>@item.FruitName</li>
    }
  </ul>
}
else
{
    <p>暂无水果数据</p>
}

3. JavaScript代码 #

修改响应类型为html，并在成功回调中更新页面内容：

// 使用jQuery 3.3.1
const value = JSON.parse(localStorage.getItem('fruitItems')) || [];
console.log(value);

$.ajax({
  url: '@Url.Action("FruitList", "Fruit")',
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  data: JSON.stringify(value),
  dataType: 'html', // 改为接收HTML类型
  success: function (response) {
    console.log('Data sent successfully');
    // 替换页面中指定容器的内容，需提前在原视图中添加<div id="fruitContainer"></div>
    $('#fruitContainer').html(response);
  },
  error: function (xhr, status, error) {
    console.error('Error sending data: ', error);
  }
});

额外注意事项 #

• 确认CallApiAsync的返回值类型，匹配对应的添加方法（Add/AddRange）。
• 检查视图中@model的命名空间和控制器中模型的命名空间是否一致，避免模型无法识别。
• 可在控制器POST方法中添加日志，确认fruitItems是否正确接收、model.FruitData是否有数据。

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