C# と JavaScript でコードの重複を避けるためのアイデア

StackOverflow https://stackoverflow.com/questions/2087422

質問

私はasp.net mvc Webサイトを持っており、C#を使用してページの大部分を構築しています。たとえば、ビューモデルからのデータセットを指定してHTMLテーブルを構築しています。

また、これらのテーブルを動的に変更する (たとえば行を追加する) JavaScript もたくさんあります。

新しい行を追加する JavaScript コードは、最初に HTML テーブルを構築するために使用した C# の「レンダリング」コードと非常によく似ています。

C# コードを変更して新しいフィールドを追加するたびに、忘れずに JavaScript コードに戻って同じことを行う必要があります。

もっと良い方法はありますか？

役に立ちましたか？

解決

はこれを行う1つの方法は、サーバー上のWebサービスとしてマークアップを生成し、ロジックを公開することである必要がありJavaScriptを得ることをAJAX呼び出しを経由してマークアップではなく、ロジックを複製します。

この方法で、あなたがその実際にページをレンダリングするときに、サーバー上で使用していることとまったく同じロジック呼び出すJavaScriptからCreateRow方法のようなものを呼び出すことができます。

他のヒント

Scott Gu の記事を見てください。 ASP.NET MVC 2:モデルの検証

基本的に、モデルのプロパティ レベルで検証を定義すると、ASP.NET MVC 2 は適切なクライアント側の検証も自動的に生成できます。

残念ながら、これはすべてを MVC にリファクタリングする必要があることを意味するかもしれませんが、ここにいる多くの人々はおそらくそれをプラスと考えるでしょう。

(免責事項:ASP.NET MVCをまったく使用したことがありません）

@Andrew Hareによる受け入れられた人気のある回答とは対照的です。私は、C# のみでマークアップを実装するよりも、JavaScript のみでマークアップ生成を実装する (そして、それを HTML テーブルの構築に再利用する) ことを好みます (もちろん、JavaScript にもその機能が必要な場合)。

なぜなら：

  1. JavaScript は、すでにレンダリングされた DOM を変更できるため、HTML に関しては C# よりも優れています。したがって、JavaScript を使用すると、静的な HTML 以外にもさまざまなことができます。今は必要ないかもしれませんが、今日では、アプリケーションをよりリッチ インターネット アプリケーションに近づけることを目的とした要件が珍しくなくなりました。
  2. AJAX 呼び出しは、サーバー側のデータを処理して既存のテーブルの新しい行に変換する最悪の Javascript 実装よりも遅くなる可能性が高くなります。また、JavaScript でテーブルを最初から作成するよりも遅くなります。
  3. サーバーリクエストが減ります (クライアント側の要件が増えますが、通常は問題になりません)。
  4. 本当に優れたテーブル (およびその他のもの) を作成する非常に優れた Javascript フレームワークがいくつかあります。

ASP.NET MVC には、コントロールに HTML ヘルパーを使用して、クリーンで高速な開発を実現する方法に関する優れた例がたくさんあることを私は知っています。しかし、いずれにせよ Javascript 関数を作成することになった場合は、関心の分離を再度検討し、JavaScript にこだわり、HTML ヘルパーの重複を破棄する必要があると思います。

すでに行を作成している場合、JavaScript 関数を拡張してテーブル全体を作成することは、それほど難しくないと思います。データを Javascript に渡し、JavaScript にすでにある関数「createRow」を使用する方法のアイデアを次に示します。

<script>
    var data = [];
    <% foreach (var item in Model) { %>
        data.push({
            Id: <%= Html.Encode(item.Id) %>
            , Title: <%= Html.Encode(item.Title) %>
        });
    <% } %> 
    createTableHeader();
    for (var i = 0; i < data.length; i++) {
        createRow(data[i]);
    }
    createTableFooter();
</script>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top