web-dev-qa-db-fra.com

Razor MVC Remplissage d'un tableau Javascript avec un tableau de modèles

J'essaie de charger un tableau JavaScript avec un tableau de mon modèle. Il me semble que cela devrait être possible.

Aucune des méthodes ci-dessous ne fonctionne.

Impossible de créer une boucle JavaScript et d'incrémenter dans une matrice de modèles avec une variable JavaScript

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

Impossible de créer une boucle Razor, JavaScript est hors de portée

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

Je peux le faire fonctionner

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

Mais je ne sais pas pourquoi je devrais utiliser JSON. 

Aussi, alors que je suis en train de limiter cela à 255 octets. À l'avenir, il pourrait rencontrer beaucoup de MB.

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

C'est possible, il vous suffit de parcourir la collection de rasoirs

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

J'espère que cela t'aides

162
heymega

La syntaxe JSON est en gros la syntaxe JavaScript pour coder votre objet . Par conséquent, en termes de concision et de rapidité, votre propre réponse est le meilleur choix. 

J'utilise cette approche lorsque remplissant des listes déroulantes dans mon modèle KnockoutJS . Par exemple. 

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>

Notez que j'utilise le package Json.NET NuGet pour la sérialisation et le ViewBag pour transmettre des données.

7
Donal Lafferty

Je travaillais avec une liste de toasts (messages d'alerte), List<Alert> de C # et j'en avais besoin comme tableau JavaScript pour Toastr dans une vue partielle (fichier .cshtml). Le code JavaScript ci-dessous est ce qui a fonctionné pour moi:

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

J'intégrais un curseur et j'avais besoin de récupérer tous les fichiers du dossier. La solution de @heymega fonctionnait parfaitement, sauf que mon analyseur javascript était contrarié par var utilisé dans foreach boucle. J'ai donc travaillé un peu pour éviter la boucle.

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

Et le code javascript est

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

J'espère que ça aide

4
Ali Umair

Pour développer la réponse votée par le haut, pour référence, si vous souhaitez ajouter des éléments plus complexes au tableau:

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

etc.

De plus, si vous voulez passer le tableau en tant que paramètre à votre contrôleur, vous pouvez le stringifier en premier:

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

2
mcfroob

Ce serait une meilleure approche que j'ai mise en œuvre :)

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

J'espère que cela vous aidera à vous empêcher d'itérer le modèle (codage heureux)

0
Muhammad Essa

S'il s'agit d'un tableau symétrique (rectangulaire), essayez alors ___. utilisez rasoir pour déterminer la structure du tableau; et puis transformer en un tableau à 2 dimensions.

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