I’ve seen in some websites that let their users add a record by entering to some text boxes in a raw and there is a plus icon which lets them to add another record if they have one, in a fashion like below:
Phone number: |____| Name: |_________| +
|___Add_Button___|
and if user has another record, then he clicks on that plus icon and the form becomes like this:
Phone number: |____| Name: |_________| –
Phone number: |____| Name: |_________| +
|___Add_Button___|
and after a few rows something like this:
Phone number: |____| Name: |_________| –
Phone number: |____| Name: |_________| –
Phone number: |____| Name: |_________| –
Phone number: |____| Name: |_________| –
Phone number: |____| Name: |_________| –
Phone number: |____| Name: |_________| +
|___Add_Button___|
Would you please tell me how can this be achieved in Asp.net WebForms and/or give me some hints on what is this structure and how others have implemented it? (preferably a server-side solution)
At first i dont understand why do you need a server side solution for this, unless / otherwise there is a special need for the same.
You can achieve this in multiple ways
1 Build controls on the client side
You can build controls on the client side when user clicks on + or – and keep adding them to your container, and finally or periodically if you wish you can save changes to the server using a callback.
on the client side you can uniquely name the controls to fetch values from them during save. some thing like tbx_phone_number_1 , tbx_phone_number_2 and so on
You can also have a JSON at the client side and for every – and + you can push the records in to json and finally send JSON back to server to save.
2 Build controls on the server side
Upon every click on + or – you do a post back and build controls on the server side, this is a tedious process in which you waste resources like network bandwidth and server performance.
Dynamically add rows to table
Adding rows and columns to a table dynamically with jQuery
add controls dynamically
How do i add input fields (textbox) to a table dynamically created with jQuery