I have an ASP.Net website, and on one of the pages on which I use the repeater to perform several iterations of UserControl, this UserControl contains a second UserContol that has two text fields into which my User should enter the information. I want my user to press a button and add another instance of the second UserControl (with two text fields) to my original UserControl, so that the user has 4 text fields displayed on the screen for the first UserControl. The problem that I see if I try to add a second UserControl to this iteration of the first is that the postback of the page causes any other of these second user controls to be removed from the page.
Does anyone know how to do this using jQuery? I had three posts that describe how to solve this problem using dynamic elements on the server side and / or AJAX, but we decided to focus on the JQuery solution, because this server-side mechanism is too expensive for resources.
I am working on the Zincorp proposal below, and now jQuery is working on cloning a text field, but it was having problems using the Request.Form collection on the server side to iterate over the controls. Can someone post an announcement on how to iterate over the Request.Form collection?
Well, I think the problem with iterating the controls using the Request.Form.AllKeys collection turned out to be the one that I used the HTML text field, not ASP TextBox Control. Apparently, the Request.Forms.AllKeys collection contains only ASP controls, not HTML controls.
The problem that I see now is that when I clone a control in JQuery and then send my page using the submit button, the two controls have the same identifier and therefore are combined (I think) by http into one ASP Controls TextBox containing both values, with a comma delimiter (for example, 40.20). Does anyone know how to get the new id assigned to the cloned ASP TextBox?
Here is the updated markup in the example ASP.Net web application:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="ProjectDisplay" Text="Project" />
<asp:TextBox ID="ProjectValue" runat="server" ></asp:TextBox>
<div id="mydiv" ></div>
<br />
<br />
<br />
<input id="AddProject" type="button" value="Add Project" />
<br />
<br />
<asp:Button ID="Submit" runat="server" Text="Submit" onclick="Submit_Click" />
</div>
</form>
</body>
</html>
<script language="jquery" src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function() {
$("#AddProject").click(function() {
var x = $("#ProjectValue").clone();
x.appendTo("#mydiv");
});
});
</script>
, Request.Form, :
public partial class _Default : System.Web.UI.Page
{
protected void Submit_Click(object sender, EventArgs e)
{
foreach (string s in Request.Form.Keys)
{
object x = Request.Form[s];
}
}
}