Razor MVC การเติมอาร์เรย์ Javascript ด้วย Model Array


102

ฉันกำลังพยายามโหลดอาร์เรย์ JavaScript ด้วยอาร์เรย์จากโมเดลของฉัน สำหรับฉันแล้วมันน่าจะเป็นไปได้

ทั้งสองวิธีด้านล่างไม่ได้ผล

ไม่สามารถสร้างลูป JavaScript และส่วนเพิ่มผ่าน Model Array ด้วยตัวแปร JavaScript

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

ไม่สามารถสร้าง Razor loop JavaScript อยู่นอกขอบเขต

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

ฉันสามารถทำให้มันใช้งานได้

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

แต่ไม่รู้ทำไมต้องใช้ JSON

ในขณะนี้ฉัน จำกัด สิ่งนี้ไว้ที่ 255 ไบต์ ในอนาคตอาจมีหลาย MB


1
คุณสามารถเข้าถึงมีดโกนใน js แต่ไม่ใช่ในทางกลับกัน
Ehsan Sajjad

คำตอบ:


220

สิ่งนี้เป็นไปได้คุณต้องวนรอบคอลเลกชันมีดโกน

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

หวังว่านี่จะช่วยได้


ยกเว้นฉันต้องประกาศอาร์เรย์ของฉันโดยใช้สัญกรณ์ต่อไปนี้ var myArray = new Array ();
Tom Martin

มันใช้งานได้ - ใช่มิฉะนั้นจะมองหาวัตถุ C # ที่เรียกว่า myArray
heymega

1
ช่วยได้มาก ฉันคิดว่าฉันมีปัญหาใหญ่ในการสร้างวัตถุจาวาสคริปต์จากพจนานุกรมแบบจำลอง
IAbstract

ขอบคุณ! ฉันต้องการสิ่งนี้เพราะฉันต้องส่ง List of Strings ไปยัง Javascript จากนั้นไปที่ typescript สำหรับ Angular App ของฉัน :)
Bluesight

@mmcrae @dถูกประกาศไว้ใน foreach loop สังเกตว่า d มีคำว่า VAR อยู่ข้างหน้า ซึ่งทำให้สามารถใช้งานได้ภายใน foreach loop
JhWebDev

8

JSON ไวยากรณ์สวยมากไวยากรณ์ JavaScript สำหรับการเข้ารหัสวัตถุของคุณ ดังนั้นในแง่ของความกระชับและรวดเร็วคำตอบของคุณเองคือทางออกที่ดีที่สุด

ผมใช้วิธีนี้เมื่อประชากรของรายการแบบเลื่อนลงในรูปแบบ KnockoutJS ของฉัน เช่น

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>

โปรดทราบว่าฉันใช้แพ็คเกจ Json.NET NuGetสำหรับการทำให้เป็นอนุกรมและ ViewBag เพื่อส่งผ่านข้อมูล


8

ฉันกำลังทำงานกับรายการขนมปังปิ้ง (ข้อความแจ้งเตือน) List<Alert>จาก C # และต้องการให้เป็นอาร์เรย์ JavaScript สำหรับToastrในมุมมองบางส่วน ( .cshtmlไฟล์) โค้ด JavaScript ด้านล่างคือสิ่งที่ใช้ได้ผลสำหรับฉัน:

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

5

หากต้องการขยายคำตอบที่ได้รับการโหวตสูงสุดสำหรับการอ้างอิงหากคุณต้องการเพิ่มรายการที่ซับซ้อนมากขึ้นในอาร์เรย์:

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

เป็นต้น

นอกจากนี้หากคุณต้องการส่งอาร์เรย์เป็นพารามิเตอร์ไปยังคอนโทรลเลอร์ของคุณคุณสามารถสตริงได้ก่อน:

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


มีปัญหากับรหัสของคุณ ควรจะเป็น @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
Asad

4

ฉันกำลังรวมตัวเลื่อนและจำเป็นต้องรับไฟล์ทั้งหมดในโฟลเดอร์และมีสถานการณ์เดียวกันของอาร์เรย์ C # กับอาร์เรย์จาวาสคริปต์วิธีนี้โดย @heymega ทำงานได้อย่างสมบูรณ์แบบยกเว้นตัวแยกวิเคราะห์จาวาสคริปต์ของฉันรู้สึกรำคาญเมื่อvarใช้ในforeachลูป ฉันจึงพยายามหลีกเลี่ยงการวนซ้ำ

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

และรหัสจาวาสคริปต์คือ

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

หวังว่าจะช่วยได้


1

นี่จะเป็นแนวทางที่ดีกว่าเมื่อได้นำไปใช้ :)

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

หวังว่านี่จะช่วยป้องกันไม่ให้คุณทำซ้ำโมเดล (การเข้ารหัสอย่างมีความสุข)


0

ถ้าเป็นอาร์เรย์สมมาตร (สี่เหลี่ยม) ให้ลองดันเข้าไปในอาร์เรย์จาวาสคริปต์แบบมิติเดียว ใช้มีดโกนเพื่อกำหนดโครงสร้างอาร์เรย์ แล้วแปลงเป็นอาร์เรย์ 2 มิติ

// 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);
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.