web-dev-qa-db-ja.com

Razor MVC Javascript配列にモデル配列を設定

モデルの配列を使用して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に達する可能性があります。

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

これは可能です。かみそりコレクションをループするだけです

<script type="text/javascript">

    var myArray = [];

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

    alert(myArray);

</script>

お役に立てれば

181
heymega

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
Donal Lafferty

私はトースト（アラートメッセージ）のリスト、C＃からのList<Alert>を使用していましたが、部分ビュー（.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
Soma Mbadiwe

参照用に、より複雑なアイテムを配列に追加する場合に、上位投票の回答を展開するには：

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

等.

さらに、配列をコントローラーにパラメーターとして渡したい場合は、最初に文字列化できます。

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

2
mcfroob

私が実装したように、これはより良いアプローチでしょう:)

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

対称（長方形）配列の場合は、1次元javascript配列にプッシュしてみてください。かみそりを使用して配列構造を決定します。次に、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);
}
0
John Arundell