3

Webフォームのバックグラウンドから来るASP.NET MVC 3を学ぼうとしています。私は、私が望むものを実装するMVCの方法が何であるかを理解しようとしています.

私が理解できないのは、より複雑なモデルを操作する方法です。asp.net サイトのすべてのチュートリアルは、かなり単純なデータ オブジェクトを扱っているため、それらを使用してデータを管理するためのかなり単純なエディターが使用されます。

架空のパーティー予約アプリケーションのモデルを想像してみてください:-

公開クラス パーティー
{
    public string PartyName {get;set;}
    public DateTime PartyDate {get; 設定; }

    public ICollection<Guest> ゲスト {get; 設定;}
}

公開クラス ゲスト
{
    公開文字列名 {get; 設定;}
    公開文字列 EmailAddress {get; 設定;}
}

ここでの鍵は、ゲストの収集です。

私が達成する方法を理解したいのは、単一のページで (できればゲストの追加/削除機能を使用して) パーティーを作成し、同時に新しいゲストを追加できるコントローラー + ビューを実装する方法です。 -ajax のページ)。

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

誰かがヒント、ポインタ、または同様のトピックを議論する記事へのリンクを持っている場合、私は非常に素晴らしいです.

ありがとう

スリップ

4

3 に答える 3

2

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

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

2) ページ内追加[ゲストの追加] ボタンをクリックすると、メイン フォーム自体にフォームが表示されます (さまざまな方法で JavaScript から入力ボックスと保存ボタンを動的に作成できます)。jQuery ajax post を使用してデータを保存します。データを json として送信します。パラメーター名が ViewModel のプロパティ名と一致する限り、アクション メソッドはデータを受け入れることができます。

あなたの 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>

あなたのスクリプトで

$(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
        }
       }
     });
   });
});

保存するアクション メソッド

[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/ (例では一部の値がハードコーディングされています)

于 2012-04-12T13:23:52.057 に答える
0

3 つ目のコンテナ モデルを使用する

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

次に、PartyModel と GuestModel の両方にアクセスできるビューに BookingModel をバインドします。

編集：おっと、質問をもう一度読んでください。

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

次に、 BookingController にメソッドがあります：

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

明らかに、最初に BookingModel への参照が必要です。「バインドされていない」入力が必要な場合、または単に使用する場合は、ゲスト用の PartialView を作成することもできます。

于 2012-04-12T13:49:12.793 に答える