Proper way to let user add unspecified records in a special way in ASP.net WebForms

Question

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: |_________| +

|___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)

You might find the ASP.NET GridView control useful to achieve this type of behavior — jbl
– jbl, Commented Nov 14, 2012 at 12:17

Community · Accepted Answer · 2017-05-23 12:27:45Z

2

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

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Nov 14, 2012 at 12:18

Chandra Sekhar Walajapet

2,55418 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeSmithDev Over a year ago

+1. I've done this using jQuery -- make a hidden div that holds the fields. Click "add" appends this html into your form. On submit in code behind, loop through form values and save. If you try this and run into probs, show code. GL!

Community · Accepted Answer · 2017-05-23 12:04:35Z

1

This should give you the server-side functionality you're seeking:

Insert a new record using ListView with a GridView-like interface

Similar functionality:

How to insert a record into a listview control of asp.net using c#?

Using ASP.NET 3.5's ListView and DataPager Controls: Inserting Data

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Nov 14, 2012 at 12:16

IrishChieftain

15.2k8 gold badges55 silver badges98 bronze badges

Comments

Farshid · Accepted Answer · 2012-11-20 09:34:33Z

0

And here is a very good solution:

http://www.aspsnippets.com/Articles/Create-dynamic-textbox-using-JavaScript-in-ASP.Net.aspx

answered Nov 20, 2012 at 9:34

Farshid

5,38410 gold badges63 silver badges89 bronze badges

Collectives™ on Stack Overflow

Proper way to let user add unspecified records in a special way in ASP.net WebForms

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related