Razor MVC Auffüllen des Javascript-Arrays mit Model Array


99

Ich versuche, ein JavaScript-Array mit einem Array aus meinem Modell zu laden. Es scheint mir, dass dies möglich sein sollte.

Keine der folgenden Möglichkeiten funktioniert.

Es kann keine JavaScript-Schleife erstellt und mit der JavaScript-Variablen über das Modellarray inkrementiert werden

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

Es kann keine Razor-Schleife erstellt werden. JavaScript ist außerhalb des Gültigkeitsbereichs

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

Ich kann es zum Laufen bringen

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

Aber ich weiß nicht, warum ich JSON verwenden muss.

Auch während ich im Moment dies auf 255 Bytes beschränke. In Zukunft könnte es in viele MB laufen.


1
Sie können auf Rasiermesser in js zugreifen, aber nicht umgekehrt
Ehsan Sajjad

Antworten:


215

Dies ist möglich, Sie müssen nur die Rasierersammlung durchlaufen

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

Hoffe das hilft


Außer ich musste mein Array mit der folgenden Notation deklarieren var myArray = new Array ();
Tom Martin

Gald es funktioniert - Ja, sonst sucht es nach einem C # -Objekt namens myArray.
Heymega

1
Große Hilfe. Ich dachte, ich hätte einige große Probleme beim Erstellen eines Javascript-Objekts aus einem Modellwörterbuch.
IAbstract

Danke dir! Ich brauchte das, weil ich eine Liste von Strings an Javascript und dann an Typescript für meine Angular App übergeben musste :)
Bluesight

@mmcrae, @dwird innerhalb der foreach-Schleife deklariert. Beachten Sie, dass das d den Begriff VAR vor sich hat.
Dies

8

Die JSON-Syntax ist so ziemlich die JavaScript-Syntax zum Codieren Ihres Objekts . In Bezug auf Prägnanz und Geschwindigkeit ist daher Ihre eigene Antwort die beste Wahl.

Ich verwende diesen Ansatz beim Auffüllen von Dropdown-Listen in meinem KnockoutJS-Modell . Z.B

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>

Beachten Sie, dass ich das Json.NET NuGet-Paket für die Serialisierung und das ViewBag zum Übergeben von Daten verwende.


6

Ich arbeitete mit einer Liste von Toasts (Warnmeldungen) List<Alert>aus C # und benötigte sie als JavaScript-Array für Toastr in einer Teilansicht ( .cshtmlDatei). Der folgende JavaScript-Code hat bei mir funktioniert:

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

Ich habe einen Schieberegler integriert und musste alle Dateien in den Ordner holen und hatte die gleiche Situation von C # -Array zu Javascript-Array. Diese Lösung von @heymega funktionierte perfekt, außer dass mein Javascript-Parser bei der varVerwendung in der foreachSchleife verärgert war . Also habe ich ein wenig daran gearbeitet, die Schleife zu umgehen.

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

Und der Javascript-Code ist

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

Ich hoffe es hilft


4

So erweitern Sie die am häufigsten gewählte Antwort als Referenz, wenn Sie dem Array komplexere Elemente hinzufügen möchten:

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

etc.

Wenn Sie das Array als Parameter an Ihren Controller übergeben möchten, können Sie es zunächst als Zeichenfolge festlegen:

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


Es liegt ein Problem mit Ihrem Code vor. Es sollte sein @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
Asad

1

Dies wäre ein besserer Ansatz, als ich implementiert habe :)

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

Ich hoffe, dies hilft Ihnen dabei, das Modell nicht zu iterieren (Happy Coding).


0

Wenn es sich um ein symmetrisches (rechteckiges) Array handelt, versuchen Sie, es in ein eindimensionales Javascript-Array zu verschieben. Verwenden Sie Rasiermesser, um die Array-Struktur zu bestimmen. und dann in ein zweidimensionales Array verwandeln.

// 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);
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.