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

IT技术 javascript arrays asp.net-mvc asp.net-mvc-4 razor
2021-02-12 06:37:34

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

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

无法使用 JavaScript 变量创建 JavaScript 循环并通过模型数组递增

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。

6个回答

这是可能的,您只需要遍历 razor 集合

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

希望这可以帮助

大帮助。我以为从模型字典构建 javascript 对象会遇到一些大问题。
2021-03-14 06:37:34
谢谢!我需要这个,因为我必须将字符串列表传递给 Javascript,然后传递给我的 Angular 应用程序的 Typescript :)
2021-03-16 06:37:34
Gald 它可以工作 - 是的,否则它将寻找一个名为 myArray 的 C# 对象。
2021-03-25 06:37:34
请注意,如果您的数组中的项目包含引号或反斜杠,这将呈现无效的 javascript。解决这个问题的一种方法是使用:@:myArray.push("@Html.Raw(HttpUtility.JavaScriptStringEncode(d))");
2021-04-02 06:37:34
除了我必须使用以下符号来声明我的数组 var myArray= new Array();
2021-04-09 06:37:34

我正在处理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);
});

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 来传递数据。

如果您想向数组添加更复杂的项目,请扩展最高投票的答案,以供参考:

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

等等。

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

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

您的代码有问题。它应该是 @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
2021-04-08 06:37:34

我正在集成一个滑块,需要获取文件夹中的所有文件,并且 C# 数组到 javascript 数组的情况相同。@heymega 的这个解决方案工作得很好,除了我的 javascript 解析器varforeach循环中使用时很恼火所以我做了一些避免循环的工作。

var allowedExtensions = new string[] { ".jpg", ".jpeg", ".bmp", ".png", ".gif" };

var bannerImages = string.Join(",", Directory.GetFiles(Path.Combine(System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath, "Images", "banners"), "*.*", SearchOption.TopDirectoryOnly)
    .Where(d => allowedExtensions.Contains(Path.GetExtension(d).ToLower()))
    .Select(d => string.Format("'{0}'", Path.GetFileName(d)))
    .ToArray());

和 javascript 代码是

var imagesArray = new Array(@Html.Raw(bannerImages));

希望能帮助到你