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

Answer 1

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)