如何使用模型列表打印 javascript 数组答案

【问题标题】：How to print javascript array with Model list如何使用模型列表打印 javascript 数组
【发布时间】：2017-09-26 11:09:11
【问题描述】：

使用asp .net mvc5，如何在javascript中恢复模型？这是我的代码

Ctrl：

public ActionResult Test() {

    var data = List<string>() {
        "test",
        "essai"
    };

    return View(data); 
}

查看：

@model ...

@section scripts {
    <script src="~/Scripts/Parametre/DatePublication.js"></script>
}

部分Js：

$(document).ready(function () {
    console.log(@Model);
});

没有找到部分Js中的@Model。

【问题讨论】：

标签： javascript c# jquery .net asp.net-mvc

【解决方案1】：

您不能在 Razor 中执行此操作，因为在 Razor 中，每个使用 @ 块的内容都会自动由 Razor 进行 HTML 编码。

解决方案是迭代您的列表并创建一个javascript 数组。

var myArray = [];
@foreach (var item in Model)
{
    @:myArray.push('@item');
}
console.log(myArray);

在@foreach 块内，您需要使用@: 标记或<text> 标记标记markup 或Javascript。

【讨论】：

【解决方案2】：

Model 只能在可以执行服务器代码的 razor 视图中工作。如果您希望将其作为外部 javascript 文件中的 javascript 数组，您可以将其读取到 razor 视图中的 js 数组变量中，然后在其他脚本中使用它

 <script>
     var myArray = @Html.Raw(JsonConvert.SerializeObject(Model))
     console.log(myArray);
 </script>
 <script src="ExternalJsFile.js"></script>

您现在可以在ExternalJsFile.js 访问myArray。

通过简单的全局变量传递数据并不是一个好主意。它们很容易被覆盖。（如果您加载的某些第三方插件脚本也使用相同的变量名怎么办？）所以您应该考虑为数据命名空间是安全的。

例如，

 <script>
     var myApp = myApp || {};  
     myApp.pageData = myApp.pageData || {};
     myApp.pageData.model = @Html.Raw(JsonConvert.SerializeObject(Model));
 </script>
 <script src="ExternalJsFile.js"></script>

现在在 externalJs 文件中，你可以像console.log(myApp.pageData.model)一样访问它

【讨论】：