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


100

我正在尝试使用模型中的数组加载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。


1
您可以在js中访问razor,反之则不然
Ehsan Sajjad 2014年

Answers:


215

这是可能的,您只需要遍历剃须刀集合

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

希望这可以帮助


除非必须使用以下符号声明数组:var myArray = new Array();
汤姆·马丁

好用-可以,否则它将寻找一个名为myArray的C#对象。
heymega

1
大的帮助。我以为从模型字典构建javascript对象会遇到一些大问题。
IAbstract

谢谢!我对此很讨厌,因为我必须将字符串列表传递给Javascript,然后再传递给Angular App的
Typescript

@mmcrae @d在foreach循环中声明。请注意,d前面有术语VAR。这使它可以 foreach循环中使用
JhWebDev '19

8

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


7

我正在处理List<Alert>来自C#的烤面包(警报消息)列表,并将其作为Toastr的 JavaScript数组的局部视图(.cshtml文件)使用。以下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);
});

4

我被整合滑块和获得该文件夹中的所有文件,并需要为具有相同situationof C#阵列的JavaScript array.This溶液@heymega非常完美,除了我的JavaScript解析很不痛快上var使用foreach循环。所以我做了一些避免循环的工作。

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));

希望能帮助到你


4

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

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

等等

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

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


您的代码有问题。应该是 @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
Asad

1

这是我实现的更好的方法:)

@model ObjectUser
@using System.Web.Script.Serialization
@{ 
    var javaScriptSearilizer = new JavaScriptSerializer();
    var searializedObject = javaScriptSearilizer.Serialize(Model);
 }

<script>
    var searializedObject = @Html.Raw(searializedObject )
    console.log(searializedObject);
    alert(searializedObject);
</script>

希望这将帮助您防止迭代模型(快乐编码)


0

如果它是一个对称(矩形)数组,则尝试推入一维javascript数组;用剃刀确定阵列结构;然后转换为二维数组

// this just sticks them all in a one dimension array of rows * cols
var myArray = new Array();
@foreach (var d in Model.ResultArray)
{
    @:myArray.push("@d");
}

var MyA = new Array();

var rows = @Model.ResultArray.GetLength(0);
var cols = @Model.ResultArray.GetLength(1);

// now convert the single dimension array to 2 dimensions
var NewRow;
var myArrayPointer = 0;

for (rr = 0; rr < rows; rr++)
{
  NewRow = new Array();
  for ( cc = 0; cc < cols; cc++)
  {
    NewRow.push(myArray[myArrayPointer]);
    myArrayPointer++;
  }
  MyA.push(NewRow);
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.