ASP.NET MVC中如何通过ViewModel展示JSON转换后的模型数据？

核心问题汇总 #

1. 视图声明的模型类型与控制器返回类型不匹配：控制器返回单个MultipleClasses对象，视图却声明为IEnumerable<MultipleClasses>集合
2. ViewModel结构混乱：与Model层级关系不对应，且使用字段而非属性（序列化、视图绑定依赖属性）
3. 视图属性访问错误：未处理products和variants的集合/数组层级，直接访问子属性导致报错

步骤1：修正ViewModel类 #

对齐Model层级，将字段改为属性，去掉冗余定义：

using ExternalAPIModule.Models;

namespace ExternalAPIModule.ViewModel
{
    public class MultipleClasses
    {
        // 直接复用Model中的User类，其已包含products数组
        public User? ApiUser { get; set; }
    }
}

步骤2：修正控制器代码 #

优化反序列化逻辑，用await替代阻塞式.Result，确保模型传递正确：

if (response.IsSuccessStatusCode)
{
    var data = await response.Content.ReadAsStringAsync();
    // 直接反序列化为Model的User类型（匹配API返回结构）
    var apiData = JsonConvert.DeserializeObject<User>(data);
    // 包装到ViewModel后传递给视图
    var viewModel = new MultipleClasses { ApiUser = apiData };
    return View(viewModel);
}

步骤3：修正视图代码 #

视图接收单个MultipleClasses对象，嵌套遍历产品及变体，添加空值判断避免异常：

@model ExternalAPIModule.ViewModel.MultipleClasses

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>供应商</th>
            <th>标题</th>
            <th>创建时间</th>
            <th>详情</th>
            <th>价格</th>
            <th>对比价格</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @if (Model?.ApiUser?.products != null)
        {
            // 遍历每个产品
            foreach (var product in Model.ApiUser.products)
            {
                // 遍历当前产品下的所有变体
                foreach (var variant in product.variants)
                {
                    <tr>
                        <td>@product.id</td>
                        <td>@product.vendor</td>
                        <td>@product.title</td>
                        <td>@product.created_at</td>
                        <td>@product.body_html</td>
                        <td>@variant.price</td>
                        <td>@variant.compare_at_price</td>
                        <td>
                            @Html.ActionLink("编辑", "Edit", new { id = product.id }) |
                            @Html.ActionLink("详情", "Details", new { id = product.id }) |
                            @Html.ActionLink("删除", "Delete", new { id = product.id })
                        </td>
                    </tr>
                }
            }
        }
        else
        {
            <tr>
                <td colspan="8">暂无数据</td>
            </tr>
        }
    </tbody>
</table>

额外注意事项 #

• 确认API返回的JSON结构与User类完全匹配：根节点需包含products数组，每个产品对象需包含variants数组
• 保持Model类的[JsonProperty]特性，确保JSON字段与类属性映射正确（如created_at已处理）
• 所有集合/引用类型都需做空值判断，避免运行时空引用异常

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