ASP.NET MVC中如何用jQuery遍历ViewModel中的列表？

在ASP.NET MVC项目中尝试用jQuery遍历ViewModel里的条目列表，使用了以下代码：

$.each(@Model.Basisdatenliste, function (index, element) {
    console.log("Element #" + index + ": " + element);
});

运行后出现语法错误：

Uncaught SyntaxError: Unexpected end of input

查看页面源码，输出的代码如下：

$.each(System.Collections.Generic.List`1[Project.Areas.Mengenplaner.Models.Basisdaten], function (index, element) {
        console.log("Element #" + index + ": " + element);
 });

其中从`符号开始的部分被标记为注释，导致代码失效。

ViewModel类（德语命名）：

public class HomeIndexViewModel
{
    public List<Basisdaten> Basisdatenliste { get; set; }
    public List<Verkaufsstellen> Verkaufsstellenliste { get; set; }
    public string AuswahlVerkaufsstelle { get; set; }
    public int AuswahlNummer { get; set; }
    public int AuswahlVerkaufsstellennummer { get; set; }
    public float AuswahlMengeInEinheit { get; set; }
    public float AuswahlMengeInKisten { get; set; }
    public float AuswahlVorschlagKisten { get; set; }
    public int AuswahlPLU { get; set; }
    public DateTime Nextdate { get; set; }
    public DateTime AuswahlDatum { get; set; }
}

Basisdatenliste对应的模型类：

public class Basisdaten
{
    [DisplayName("PLU")]
    public int nummer { get; set; }
    public string Artikel { get; set; }
    public int Verkaufsstellennummer { get; set; }
    public string Markt { get; set; }

    public int PLU { get; set; }

    [DisplayName("Letzter Verkaufstag")]
    public DateTime LetztesDatum { get; set; }
    public string Description { get; set; }
    public string Einheit { get; set; }
    public double Verkaufsmenge { get; set; }
    public double PacklisteEinheit { get; set; }
    [DisplayName("Letzte Packliste")]
    public double PacklisteKisten { get; set; }
    public int AnzahlVerkaeufe { get; set; }
    public TimeSpan ErsterVerkaufProdukt { get; set; }
    public TimeSpan LetzterVerkaufProdukt { get; set; }
    public TimeSpan ErsterVerkaufAmVerkaufstag { get; set; }
    public TimeSpan LetzterVerkaufAmVerkaufstag { get; set; }
    public double VerkaufszeitGesamt { get; set; }
    public double AnzahlVerkaeufeProStunde { get; set; }
    public double MengeProVerkauf { get; set; }
    public double ZeitZwischenZweiVerkäufen { get; set; }
    public TimeSpan Zeitpunkt_ab_dem_Ware_ausverkauft_sein_darf { get; set; }
    public TimeSpan Zeitpunkt_ab_dem_Ware_ausverkauft_sein_darfAbzglZeitZwischenZweiVerkaeufen { get; set; }
    
    [DisplayName("Zu wenig Ware?")]
    public bool ZuWenig { get; set; }
   
    public double MengeZuWenig { get; set; }
    public double GebuchterVerlust { get; set; }
    public double VKPreis { get; set; }
    public double AktuelleUmpackmenge { get; set; }
    public double VorigeUmpackmenge { get; set; }
    public int AnzahlBons { get; set; }
    public int DurchschittszahlBonsVierWochen { get; set; }
    public float Planmenge { get; set; }
} 

直接在JS中输出@Model.Basisdatenliste时，ASP.NET MVC会调用C#对象的ToString()方法，输出的是对象的类型字符串（System.Collections.Generic.List1[xxx]），这不是有效的JavaScript语法。另外，字符串中的符号会被浏览器解析为单行注释的开始，导致后续代码被注释，最终触发语法错误。

需要把C#的列表对象序列化为JSON格式，让JavaScript能够识别为数组。根据ASP.NET版本选择对应的序列化方法：

1. ASP.NET MVC（非Core版本） #

使用Json.Encode方法序列化列表：

$.each(@Html.Raw(Json.Encode(Model.Basisdatenliste)), function (index, element) {
    console.log("Element #" + index + ": " + element.Artikel); // 示例：访问对象属性
});

• Json.Encode：将C#对象转换为JSON字符串
• Html.Raw：防止ASP.NET对JSON字符串进行HTML编码（避免出现"等转义字符）

2. ASP.NET Core版本 #

使用Json.Serialize方法：

$.each(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.Basisdatenliste)), function (index, element) {
    console.log("Element #" + index + ": " + element.Artikel);
});

注意事项 #

• 序列化后的JSON会包含Basisdaten类的所有公共属性，你可以在JS中直接通过element.属性名访问（比如element.PLU、element.Markt）
• 如果列表中包含敏感数据，建议在后端过滤掉不需要的属性后再序列化，避免泄露信息

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