Model with child collections in ASP.NET MVC 3

Question

I'm trying to learn ASP.NET MVC 3 coming from a web forms background. I'm trying to work out what would be the MVC way of implementing what I want, and the actual difficultly is that I am not sure what to google!

What I can't get my head around is how to work with more complex models. All the tutorials on the asp.net site work around fairly simple data objects, and consequently rather simple editors to manage the data with them.

Imagine a model for a hypothetical Party booking application:-

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;}
}

The key here is the collection of guests.

What I want to understand how to achieve, is how to implement a controller+view which would allow me to create a Party and also add new Guests at the same time, in a single page (and preferably with the guest add/remove functionality in-page in ajax).

In a similar app in asp.net web forms, it would be straight forward to put the functionality for the guests in an UpdatePanel. But I am not sure how to go about implementing this in MVC.

If anyone has any tips, pointers, or links to articles that discuss similar topics, i'd be very greatful,

Thanks

slip

Shyju · Accepted Answer · 2012-04-12 13:39:09Z

Use jQuery ajax to handle adding many guests.

1) With a Model Popup When you click on the Add Guest button, Call your Action method which returns the Guest for m in a model dialog ( jQuery UI dialog is one option to use here). Save the data using an ajax post call. One the success event, append the new guest data to the main forms list of guests or reload that part only using jquery load

2) Inpage Adding When you click on the Add Guest button, In the main form itself, Show the form ( you can dynamically create input box and save button from javascript in a variety of ways). save the data using a jQuery ajax post. Send the data as a json.As long as the parameter names matches with the property name of your ViewModel, your action method can accept the data

Your HTML page

<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>

In your script

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

Your Action method to save

[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";
  }
}

Here is a sample app : http://jsfiddle.net/Qzk3F/16/ (some values are hardcoded in the example)

Brian · Accepted Answer · 2012-04-12 13:21:41Z

0

There are a number of ways to do this, but part of the consideration is the underlying database layout. When creating the view, you can strongly type it to the Party object and then via the collection of guests, you will have access to the guest attributes. Then add the methods for creating guests to the Party model. Alternatively you can have separate models for party and guest with or without the collection and then create a view model that ties the party to the guest. Then strongly type the view to the viewmodel.

There are probably better or "more correct" ways to do this as well.

answered Apr 12, 2012 at 13:21

Brian

2,25918 silver badges24 bronze badges

Comments

Dave Becker · Accepted Answer · 2012-04-12 13:54:38Z

0

Use a third container model

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

Then bind the BookingModel to the view where you'll be able to access both PartyModel and GuestModel

EDIT: Oops just read the question again.

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

Then in your BookingController have a method:

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

Obviously you'll need a reference to BookingModel first. You can also create a PartialView for the Guest if you want or just use some 'unbound' inputs.

edited Apr 12, 2012 at 13:54

answered Apr 12, 2012 at 13:49

Dave Becker

1,4331 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

Model with child collections in ASP.NET MVC 3

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related