javascript/jquery用のMVCヘルパーの作成

Question

javascript/jquery用のMVCヘルパーの作成

新しいプロジェクトでは、javascript/jqueryスイートを使用してチャートを表示しています（ http://www.highcharts.com < a>）。各ページのjavascriptコードはほぼ同じなので、一元化して再利用できるものを作りたかったのです。私はASP.NET MVCをこのアプリケーションに使用していますので、javascript/jQueryコードを整理した形で出力するいくつかの設定でservercontrolを作成したいと考えていました。しかし、これをどうやって素早く行うかについてはわかりません。もちろん、長い文字列を作成してページにレンダリングすることはできますが、それはむしろ醜いようです。

だから、私は基本的に、javascriptを管理可能なサーバーコントロールに変換する方法について、最良の方法を探しています。また、JSON Webサービスに自動データバインディングのようなものを追加したいと思っています。

更新;チャート作成に使用したいモデルを作成しました。軸ラベル、チャートタイトル、そのようなものが含まれています。

今私のページで、私はこのようなものを含むjQueryコードを持っています：

title: { text: '<%: Model.Title %>' },

さまざまなチャートプロパティを設定します。しかし、これは良い習慣ではないことを理解しています。私は何があるか分かりません。上記の例では、私のモデルに設定されているときにtitleプロパティを追加するようなことをしたいが、そうでないときは完全に省略している（これは今起きていない）。私はif/elseのものをたくさん追加することでそこに着くことができますが、それはものをもっときれいにするつもりはありません。したがって、私はjqueryコードの構築がクラスで行われるべきものではないことを大声で考えています。

3

追加された 27 10月 2011 〜で 06:50 著者 Jasper 編集された 01 11月 2011 〜で 09:28

ビュー: 12

源

3 答え

著者 Paul Tyng · Answer 1 · 2011-10-27T07:07Z

MVC DisplayTemplatesまたは部分ビューは、HtmlHelpersよりもコントロールに似ています。そのような追加のデータ検索やそのようなことを必要としないちょうどのスクリプトの場合、部分ビューと参照を @ Html.Partial で使用します。追加の機能/セキュリティ/データルックアップがある場合は、子アクション（つまり、 ChartController を作成し、 @ Html.Action（ "ActionName"、 "Chart" 、params）。モデルのプロパティに基づいている場合は、DisplayTemplateを使用します。

しかし、データ要求だけでクライアント側が完全にあれば、私は間違いなくMarquezの推奨することを行い、.jsファイルを持っています。

著者 Marquez · Answer 2 · 2011-10-27T07:06Z

私は、.jsファイルにjavascriptを置いて、単にMVCマスタービュー、ページビュー、またはユーザーコントロールビューのスクリプトタグで参照することをお勧めします。別のファイルにjavascriptを置くことにはいくつかの利点があり、それは良い方法と考えられます。ブラウザでjavascriptコンテンツをキャッシュすると、パフォーマンスが向上し、帯域幅の使用が削減され、firebugやその他のjavascriptデバッガでjavascriptをデバッグするのが簡単になります。

著者 goenning · Answer 3 · 2012-01-04T01:38Z

私は、オープンソースのMVC HTMLヘルパーforハイチャート。それはまだ開発中ですが、結果は本当に好きなので、何とかあなたに役立つことを願っています。これは、Highcharts MVCで何をするかの例です。

@(
    Html.Highchart("myChart")
        .Title(this.Model.Title)
        .WithSerieType(ChartSerieType.Line)
        .AxisX("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
        .AxisY(this.Model.MyChartAxisTitle)
        .Series(
            new Serie("iPad", new int?[] { 0, 0, 0, 0, 0, 0, 16, 20, 40, 61, 100, 120 }),
            new Serie("MacBook", new int?[] { 616, 713, 641, 543, 145, 641, 134, 673, 467, 859, 456, 120 }),
            new Serie("iPhone", new int?[] { 10, 45, 75, 100, null, 546, 753, 785, 967, 135, 765, 245 })
        ).ToHtmlString()
)