14

TL;DR

.NET Razor ビューと AngularJS を使用する場合のベスト プラクティスは何ですか?

環境

私たちは、mvc4 と razor を使用して公開 Web サイト(イントラネット アプリケーションではない) を開発していますが、クライアント スクリプトにあまり慣れていなかったので、知っているものである jQuery から始めました。しかし、状況はますます複雑になってきており、AngularJS に切り替えたいと考えています。

.NET 部分では、Razor テンプレートとUIHintAttribute(さらにいくつかのカスタム テンプレート) を使用して、適切な html "コントロール" をレンダリングします。また、カスタム html 属性を追加して、jQuery 部分に追加情報を提供します (titleツールチップなど)。

そのため、ユーザー インターフェースの動作を設定する宣言的な方法を既に使用しています。

質問

すでにモデルがサーバー側で定義されており、AngularJS もモデルを使用しているため、コードを複製する必要はありませんか?

サーバー側で（ビューで）バインディングをすでに行っているため、データバインディング機能をどのように処理しますか。AngularJS から AJAX 呼び出しを行ってデータをロードする完全な非同期アプリケーションを作成する必要がありますか、それとも両方を混在させることができますか?

これらのテクノロジーの両方を使用しようとするときに、他に注意すべきことはありますか?

Google でいくつかの調査を行いましたが、Razor ビューとテンプレートを AngularJS と混合する詳細な方法を見つけることができません...おそらく、それは良いことではありませんか?

4

2 に答える 2

26

この問題は、MVC と別の JavaScript フレームワーク (Knockout) を使用して数か月間対処していました。最終的に、クライアント側の MV* フレームワークを使用してユーザー インターフェイスをレンダリングする場合は、ほとんどの場合 Razor を捨てることが最善の策であることがわかります。

AngularJS を含む主要な MV* JavaScript フレームワークのほとんどは、UI の状態を維持し、JavaScript モデルまたはビュー モデルに基づいてユーザー インターフェイスをレンダリングすることを前提としています。サーバー側のレンダリングを混ぜようとしてもうまくいきません。

Angular アプリケーションの開発に関しては、MVC が役に立たないと言っているわけではありません。ASP.NET バンドルや縮小化などの優れた機能を引き続き利用できます。また、追加の AJAX 呼び出しを行うのではなく、Razor ビューまたはパーシャルを使用して JSON をページに直接埋め込むと、非常にうまく機能する場合があります。

モデルについては、Breeze.jsを参照してください。これは、サーバー側で ASP.NET と連携してモデル メタデータを共有するデータ アクセス用の JavaScript ライブラリです。

于 2013-06-24T01:18:19.327 に答える
5

angular.js モデルをサーバー側のビュー モデルと同期させる独自のデータ バインディング メカニズムを作成しました。JavaScript モデルは、サーバー側ビュー モデルの JSON シリアル化から生成され、話していたコードの重複を回避します。

SignalR を使用して、サーバーからクライアントのビュー モデルを更新しています。

C# ビュー モデル プロパティのサーバー側の変更は、プロパティへのパス ( Persons[42].Address.Cityなど) と値自体 ( New Yorkなど)を含むパケットとしてクライアントに送信されます。ビュー モデルは、プロパティ パスの生成を処理する基本クラスを継承するため、実際のビュー モデルは非常にきれいに見え、ビジネス ロジックに集中できます。

JavaScript ビュー モデル プロパティのクライアント側の変更は、同じ方法でサーバーに送信されます。変更イベントをキャッチするために、元の JavaScript モデルのすべてのフィールドを get/set プロパティにカプセル化し、セッターが更新パケットをサーバーに送信します。

ビュー モデルのサーバー側メソッドは、同様の方法で呼び出すことができます。ビュー モデル内のすべてのオブジェクトには、 Products[42].Manufacturer.invokeMethod('SendEmail', 'mailsubject', 'mailbody') のように使用できる invokeMethod 関数があります。これにより、メソッド パスProducts[42] .Manufacturer.SendEmail と['mailsubject','mailbody'] の配列としての引数を含むパケットがサーバーに送信されます。

結論として、(一種の) html ビューはサーバー側のビュー モデルにバインドされ、通常の Razor ビューなどの他のシステムが同じオブジェクトで機能します。

ソースコードはここにあります: SharpAngie .

于 2014-05-24T12:20:33.757 に答える