javascript - Razor内のjQuery /データ属性に複雑なオブジェクトを保存する方法は?

Question

私の Razor マークアップでは、モデル コレクションをループしてテーブル行を出力しています。現在、アイテム ID を各テーブル行の「data-id」属性に格納しています。ただし、行ごとにオブジェクト全体を保存する必要があるため、将来の ajax 呼び出しを節約できます。jQuery が後で使用できるように、Razor 出力に行ごとに完全なオブジェクトを保存する良い方法は何ですか?

Answer 1

エンコードされた json 文字列を持つ隠しフィールドを使用することもできます。これにより、javascript コードでオンデマンドで jSon を解析できます。要件に応じて、行ごとに隠しフィールドがあります..

@foreach(var item in Model.Whatever) {
 <tr data-id="@item.Id"> ... etc </tr>
 <input type="hidden" val="@Json(model)" />
}

Answer 2

Knockout.jsやその他のモデルベースのテンプレート Javascript 言語 (Backbone、Angular など、たくさんあります) の使用を検討しましたか? モデル全体を Javascript にバインドする (JSON にシリアル化する) だけです。その後、テンプレートを使用してテーブルを生成できます。これが私があなたにできる最善のアドバイスです。

クイック/ハックな方法が必要な場合は、いつでも次のようにすることができます。

<script>
var dataMap = {};
</script>

@foreach(var item in Model.Whatever) {
 <tr data-id="@item.Id"> ... etc </tr>
 <script>
dataMap['@item.Id'] = @Json(item); // you'd have to make a Html helper to do this
</script>
}