0

私は次のクラスを持っています...

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public IList<SizeOption> SizeOptions { get; set; }
    public IList<ColorOption> ColorOptions { get; set; }
    public IList<Product> SimilarProduct  { get; set; }
}

これらの追加クラスのそれぞれの詳細については詳しく説明しません。重要なのは、Productに子コレクションである複数のプロパティが含まれていることです。

これらの製品の管理に役立つASP.NETMVC3（Razor）Webアプリケーションを開発しています。

UIは、低レベルの製品の詳細（Id、Name、Priceなど）を編集するための1つの領域と、それに続くProductの子コレクションごとに以下の個別の領域を持つように機能する必要があります。（クライアントは、製品に関するすべてを1つの画面で管理したいと考えています）。

これらの領域にはそれぞれ[追加]ボタンがあり、テキストボックスとさまざまな選択/チェックボックス要素を含む新しい動的行を作成して、ユーザーがそのオブジェクトのオプションを指定できるようにします。ユーザーは、必要なだけ子オブジェクトのこれらの行を追加/削除できます...これはすべて、jQueryを使用してクライアント側で発生します。フォームを送信するまで何も保存されません。

私が問題を抱えているのは、関係するレイヤーをどのように設計するのが最善かということです。

Add Product現在、ビューとビューで使用される編集フォームの部分ビューがありEdit Productます。この部分ビューは、JavaScript関数を利用して動的行を作成します。これらの動的行のマークアップは、次の方法でこれらの関数で作成されます。

var newRow = $('<tr>').append(...) // etc.
table.append(newRow);

このアプローチの問題は、Edit Productビューをロードするときに、モデルの子コレクションを反復処理して行のHTMLマークアップを出力することにより、MVCを使用して既存の子行を記述していることです。例えば...

@foreach(var sizeOption in Model.SizeOptions)
{
     <tr>... etc.</tr>
}

これは、行のUIを複製していることを意味します...これは好きではありません。モデルをJsonにシリアル化し、Jsonオブジェクトのデータに基づいてクライアント関数を呼び出してUIコードを一箇所に保持しようとしましたが、これにより目に見えるレイテンシーが発生します。これも好きではありません。

最後に、MVCを幸せに保つために、フォームが最終的に投稿されたときに、HTMLテーブルを繰り返し、フォーム要素のName属性を更新しProduct.SizeOptions[0].PropertyNameて、MVCビューエンジンが完全にハイドレイトされたビューモデルを引数として提供するようにします。私のアクションメソッドのために。

最終的には、このタイプの動的な追加/編集をスケーラブルで保守可能な方法で処理する方法についてのアドバイスを探しています。

助けてくれてありがとう！

4

1 に答える 1

2

次のブログ投稿がおもしろいと思うかもしれません。その中で、Steven Sandersonは、ASP.NETMVCで可変長リストを動的に編集できる優れた手法を示しています。これは、入力フィールドの適切な名前を生成できるカスタムヘルパーを使用して、フォームが送信されたときにデフォルトのモデルバインダーが値を正常に取得できるようにします。行の追加に関する限り、彼はAJAXを使用して、DOMに追加されるだけの部分ビューをレンダリングするコントローラーアクションを呼び出します。

于 2012-05-23T20:30:20.177 に答える