Razor MVC Mengisi array Javascript dengan Model Array


100

Saya mencoba memuat array JavaScript dengan array dari model saya. Menurut saya hal ini harus dimungkinkan.

Tak satu pun dari cara di bawah ini berhasil.

Tidak dapat membuat loop JavaScript dan kenaikan melalui Model Array dengan variabel JavaScript

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

Tidak dapat membuat lingkaran Razor, JavaScript berada di luar cakupan

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

Saya bisa membuatnya bekerja

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

Tetapi saya tidak tahu mengapa saya harus menggunakan JSON.

Juga sementara saat ini saya membatasi ini menjadi 255 byte. Di masa mendatang bisa mencapai banyak MB.


1
Anda dapat mengakses pisau cukur di js tetapi tidak sebaliknya
Ehsan Sajjad

Jawaban:


216

Ini dimungkinkan, Anda hanya perlu memutar melalui koleksi pisau cukur

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

Semoga ini membantu


Kecuali saya harus mendeklarasikan array saya menggunakan notasi berikut var myArray = new Array ();
Tom Martin

Gald berfungsi - Ya, jika tidak maka akan mencari objek C # yang disebut myArray.
heymega

1
Bantuan besar. Saya pikir saya akan memiliki masalah besar dengan membuat objek javascript dari kamus model.
IAbstract

Terima kasih! Saya membutuhkan ini, karena saya harus meneruskan Daftar String ke Javascript dan kemudian ke Skrip Ketik untuk Aplikasi Angular saya :)
Bluesight

@mmcrae, @ddideklarasikan di dalam loop foreach. Perhatikan bahwa d memiliki istilah VAR di depan. Itu memungkinkannya untuk digunakan di dalam foreach loop
JhWebDev

8

Sintaks JSON adalah sintaks JavaScript untuk mengkodekan objek Anda . Karena itu, dalam hal keringkasan dan kecepatan, jawaban Anda sendiri adalah yang terbaik.

Saya menggunakan pendekatan ini saat mengisi daftar dropdown dalam model KnockoutJS saya . Misalnya

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>

Perhatikan bahwa saya menggunakan paket NuGet Json.NET untuk serialisasi dan ViewBag untuk meneruskan data.


7

Saya sedang mengerjakan daftar toast (pesan peringatan), List<Alert>dari C # dan membutuhkannya sebagai array JavaScript untuk Toastr dalam tampilan parsial ( .cshtmlfile). Kode JavaScript di bawah ini yang berhasil untuk saya:

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

Saya mengintegrasikan slider dan perlu mendapatkan semua file di folder dan memiliki situasi yang sama dari array C # ke array javascript. Solusi oleh @heymega ini bekerja dengan sempurna kecuali parser javascript saya terganggu saat vardigunakan dalam foreachlingkaran. Jadi saya melakukan sedikit pekerjaan untuk menghindari 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());

Dan kode javascriptnya adalah

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

Semoga membantu


4

Untuk memperluas jawaban pilihan teratas, sebagai referensi, jika Anda ingin menambahkan item yang lebih kompleks ke array:

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

dll.

Selain itu, jika Anda ingin meneruskan array sebagai parameter ke pengontrol, Anda dapat merangkainya terlebih dahulu:

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


Ada masalah dengan kode Anda. Seharusnya @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
Asad

1

Ini akan menjadi pendekatan yang lebih baik karena saya telah menerapkan :)

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

Semoga ini akan membantu Anda mencegah Anda dari iterasi model (selamat coding)


0

Jika itu adalah larik simetris (persegi panjang) maka Coba dorong ke dalam larik javascript berdimensi tunggal; gunakan pisau cukur untuk menentukan struktur larik; dan kemudian berubah menjadi array 2 dimensi.

// 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);
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.