将 Razor 列表传递给 Javascript (JSON)答案

【问题标题】：Pass an Razor List to Javascript (JSON)将 Razor 列表传递给 Javascript (JSON)
【发布时间】：2015-09-18 10:29:13
【问题描述】：

我想将一个在 razor 视图中声明的列表传递给一个 javascript var：

  List<testObj> mylist= new List<testObj>();

    <div class="listboxFilterItem" onclick=' setList(@(Html.Raw(Json.Serialize(mylist))))'> <div style="padding-top:2px; float: left;">Test</div>     <div class="listboxChosenFilter">*</div>   </div>

我的 javascript 代码如下所示：

function setList(list) {
    var jsonObj = JSON.parse(list);
    console.log(jsonObj);

  }


</script>

但是由于我的引号，我得到了 ILLEGAL 令牌异常 --> "data"

如何将 razor view 声明的列表传递给 javascript 函数？

【问题讨论】：

标签： javascript asp.net asp.net-core-mvc

【解决方案1】：

尝试替换 onclick 代码。

替换

 onclick=' setList(@(Html.Raw(Json.Serialize(mylist))))'

有

onclick='setList(@Html.Raw(Json.Encode(mylist)))'

【讨论】：

【解决方案2】：

我不确定您使用的是哪个 MVC/.NET 版本，但您是否尝试过使用 JavaScriptSerializer 而不是 Json？

@{
    var myList = new List<testObj>();
    var list = new JavaScriptSerializer().Serialize(myList);
    // list now contains a JSON string repesentation of myList.
}

<script>
   var options = @Html.Raw(list);
</script>

options javascript 变量应包含 myList C# 变量中的任何项目的数组。

【讨论】：

【解决方案3】：

我有一个具有ICollection<Options> 属性的模型的强类型 Razor cshtml 视图。我一直在寻找如何将列表/列表列表/对象列表传递给 JavaScript，并且出于安全原因在某些地方看到“不要使用 @Html.Raw()”。

在 .NET Core 3.1 中对我有用的是仅使用 System.Text.Json 命名空间中的 @Json.Serialize()。所以在我的例子中，我将它用作 JavaScript 变量值：

var myModelOptionsList = @Json.Serialize(Model.Options);

现在我有了一个 JavaScript 对象列表。

注意：该项目使用 EntityFramework Core 来存储模型（及其选项）。每个 Option 对象都有一个返回父模型的参考导航属性。这在序列化过程中导致了JSON Self Referencing Loop Exceptions。最简单的解决方案是在序列化期间不包含这些引用，在 Option 对象的模型引用导航属性上使用 [JsonIgnore] 属性。

【讨论】：