How to send complex objectfrom view to controller using ajax?

Question

In my view i`m having various ul each containing various li and each li contains a textbox, in which the user enters information.

<ul id="ul1"><li><input type="text"></li><li><input type="text"></li></ul>

<ul id="ul2"><li><input type="text"></li><li><input type="text"></li></ul>

I also have a table which has 2 columns and various rows. Each column contains a textbox.

My question is as follows: 1. How do I retrieve the values separately [each ul separately and table data]and send them to the controller using ajax?

Answer 1

To post all variable , use jquery $.ajax method

$.ajax({
                    type: "post",
                    url: "yourcontroller URL",
                    cache: false,               
                    data: $('#youformname').serialize(),
                    success: function(json){

                    },
});

Answer 2

Yeah this was a pain for me too. So this is how you can do it. Everything in html needs a unique id but interestingly mvc controller will also que in on the name first. So if you give them all a name of "mytextareaarray" or something like that and put in a variable in the actionmethod called string[] mytextareaarray it should work just fine. Here is how it would look:

<ul id="ul1"><li><input name="mytextareaarray"  type="text"></li><li><input name="mytextareaarray" type="text"></li></ul> 

<ul id="ul2"><li><input name="mytextareaarray"  type="text"></li><li><input name="mytextareaarray"  type="text"></li></ul>