Razor MVC Wypełnianie tablicy JavaScript z tablicą modelu

Question

Próbuję załadować tablicę JavaScript z tablicą z mojego modelu. Wydaje mi się, że to powinno być możliwe.

Żadna z poniższych metod nie działa.

Nie można utworzyć pętlę JavaScript i przyrost poprzez tablicy modelowej z JavaScript zmiennej

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

Nie można utworzyć pętlę Razor, JavaScript jest poza zakresem

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

mogę zmusić go do pracy z

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

Ale nie wiem, dlaczego powinienem używać JSON.

Również w tej chwili ograniczam to do 255 bajtów. W przyszłości może działać na wiele MB.

Answer 1

Jest to możliwe, wystarczy pętli kolekcji brzytwa

<script type="text/javascript"> 

    var myArray = []; 

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

    alert(myArray); 

</script> 

nadzieję, że to pomaga

Answer 2

JSON składni is pretty much the JavaScript syntax for coding your object. Dlatego pod względem zwięzłości i szybkości twoja własna odpowiedź jest najlepszym wyborem.

Używam tego podejścia, gdy populating dropdown lists in my KnockoutJS model. Na przykład.

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> 

Zauważ, że używam Json.NET NuGet package dla serializacji i ViewBag do przekazywania danych.

Answer 3

byłem integracji suwak i potrzebne, aby wszystkie pliki w folderze i był o tej samej situationof C# tablicę do JavaScript array.This roztworu przez @heymega działało idealnie z wyjątkiem mojego javascript parsera był zirytowany na var stosowania w foreach pętli. Zrobiłem więc małą pracę, omijając pętlę.

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

I kod JavaScript jest

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

Nadzieja pomaga

Answer 4

Aby rozwinąć na górnym głosowało odpowiedź, dla odniesienia, jeśli chcesz dodać bardziej złożonych elementów do tablicy :

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

etc.

Ponadto, jeżeli chcesz przekazać tablicę jako parametr do kontrolera można stringify go najpierw:

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

Answer 5

Pracowałem z listą grzanki (komunikaty alarmowe), List<Alert> od C# i potrzebne go jako tablica JavaScript dla Toastr w częściowym widoku (.cshtml plik). Kod JavaScript poniżej jest co pracował dla mnie:

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 6

Jeśli jest symetryczny (prostokątne) tablicą następnie Spróbuj pchania w jednym wymiarze javascript tablica; użyj brzytwy do określenia struktury macierzy; i przekształcić następnie w dwuwymiarową tablicę.

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

To byłoby lepszym rozwiązaniem jak już wdrożone :)

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

nadzieję, że pomoże Ci uniemożliwić iteracji modelu (szczęśliwy kodowania)