Razor MVC Preenchendo array Javascript com Model Array


100

Estou tentando carregar um array JavaScript com um array do meu modelo. Parece-me que isso deveria ser possível.

Nenhuma das maneiras abaixo funciona.

Não é possível criar um loop JavaScript e incrementar por meio de matriz de modelo com variável JavaScript

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

Não é possível criar um loop Razor, JavaScript está fora do escopo

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

Eu posso fazer funcionar com

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

Mas não sei por que deveria usar JSON.

Além disso, no momento estou restringindo isso a 255 bytes. No futuro, ele pode rodar em muitos MBs.


1
você pode acessar o barbeador em js, mas não vice-versa
Ehsan Sajjad

Respostas:


215

Isso é possível, você só precisa percorrer a coleção de navalhas

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

Espero que isto ajude


Exceto que tive que declarar meu array usando a seguinte notação var myArray = new Array ();
Tom Martin de

Gald funciona - Sim, caso contrário, ele procurará um objeto C # chamado myArray.
heymega

1
Grande ajuda. Achei que teria grandes problemas para criar um objeto javascript a partir de um dicionário de modelo.
IAbstract

Obrigado! Eu precisava disso, porque tive que passar uma Lista de Strings para Javascript e, em seguida, para Texto Dactilografado para meu aplicativo Angular :)
Bluesight

@mmcrae, @dé declarado dentro do loop foreach. Observe que o d tem o termo VAR na frente. Isso permite que ele seja usado dentro do loop foreach
JhWebDev

8

A sintaxe JSON é basicamente a sintaxe JavaScript para codificar seu objeto . Portanto, em termos de concisão e rapidez, sua própria resposta é a melhor aposta.

Eu uso essa abordagem ao preencher listas suspensas em meu modelo KnockoutJS . Por exemplo

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>

Observe que estou usando o pacote Json.NET NuGet para serialização e o ViewBag para passar dados.


7

Estava trabalhando com uma lista de toasts (mensagens de alerta), List<Alert>em C # e precisava dela como array JavaScript para Toastr em uma visão parcial ( .cshtmlarquivo). O código JavaScript abaixo é o que funcionou para mim:

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

Eu estava integrando um controle deslizante e precisava obter todos os arquivos da pasta e estava tendo a mesma situação de array C # para array javascript. Esta solução de @heymega funcionou perfeitamente, exceto que meu analisador de javascript estava incomodado com o varuso em foreachloop. Então, resolvi evitar o loop.

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

E o código javascript é

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

Espero que ajude


4

Para expandir a resposta mais votada, para referência, se você deseja adicionar itens mais complexos à matriz:

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

etc.

Além disso, se você deseja passar o array como um parâmetro para o seu controlador, você pode restringi-lo primeiro:

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


Existe um problema com o seu código. Deve ser @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
Asad

1

Essa seria a melhor abordagem conforme implementei :)

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

Espero que isso ajude você a evitar a iteração do modelo (feliz programação)


0

Se for uma matriz simétrica (retangular), tente empurrar para uma matriz javascript de dimensão única; use o razor para determinar a estrutura do array; e então se transformar em uma matriz bidimensional.

// 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);
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.