wake-up-neo.net

Razor MVC Javascript-Array mit Modell-Array füllen

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 durch das Model Array inkrementiert werden

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

Razor-Schleife kann nicht erstellt werden, JavaScript ist außerhalb des Gültigkeitsbereichs

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

Ich kann es schaffen, damit zu arbeiten

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

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

Auch im Moment beschränke ich mich auf 255 Bytes. In Zukunft könnte es viele MBs geben.

javascriptarraysasp.net-mvcasp.net-mvc-4razor
75
Tom Martin

Dies ist möglich, Sie müssen nur die Rasierer-Sammlung durchlaufen

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

Hoffe das hilft

162
heymega

JSON-Syntax ist so ziemlich die JavaScript-Syntax für die Codierung Ihres Objekts . Daher ist Ihre Antwort in Bezug auf Prägnanz und Schnelligkeit die beste Wahl. 

Ich verwende diesen Ansatz, wenn ich Dropdown-Listen in meinem KnockoutJS-Modell fülle . 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 Json.NET NuGet-Paket für die Serialisierung und das ViewBag zum Übergeben von Daten verwende.

7
Donal Lafferty

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 (.cshtml-Datei). 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
Soma Mbadiwe

Ich baute einen Schieberegler ein und musste alle Dateien im Ordner abrufen und hatte die gleiche Situation wie das C # -Array mit dem Javascript-Array. Diese Lösung von @heymega funktionierte perfekt, außer dass mein JavaScript-Parser auf var in foreach-Schleife gestört war. Also habe ich ein bisschen gearbeitet, um die Schleife zu vermeiden.

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 lautet

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

Ich hoffe es hilft

4
Ali Umair

Zum Erweitern der am besten bewerteten Antwort als Referenz, wenn Sie dem Array komplexere Elemente hinzufügen möchten:

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

usw.

Wenn Sie das Array als Parameter an Ihren Controller übergeben möchten, können Sie es außerdem als String festlegen:

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

2
mcfroob

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>

Hoffen Sie, dass dies Ihnen helfen wird, Sie daran zu hindern, das Modell zu durchlaufen (glückliche Codierung)

0
Muhammad Essa

Wenn es sich um ein symmetrisches (rechteckiges) Array handelt, probieren Sie Versuchen Sie es in ein Javascript-Array mit einer einzigen Dimension. Verwenden Sie einen Rasierer, um die Array-Struktur zu bestimmen. und dann in ein zweidimensionales Array umwandeln.

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