jqueryasp.net-mvcdynamic-controls

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


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?


Solution

  • 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").