Adding a row of textboxes dynamically for input

How to add a row of column dynamically when user click the link to add new row?

Below illustration were done in MVC framework whereby as it is not as easy as using the control directly in web form. These concerns are populate data into the drop down list, passing back all newly added data to the controller and retrieving all data for display when page load.

dynamicAdd

In my view page, I have added the below code.

dynamicAdd2In script section, I have added a few function calls in document.ready. when page load, those method will be trigger.

dynamicAdd3In initRelationship(), is to retrieve stored values to be display in the textboxes. The first ajax postback is to retrieve a list of objects of data to be display and second ajax postback is to retrieve a list of relationship type to be display in the dropdownlist. After that, it will loop through the list of relationship type to check which one is the selected one based on the data get from list of objects. After that, all the options will be added to a string of HTML code to be appended to the div tag.

dynamicAdd6When ‘add another account’ link is click, below code will be trigger to add a new row. I have used ajax to get the list of relationship type to added to dropdownlist options before append the string of HTML code to the div tag.

dynamicAdd4Below method is just solely to assigned values to the rows of textboxes if anything left out populated into the UI controls. Can ignore this is above have done it.dynamicAdd5How to pass all these data back to the controller to be process? For all the UI controls above, the name must be the same eg. p_Relationship, p_Relationship[1]…in array format. It will automatically populated into the list in the model.

dynamicAdd7

 

When it post back to controller, you will get all the data to be process!! dynamicAdd8

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s