ASP.NET: Adding Client-Side Controls

Question

If I have a page with a form (imagine simple using only TextBoxes and a submit button) and I want to allow the user to dynamically add additional text fields to the form via javascript, what is the best way to handle requesting a server?

Example: I have a page that looks like this:

<input type = "text" id = "control1" name = "control1" /> <input type = "text" id = "control2" name = "control2" /> <input type = "text" id = "control3" name = "control3" /> <input type = "submit" /> 

The user runs Javascript, and the page turns out as:

 <input type = "text" id = "control1" name = "control1" /> <input type = "text" id = "control2" name = "control2" /> <input type = "text" id = "control3" name = "control3" /> <input type = "text" id = "control4" name = "control4" /> <input type = "text" id = "control5" name = "control5" /> <input type = "submit" /> 

What is the best way to deal with this situation or, more generally, to work with dynamically generated inputs both on the client side and on the server side (for example, how to generate them on the server side, starting, say, with some data taken from the database data)?

Answer 1

If you want to have access to them in code using the FindControl method, AXAX UpdatePanel is probably the best choice. Just remember that every time you update UpdatePanel, you look at the entire life cycle of the page, but you get only the parts that appear in the update panel from the server, so get tired of the costs.

If you create them dynamically using Javascript, you cannot use FindControl to access them in your code because they will not be recreated during the life cycle of the page event. Also, be careful, because if you create a lot of them at the same time with some kind of loop, it can slow down, especially in Internet Explorer.

You might also consider using AJAX and WebServices with WebMethods to send data instead of post-back if you dynamically create controls using Javascript.

Answer 2

I have done such things many times. My preferred approach usually is to use a repeater and buttons (labeled Add ) inside the UpdatePanel.

For the Button_OnClick event in your code, something like this is behind;

  Loop through the Items collection of the Repeater Use item.FindControl("txtUserInput") to get the TextBox for that item Save the text of each input to List<string> Add an empty string to the the list Databind the repeater to this new list 

Here is a sample code:

 <asp:Repeater runat="server" ID="rptAttendees"> <ItemTemplate> <asp:TextBox runat="server" ID="txtAttendeeEmail" Text='<%# Container.DataItem %>'></asp:TextBox> </ItemTemplate> </asp:Repeater> protected void btnAddAttendee_Click(object sender, EventArgs e) { var attendees = new List<string>(); foreach (RepeaterItem item in rptAttendees.Items) { TextBox txtAttendeeEmail = (TextBox)item.FindControl("txtAttendeeEmail"); attendees.Add(txtAttendeeEmail.Text); } SaveAttendees(); attendees.Add(""); rptAttendees.DataSource = attendees; rptAttendees.DataBind(); } 

Answer 3

On the client side, create a JS function to create inputs, for example:

 var numCtrl = 1; // depends on how many you have rendered on server side var addCtrl = function() { var in = document.createElement('input'); in.name = "control" + ++i; in.type = "text"; in.id = "control" + i; document.getElementById("yourcontainer").appendChild(in); } 

.. on the server side, just find your HTTP parameter collection, swipe through it and select only those that match / control \ d * /

Answer 4

On the server side, look at Request.Form ["controlN"], where you will find your old and new fields.

On the server side, you can add controls dynamically, for example:

 foreach (Type object in MyDBCollection) { Controls.Add (new TextBox ()); } 

Answer 5

You won't have many options in web forms if you expect the values ​​to be returned and will be able to access them in the usual way. I would suggest that you use the Ajax UpdatePanel to allow controls to be registered at the corresponding point in the page life cycle (before onLoad), this will also affect whether drawers are needed for repeated calls. JS methods involved in the other two answers will not be stored in the text fields after the postback.

MVC gives you more options, since there is no this crazy page life cycle, registration control, browsing, etc. to bother you.

So the big question is which model / structure for ASP.Net are you using?

---

Since you really use web forms, I highly recommend that you upgrade with updates if they work for you. this will allow you to add controls so that they do not interfere with eventvalidation, etc.

Answer 6

I started using jquery in many of my webforms applications and found a combination of dynamic controls and using JSON to link to a WebMethods page give me much more control over how the page is presented and eliminate unnecessary postbacks.

When I want to trigger a postback, I use javascript to populate the server controls on the page that are jquery hidden, and then click the server control button. This allows the page to degrade properly if the user cannot use javascript.