Posting Complex Object through Ajax to MVC

Question

I have been fiddling with MVC for quite some time now and I'm interested in creating a mini-application that records all cd-contents under one cd. My main hurdle for now is how can I pass on a list of Contents to a Cd.class along with other property values?

public class Cd
{
    public int CdId { get; set; }
    public string Description { get; set; }
    public virtual ICollection<Content> Contents { get; set; } 
}

public class Content
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string ContentType { get; set; }
}

View:

 $.ajax({
 url: '/cd/addCd',
 type: 'POST',
 data:$('form').serialize()
    });

@using(Html.BeginForm()){
@Html.LabelFor(x=>x.CdId)
@Html.TextBoxFor(x=>x.CdId) <br/>
@Html.LabelFor(x=>x.Description)
@Html.TextBoxFor(x=>x.Description)<br />
<input type="submit" value="Submit" id="submit"/>

}

Please do note that the CdId and Description values are already passed on by the Serialize function of ajax - only the Contents property is the one I'm having trouble grasping the idea

Update

I solved my query by creating an ajax snippet that sends the serialized data to the controller:

 $.ajax({
            type: 'POST',
            url: 'http://localhost:54004/Cd/AddCd',
            data: JSON.stringify(formData),
            contentType:'application/json;charset=utf-8'
        })
        .success(function () { })

With the following formData obj:

   var formData = {
        'Description': "Learning Visual Studio 2012",
        'CdId': 1,
        'Contents': [{ "Id": 1, "Name": "Video #1", "ContentType": "Mp4" }, { "Id": 2, "Name": "Video #2", "ContentType": "Mp4" }]
    };

Now the controller is now receiving the full set of Cd entity value along with its Content. Hope this could serve useful to someone in the future.

Answer 1

Best way to achieve what you want is to remove the JQuery and replace your HTML.BeginForm with Ajax.BeginForm

@using(Ajax.BeginForm()){
@Html.LabelFor(x=>x.CdId)
@Html.TextBoxFor(x=>x.CdId) <br/>
@Html.LabelFor(x=>x.Description)
@Html.TextBoxFor(x=>x.Description)<br />

@Html.TextBoxFor(x=>x.Contents[0].Id)<br />
@Html.TextBoxFor(x=>x.Contents[0].Name)<br />
@Html.TextBoxFor(x=>x.Contents[0].ContentType)<br />
@Html.TextBoxFor(x=>x.Contents[1].Id)<br />
@Html.TextBoxFor(x=>x.Contents[1].Name)<br />
@Html.TextBoxFor(x=>x.Contents[1].ContentType)<br />
<input type="submit" value="Submit" id="submit"/>
}

Now your Submit button will post to a method Named after your View and Send the entire model

Answer 2

Instead of building the JSON object manually by iterating over, there is an interesting alternative in the form of knockoutmvc (Knockout integrated with MVC)

Check the example - http://knockoutmvc.com/BetterList

It sends a full JSON object without writing any extra code.