Razor MVC Заповнення масиву Javascript із масивом моделі


100

Я намагаюся завантажити масив JavaScript масивом з моєї моделі. Мені здається, що це повинно бути можливим.

Жоден із наведених нижче способів не працює.

Не вдається створити цикл JavaScript і збільшити його через Model Array із змінною 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 байтами. У майбутньому це може спричинити багато МБ.


1
ви можете отримати доступ до бритви в js, але не навпаки
Ехсан Саджад,

Відповіді:


216

Це можливо, вам просто потрібно прокрутити колекцію бритв

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

Сподіваюся, це допомагає


За винятком того, що мені довелося оголосити свій масив, використовуючи такі позначення var myArray = new Array ();
Том Мартін,

Gald це працює - так, інакше він буде шукати об'єкт C #, який називається myArray.
heymega

1
Велика допомога. Я думав, що у мене будуть величезні проблеми зі створенням об’єкта javascript із типового словника.
Абстрактно,

Дякую! Мені це було потрібно, тому що мені довелося передати список рядків у Javascript, а потім у Typescript для мого Angular App :)
Bluesight

@mmcrae, @dоголошується всередині циклу foreach. Зверніть увагу, що d має термін VAR попереду. Це дозволяє використовувати його всередині петлі foreach
JhWebDev,

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 #, і він потрібен як масив JavaScript для Toastr у частковому поданні ( .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

Я інтегрував слайдер і мав отримати всі файли в папці, і мав таку ж ситуацію масиву 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));

Сподіваюся, це допомагає


4

Щоб розгорнути відповідь із найбільшою кількістю голосів, для довідки, якщо ви хочете додати до масиву більш складні елементи:

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

тощо.

Крім того, якщо ви хочете передати масив як параметр своєму контролеру, ви можете спочатку його розшифрувати:

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


Виникла проблема з вашим кодом. Має бути @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
Асад,

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);
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.