How to post a dynamically created fields in a table using jquery / asp.net mvc

Question

I have a button that will create a new entry (row in a table) dynamically using jQuery. Each entry is a row in a html table.

For each row, each column has an input (textbox, radio button, checkbox) etc.

Because you can add as many rows as you like you end up with some array or collection of these rows.

When I post the form, I don't seem to see this data in the formscollection and don't quite understand how to translate these controls into a data object for binding.

So essentially there is 2 questions:

1. Is there any issue with dynamically created controls and making sure they show up in the form post?

2. What is a way to pass along a table structure of data to my controller. I almost want to have each row represent some Record Object and then pass over a collection of records to the controller if something like that is possible.

Any suggestions?

Answer 1

To get a collection, make sure the name of the textboxes is something like "MyRecord.MyList[0].Field1". MVC will automatically pull that up to an enumerable. For your javascript adds, just make sure each added row has a properly incremented index (eg, new fields named "MyRecord.MyList[1].Field1").

Answer 2

You do need to make sure your dynamically created elements are between the form tags.

The default model binding will bind to an array of objects if you make sure to name your fields in such a way that they become 'Thing[3].Name' (this is the Name field in the fourth row, zero bound array)

Your signatture for your Action method then becomes some like:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult MethodName(thing[] things)
{
    ...  
}

Kindness,

Dan

Answer 3

Make sure each row's ID is unique, but it should post back if within the form that's posting to the server... How are you doing the post? Are you doing the post with JQuery?