Question

I have a model like this :

public class Person
{
    public string Name {get;set;}
    public List<Pet> Pets {get;set;}
}

public class Pet
{
    public string Type {get;set;}
    public string Name {get;set;}
}

I want a user to capture all this information on a web page before submitting it to the server to save. I came up with a solution to build a table row for each pet that is captured by the user. So my javascript is adding rows to a table for each pet that is captured. When the user clicks on the Save button I build a javascript object:

person.name
person.pets[]

Then I submit this to the server.

The question is, is this the way to go or is there a better way, should I not rather add input elements for each pet, and submit a form?

Answer 1

One common way to do this is with a client side $.ajax call (jQuery) and then a server-side service to consume the data as JSON.

There is a template for automatically creating an ajax-enabled WCF service, at least in VS 2010. Here is a link:

http://msdn.microsoft.com/en-us/library/bb924552.aspx

Basic outline for the client-side script:

  $.ajax(             
  {                 
    type: "POST",                 
    contentType: "application/json; charset=utf-8",     
    url: "WcfService.svc/SomeMethod",                 
    data: JSON.stringify(params), //params is the name and pets data            
    dataType: "json",                 
    success: function (data, textStatus)        
    {
            // do something with the response if necessary
    }          

You would also turn your classes into DataContracts:

 [DataContract]
 public class Person 
 {     
   [DataMember]
   public string Name {get;set;}   

   [DataMember]  
   public List<Pet> Pets {get;set;} 
 }  

 [DataContract]
 public class Pet 
 {     
   [DataMember]
   public string Type {get;set;}  

   [DataMember]    
   public string Name {get;set;} 
 }