如何在外部JavaScript文件中遍历Customer Rates记录列表

首先要明确：@Html.HiddenFor(m => m.Rates)无法正确序列化List<CustomerRate>这类复杂集合，它只会输出集合的类型字符串（比如System.Collections.Generic.List1[YourNamespace.CustomerRate]`），根本没法在JS里解析成可用的数据。所以得先修正局部视图里的隐藏域写法，把集合序列化为JSON字符串。

步骤1：修正局部视图的隐藏域代码 #

把原来的@Html.HiddenFor替换成手动生成隐藏域，将Rates序列化为JSON：

<div>
    <input type="hidden" id="Rates" value='@Json.Serialize(Model.Rates)' />
</div>
<script src="Order.js"></script>

注意：要用单引号包裹JSON内容，避免JSON里的双引号和HTML属性的双引号冲突。

步骤2：在Order.js中解析并遍历数据 #

现在隐藏域里存的是标准JSON字符串，我们可以用JSON.parse()解析成JS数组，然后遍历：

// 获取隐藏域的JSON字符串
const ratesJson = document.getElementById('Rates').value;
// 解析为JS数组
const ratesList = JSON.parse(ratesJson);

// 遍历每条记录
ratesList.forEach(rate => {
    console.log(`CustomerId: ${rate.CustomerId}, Rate: ${rate.Rate}`);
    // 这里可以做你需要的逻辑处理，比如渲染到页面、计算等
});

额外修正：C#类定义的语法错误 #

原始C#类声明存在语法问题，类的声明应该是class 类名 {}，而非带括号的class 类名()，修正后的类代码：

public class Customer
{
    public int Id { get; set; }
    public string CustomerName { get; set; }
    public List<CustomerRate> Rates { get; set; }  
}

public class CustomerRate
{
    public int CustomerId { get; set; }
    public decimal Rate { get; set; }
}

public class Order
{
    public int Id { get; set; }
    public int CustomerId { get; set; }
    public DateTime OrderDate { get; set; }
    public List<CustomerRate> Rates { get; set; } 
}

补充说明 #

• 若使用ASP.NET Core 3.0+，Json.Serialize是内置方法，无需额外引用；若为旧版本，需使用Newtonsoft.Json.JsonConvert.SerializeObject(Model.Rates)，记得先安装Newtonsoft.Json包。
• 确保CustomerRate的属性均为公开状态，这样序列化才能正确读取属性值。

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