Razorテンプレート、ビュー、angular.js

Question

TL; DR

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

環境

私たちは、mvc4とかみそりを使用して公開Webサイト（イントラネットアプリケーションではない）を開発していますが、クライアントスクリプトにあまり詳しくなかったため、私たちが知っているjQueryから始めました。しかし、今は事態がより複雑になっているので、AngularJSに切り替えたいと思います。

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

そのため、ユーザーインターフェイスの動作を宣言的に設定する方法をすでに使用しています。そのため、AngularJSは適切なオプションのようです。

質問

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

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

これらのテクノロジーの両方を使用しようとするときに、他に知っておくべきことはありますか？

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

Michael McGuire · Accepted Answer

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

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

Angularアプリケーションの開発に関しては、MVCが役に立たないというわけではありません。 ASP.NETバンドルとミニファイのようないくつかの優れた機能を引き続き利用できます。 =。また、追加のAJAX呼び出しを行うのではなく、Razorビューまたは部分を使用してJSONをページに直接埋め込むと非常にうまくいく場合があります。

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

chrwoizi · Answer

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

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

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

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

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

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

ソースコードはここにあります： SharpAngie 。