ASP.NET Core Razor视图中如何访问模型数组对象的属性

你的CheckedBaggageDetails实际存储的是JSON数组字符串，而非直接可操作的对象数组，所以需要先将其反序列化为可访问的结构，再通过索引获取属性值。以下是两种可行的实现方式：

方法一：使用JArray（快速处理，无需定义强类型） #

这种方式适合临时场景，无需额外创建模型类，依赖Newtonsoft.Json（Json.NET）包：

1. 确保项目已安装Newtonsoft.Json NuGet包（若未安装，通过NuGet包管理器安装即可）。
2. 在Razor视图顶部引入命名空间：

@using Newtonsoft.Json.Linq;

3. 在视图中反序列化并通过索引访问属性：

@if (Model.CheckedBaggageDetails != null)
{
    // 将object转为字符串后反序列化为JArray
    var baggageArray = JArray.Parse(Model.CheckedBaggageDetails.ToString());

    // 通过索引获取第一个行李项的value和unit
    if (baggageArray.Count > 0)
    {
        var firstBaggage = baggageArray[0];
        <p>第一件行李：@firstBaggage["value"] @firstBaggage["unit"]</p>
    }

    // 遍历所有行李项（可选）
    foreach (var baggageItem in baggageArray)
    {
        <p>行李：@baggageItem["value"] @baggageItem["unit"]</p>
    }
}

方法二：定义强类型模型（类型安全，推荐） #

这种方式更规范，避免魔法字符串，适合长期维护：

1. 在项目中创建行李详情模型类：

public class BaggageDetail
{
    public string PassengerType { get; set; }
    public int Value { get; set; }
    public string Unit { get; set; }
}

2. 在Razor视图中使用System.Text.Json（ASP.NET Core默认内置）反序列化：

@using System.Text.Json;

@if (Model.CheckedBaggageDetails != null)
{
    // 反序列化为强类型列表，配置忽略大小写匹配属性
    var baggageList = JsonSerializer.Deserialize<List<BaggageDetail>>(
        Model.CheckedBaggageDetails.ToString(),
        new JsonSerializerOptions { PropertyNameCaseInsensitive = true }
    );

    // 通过索引访问第一个行李项
    if (baggageList?.Count > 0)
    {
        <p>第一件行李：@baggageList[0].Value @baggageList[0].Unit</p>
    }

    // 遍历所有行李项（可选）
    foreach (var baggage in baggageList)
    {
        <p>行李：@baggage.Value @baggage.Unit</p>
    }
}

注意事项 #

• 始终添加null检查，避免空引用异常。
• 若API返回的JSON属性名与模型类属性名大小写不一致，需配置反序列化选项（如PropertyNameCaseInsensitive = true）。
• 优先推荐强类型模型方案，代码可读性和维护性更强。

内容的提问来源于stack exchange，提问作者Devender Singh