3

さまざまなプロパティを持つモデルがありますが、関心のあるものは別のタイプのモデルのリストです。

例えば：

   public class User
    {
        public string Name { get; set; }
        public string Description { get; set; }

        public IEnumerable<UserInterest> Interests { get; set; }
    }

次に、ビュー内でエディターテンプレートを使用して、モデルアイテムの各アイテムのビューをレンダリングします。

@Html.EditorFor(x => x.Interests)

EditorForテンプレートは次のようになります。

@model Interest

<div>
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.InterestText)
    @Html.CheckBoxFor(x => x.Delete)
   ....
</div>

ここで受け入れられた答えに非常に似たもの：モデルのリストを含むモデル（MVC-3、Razor）

私の質問は、クライアント側（jQuery）から、サーバーに戻らずにプロパティ内に新しいアイテムをどのように作成するかということです。私は現在、データをコントローラーにポストバックするという大まかな方法​​を持っています。コントローラーは、Interestsプロパティ内の新しい空白のアイテムでモデルを返します。

これは、HTTPリクエストを作成するのはやり過ぎであり、あまりエレガントではないようです。jQuery .Clone（）を使用することを考えていましたが、要素に名前を付けたり、既存の値をクリアしたりするために何をする必要があるのか​​完全にはわかりませんでした。

だから、誰かが何か提案がありますか。より多くの意見やさまざまなアプローチを期待しています。

4

3 に答える 3

2

テキストボックスとチェックボックスをその場で作成し、それをDOMに追加するだけです。保存するときは、jQuery ajaxを使用してそのデータ（新しいレコードデータ）をアクションメソッドに投稿し、そこに保存します。アクションメソッドからクライアント側コード（jQuery ajax / postのコールバック関数）にステータスを戻し（成功/失敗）、そこで確認します。成功した場合は、成功メッセージをユーザーに表示しappend、新しいアイテムを既存のリストに表示します。

サンプルjSFiddle： http: //jsfiddle.net/carwB/2/

いくつかの複雑なデータ（例：IDを持つすべての新しいレコードなど）をステータスとともに返したい場合はJSON、アクションメソッドから戻ることができます。

編集：モデルバインディングが新しく追加された動的要素で機能するようにするには、要素の命名規則に従う必要があります。

秘訣は、html要素のidプロパティ値をこの形式で保持することです。 CollectionName_ ItemIndex __PropertyName

この形式でプロパティ値に名前を付けます

CollectionName [ ItemIndex ] .PropertyName

サンプルの作業プログラムを作成し、要件に基づいてここでどのように機能するかを説明しました。

于 2012-09-17T13:40:44.353 に答える
1

そのような状況では、私はクライアントテンプレートを使用することを好みます。ajaxを使用してサーバーにデータを送信してから、を受信しますJsonResult。JsRenderを見てください。これは、jQueryに依存しないjavascriptlibです。

于 2012-09-17T13:45:01.497 に答える
1

1. 2つの部分ビューを作成します。1つはリストアイテム用で、もう1つは作成用です。

2.最初の部分ビューは、IDが「divMdeolList」のdiv内にある必要があります

3.そして作成ビューにはそのようなコードがあります

@using (Ajax.BeginForm("SubmitData", new AjaxOptions { UpdateTargetId = "divMdeolList" }))
{
 @Html.TextBoxFor(x => x.InterestText)
  <p>
            <input type="submit" value="Create" />
  </p>
}

4.次に、パーシャルビューをレンダリングするActionResultタイプのアクションをコントローラー上に作成します

public ActionResult SubmitData(YourModel model)
{  
  //Do : save the record 
  return PartialView("FirstPartailView", model);
}

これにより、ポストバックなしでビューが更新されます

于 2012-09-17T13:56:33.897 に答える