JavaScriptのJSONオブジェクトの配列をMVCのカスタムビューモデルのRazorページで作成していますか？

Question

私はスクリプトに配列を取り込もうとしています（後でD3.JSでチャートを作成するために使用されます）。 this postによると、私は以下の構文を使用するはずです。しかし、それはうまく行かないので、うまく行かないのです。キャッチされていないReferenceError：WebSiteが定義されていません。は名前空間の名前です私のプロジェクトの名前）。

<script> 
    var data = new Array(); 
    @foreach (var piece in @Model.DataPieces) 
    { 
    @:data.push(@piece); 
    } 
</script> 

私は次の変更は、それが（少なくともエラーの束を生成していない）動作しますので、それは、作品のデータ型に関係しているかなり確信しています。私は個のオブジェクトから個々のフィールドを取り出して、それらを新しいオブジェクトとして配列にプッシュします。

<script> 
    var data = new Array(); 
    @foreach (var piece in @Model.DataPieces) 
    { 
    @:data.push({'cat': '@piece.Category', 'key': '@piece.Key', 'val': '@piece.Value'}); 
    } 
</script> 

モデルが変更されるたびに間違いが発生しやすく、リファクタリングが必要になります。最初のサンプルに示すように、この方法を避けて、割り当て時に自動的にJSONオブジェクトを作成できるようにするにはどうすればよいですか？

剃刀ページのビューモデルは、次のように宣言されています。

namespace WebSite.Models 
{ 
    public class DrillDataViewModel 
    { 
    public List<DataPiece> DataPieces { get; set; } 

    public class DataPiece 
    { 
     public string Category { get; set; } 
     public string Key { get; set; } 
     public int Value { get; set; } 
    } 
    } 
} 

Answer 1

は、カミソリのページからJavaScriptにこれを渡すようにしてください。

@Html.Raw(@JsonConvert.SerializeObject(Model.DataPieces) 
    .Replace("{\"", "{") 
    .Replace(",\"", ",") 
    .Replace("\":", ":")) 

置き換えは、あなたがストリームに再生するために必要または他のライブラリを適用せずに、コンバータにデフォルトで作ら無効な文字を取り除くのに役立ちます。醜いが働いている。

時々、私はまた、1以上の追加、交換：.Replace（「\」」、「'」）表情のようなより多くのJSを得るためにあなたが&の問題を得ることはありませんので、外の方法が必要とされています。 &quote;で。

これは、誰もがより良い方法を知っていれば、私はいくつかのフィードバックを得るのが大好きですので、手でのソリューションです。

Answer 2

ライン@:data.push(@piece);は、あなたがしたいJSONに評価されます何かを@pieceを交換する必要が

data.push(<the result of calling ToString() on @piece>); 

として出力HTMLに書き込まれます。これは動作するはずです：

@:data.push(@Html.Raw(Json.Encode(piece))); 

それとも、単に出力を一度に全体配列することができます

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

Answer 3

てみ var yourJavascriptArray=@Html.Raw(Json.Encode(YouModel));