ASP.NET MVC 3の子コレクションを持つモデル

Question

Webフォームの背景から来るASP.NET MVC 3を学習しようとしています。 MVCのやりたいことを実装する方法は何かを試してみようとしていますが、実際には難しいのは、私は何をgoogleにするのかわからないことです。

私が頭を下げることができないのは、より複雑なモデルで作業する方法です。 asp.netサイトのすべてのチュートリアルでは、かなり単純なデータオブジェクトを扱うので、単純なエディタでデータを管理することができます。

は架空のパーティー予約アプリケーションのためのモデルを想像： -

 
public class Party 
{ 
    public string PartyName {get;set;} 
    public DateTime PartyDate {get; set; } 

    public ICollection<Guest> Guests {get; set;} 
} 

public class Guest 
{ 
    public string Name {get; set;} 
    public string EmailAddress {get; set;} 
} 

ここで重要なゲストのコレクションです。

達成する方法を理解したいと思います。コントローラ+ビューを実装してパーティを作成し、同時に新しいゲストを1ページに追加する方法があります。/ajaxでページ内の機能を削除する）。

asp.net Webフォームの同様のアプリでは、ゲストの機能をUpdatePanelに入れることは簡単です。しかし、私はMVCでこれを実装する方法についてはわかりません。

誰もが任意のヒント、ポインタ、または類似のトピックを議論する記事へのリンクを持っている場合は、私は非常にGREATFULだろう、

おかげ

スリップ

Answer 1

多くのゲストの追加を処理するためにjQuery ajaxを使用します。

1）モデルポップアップを使用する [ゲストの追加]ボタンをクリックすると、モデルダイアログでmのゲストが返されます（jQuery UIダイアログはここで使用する1つのオプションです）。 ajaxのポストコールを使用してデータを保存します。成功イベントの1つ、ゲストのメインフォームリストに新しいゲストデータを追加するか、またはjqueryのロードを使用してそのパーツをリロードする

2）インプレースの追加ゲストの追加ボタンをクリックすると、フォームを表示する（動的に入力ボックスを作成し、さまざまな方法でjavascriptからボタンを保存することができます）。 jQueryのajaxポストを使用してデータを保存します。データをjsonとして送信します。パラメータ名は、あなたのViewModelのプロパティ名と一致している限り、あなたのアクションメソッドは、データスクリプト

$(function(){ 
    //Show the hidden form 
    $("#addNew").click(function(){ 
     $("#divForm").fadeIn(300); 
    }); 

    //Save the new guest details 
    $("#btnSaveGuest").click(function() { 
    var name=$("#txtName").val(); 
    var email=$("#txtEmail").val(); 
    $.ajax({ 
     url: '@Url.Action("SaveGuest","Guest")', 
     data: {Name: name, EmailAddress :email}, 
     success: function(data) { 

     if(data=="true") 
     { 
      //Saved successfully.May be append to list of Guest 
      $("#divGuests").append("<p>"+name+"</p>"); 
     } 
     else 
     { 
      //Error. Show msg to user 
     } 
     } 
    }); 
    }); 
}); 

あなたのアクションメソッドに

あなたのHTMLページ

<a href="#" id="addNew"> Add Guest</a> 

<div id="divForm" style="display:none"> 
    <input type="text" id="txtName" /> 
    <input type="text" id="txtEmail" /> 
    <input type="button" id="btnSaveGuest" value="Save"/> 
</div> 
<ul> 

<div id="divGuests"></div> 

を受け入れることができます保存

[HttpPost] 
public ActionResult SaveGuest(Guest objGuest) 
{ 
    try 
    { 
    // read the objGuest property values and Save to db 

    return "true"; 
    } 
    catch(Exception e) 
    { 
    //Log error 
    return "false"; 
    } 
} 

ここにサンプルアプリがあります。http://jsfiddle.net/Qzk3F/16/ （一部の値は一例にハードコードされている）

Answer 2

行うには、いくつかの方法があります。これは考慮されていますが、基礎となるデータベース・レイアウトです。ビューを作成するときには、Partyオブジェクトに強く入力してから、ゲストのコレクションを介してゲスト属性にアクセスできます。その後、Partyモデルにゲストを作成するためのメソッドを追加します。また、コレクションの有無にかかわらず、パーティーとゲストのモデルを別々にしてから、パーティーとゲストを結びつけるビューモデルを作成することもできます。次に、ビューをビューモデルに強く入力します。

これを行うには、より適切な方法や「正しい」方法があります。

Answer 3

は、その後、あなたが

EDITをPartyModelとGuestModel

の両方にアクセスできるようになりますビューにBookingModelをバインドする第三の容器モデル

public class BookingModel 
{ 
    public Party PartyModel { get; set; } 
    public Guest GuestModel { get;set; } 
} 

を使用します：おっと、質問をもう一度読んでください。

public ActionResult AddGuest(string name) 
{ 
    BookingModel.Guests.Add(new Guest() { Name=name }); 
} 

は明らかにあなたが最初BookingModelへの参照が必要になります：

public class BookingModel 
{ 
    public Party PartyModel { get; set; } 
} 

は、その後、あなたのBookingController方法があります。必要に応じて、または「結合されていない」入力を使用するだけで、ゲスト用のPartialViewを作成することもできます。