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

3 答え

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

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

1
追加された

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

1
追加された
さて、良いアイデアのように聞こえる。しかし、私はchartcontrolsが出力したデータを私がそれを供給しているデータと組み合わせる方法が必要です。 chartcontrolは複数のページで再利用されているので、コントローラで設定することができます。たとえば、y軸がユーザー数を表すページでは、y軸がユーザー数で、グラフに出力するだけであることをモデルに伝えることができます。 jQueryコードを使ってモデルをレンダリングすることでこれを行うことができますが、ここに行く方法はそれほど確かではありません。
追加された 著者 Jasper,

私は、オープンソースの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()
)
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript