Question

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

Answer 1

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

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

希望这有帮助

Answer 2

JSON语法is pretty much the JavaScript syntax for coding your object。因此，就简洁性和速度而言，您自己的答案是最好的选择。

我在populating dropdown lists in my KnockoutJS model时使用这种方法。例如。

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 package进行序列化，使用ViewBag传递数据。

Answer 3

我正在集成一个滑块，需要获取文件夹中的所有文件，并且C＃数组与javascript数组的情况相同。@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));

希望有所帮助

Answer 4

我正在处理来自C＃的转发（警报消息）列表List<Alert>，并且在部分视图（.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 5

要扩展最高投票的答案，以供参考，如果您要向阵列添加更复杂的项目：

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

等

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

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

Answer 6

如果它是对称（矩形）阵列那么尝试推入单维javascript数组; 用razor确定阵列结构;和然后转换成二维数组。

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

Answer 7

这是我实施的更好的方法：）

@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>

希望这可以帮助您防止迭代模型（快乐编码）

Answer 8

具有命名字段的有效语法：

  var array = [];

     @foreach (var item in model.List)
     {
        @:array.push({ 
                       "Project": "@item.Project",
                       "ProjectOrgUnit": "@item.ProjectOrgUnit"
                     });
     }

Answer 9

<script>
    var tempArray = [];

    @foreach (var item in Model.Collection)
    {
        @:tempArray.push({ Field1: "@item.Field1", Field2: "@item.Field2" });
    }

    $("#btn").on("click", function () {
        $.ajax({
            url: '/controller/action',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(tempArray),
            success: function (resp) {
                alert(resp);
            }
        });
    });
</script>

控制器/动作参数：ICollection <_Model> _items

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

9 个答案: