Razor MVC使用模型数组填充Javascript数组

Question

我正在尝试使用我的模型中的数组加载JavaScript数组.在我看来,这应该是可能的.

以下两种方式都不起作用.

无法使用JavaScript变量创建JavaScript循环并通过Model Array递增

        for(var j=0; j<255; j++)
        {
            jsArray = (@(Model.data[j])));
        }

无法创建Razor循环,JavaScript超出范围

        @foreach(var d in Model.data)
        {
            jsArray = d;
        }

我可以使用它

        var jsdata = @Html.Raw(Json.Encode(Model.data)); 

但我不知道为什么我应该使用JSON.

此外,我现在将此限制为255个字节.在未来,它可能会遇到很多MB.

Answer 1

这是可能的,你只需要循环剃刀集合

<script type="text/javascript">

    var myArray = [];

    @foreach (var d in Model.data)
    {
        @:myArray.push("@d");
    }

    alert(myArray);

</script>

希望这可以帮助

Answer 2

我正在处理List<Alert>来自 C# 的toast列表（警报消息），并且需要它作为局部视图（.cshtml文件）中Toastr 的JavaScript 数组。下面的 JavaScript 代码对我有用：

var toasts = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(alerts));
toasts.forEach(function (entry) {
    var command = entry.AlertStyle;
    var message = entry.Message;
    if (command === "danger") { command = "error"; }
    toastr[command](message);
});

Answer 3

JSON语法几乎是用于编码对象的JavaScript语法.因此,就简洁性和速度而言,您自己的答案是最好的选择.

在我的KnockoutJS模型中填充下拉列表时,我使用这种方法.例如

var desktopGrpViewModel = {
    availableComputeOfferings: ko.observableArray(@Html.Raw(JsonConvert.SerializeObject(ViewBag.ComputeOfferings))),
    desktopGrpComputeOfferingSelected: ko.observable(),
};
ko.applyBindings(desktopGrpViewModel);

...

<select name="ComputeOffering" class="form-control valid" id="ComputeOffering" data-val="true" 
data-bind="options: availableComputeOffering,
           optionsText: 'Name',
           optionsValue: 'Id',
           value: desktopGrpComputeOfferingSelect,
           optionsCaption: 'Choose...'">
</select>

请注意,我使用Json.NET NuGet包进行序列化,使用ViewBag传递数据.

Answer 4

要扩展最高投票的答案，作为参考，如果您想向数组添加更复杂的项目：

@:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");

等等。

此外，如果要将数组作为参数传递给控制器​​，可以先将其字符串化：

myArray = JSON.stringify({ 'myArray': myArray });