Razor MVC 모델 배열로 자바 스크립트 배열 채우기


100

내 모델의 배열로 JavaScript 배열을로드하려고합니다. 이것이 가능해야 할 것 같습니다.

아래 방법 중 어느 것도 작동하지 않습니다.

JavaScript 루프를 생성하고 JavaScript 변수가있는 모델 배열을 통해 증가 할 수 없습니다.

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

Razor 루프를 만들 수 없습니다. JavaScript가 범위를 벗어났습니다.

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

나는 그것을 작동시킬 수 있습니다.

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

하지만 왜 JSON을 사용해야하는지 모르겠습니다.

또한 현재로서는 이것을 255 바이트로 제한하고 있습니다. 앞으로는 많은 MB로 실행될 수 있습니다.


1
js에서 면도기에 액세스 할 수 있지만 그 반대는 불가능합니다
Ehsan Sajjad

답변:


216

가능합니다. 면도기 컬렉션을 반복하면됩니다.

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

도움이 되었기를 바랍니다


다음 표기법을 사용하여 배열을 선언해야하는 경우를 제외하고 var myArray = new Array ();
Tom Martin

Gald 작동합니다. 그렇지 않으면 myArray라는 C # 개체를 찾습니다.
heymega 2014 년

1
큰 도움. 모델 사전에서 자바 스크립트 객체를 만드는 데 큰 문제가 있다고 생각했습니다.
IAbstract

감사합니다! 나는 자바 스크립트에 문자열 목록을 전달한 다음 Angular 앱의 Typescript에 전달해야했기 때문에 이것이 필요했습니다. :)
Bluesight

@mmcrae @d는 foreach 루프 내부에서 선언됩니다. d 앞에는 VAR이라는 용어가 있습니다. 이를 통해 foreach 루프 에서 사용할 수 있습니다.
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를 사용하고 있습니다.


7

List<Alert>C #에서 토스트 (경고 메시지) 목록으로 작업 중이 었고 부분보기 ( .cshtml파일) 에서 Toastr의 JavaScript 배열로 필요했습니다 . 아래 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);
});

4

나는 슬라이더를 통합하고 폴더의 모든 파일을 얻을 필요하고 @heymega 내 자바 스크립트 파서에 짜증 것을 제외하고 완벽하게 작동하여 자바 스크립트 array.This 솔루션 같은 situationof의 C #을 배열을 가진 하였다 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));

도움이되기를 바랍니다.


4

더 복잡한 항목을 배열에 추가하려는 경우 참조를 위해 상위 투표 답변을 확장하려면 다음을 수행하십시오.

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

기타

또한 배열을 컨트롤러에 매개 변수로 전달하려면 먼저 문자열화할 수 있습니다.

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


코드에 문제가 있습니다. 그것은 @:myArray.push(ClassMember1: "@d.ClassMember1", ClassMember2: "@d.ClassMember2");
Asad

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.