我有一个ASP.Net网站,在我使用中继器呈现UserControl的多个迭代的页面之一上,该UserControl包含第二个UserContol,其中有两个文本框,用户必须在其中输入信息.我希望能够让我的用户按下一个按钮,然后将第二个UserControl的另一个实例(带有两个文本框)添加到我的原始UserControl中,以便用户在屏幕上为第一个UserControl显示4个文本框.我看到的问题是,如果我尝试将第二个UserControl添加到第一个的给定迭代中,则是页面回发导致这些第二个用户控件中的其他任何一个都从页面中删除.
有谁知道使用JQuery做到这一点的方法吗?我有三篇文章描述了如何使用服务器端动态控件和/或AJAX解决此问题,但是我们决定专注于JQuery解决方案,因为这种服务器端机制对于我们而言在资源方面过于昂贵.
我一直在下面研究Zincorp的建议,现在让JQuery来克隆文本框,但是在使用服务器端Request.Form集合来遍历控件时遇到了麻烦.任何人都可以提出关于如何遍历Request.Form集合的意见吗?
好的,我认为使用Request.Form.AllKeys集合迭代控件的问题原来是我使用的是HTML TextBox,而不是ASP TextBox控件.显然,Request.Forms.AllKeys集合仅包含ASP控件,而不包含HTML控件.
我现在看到的问题是,当我在JQuery中克隆该控件,然后使用Submit按钮提交我的页面时,这两个控件具有相同的ID,因此,通过http组合(我认为)是一个包含以下内容的ASP TextBox控件:这两个值都带有逗号分隔符(例如40,20).有人知道如何获取分配给克隆的ASP TextBox的新ID吗?
这是示例ASP.Net Web应用程序中的更新标记:
<%@ 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];
}
}
}
您实际上需要:
1)客户端上重复的控件/标记
2)在回发的服务器端获取这些值
3)对于客户端上每个添加的“用户控件”,将它们作为服务器端上第一个用户控件的子级添加.
我不会给出代码,但是这里有一些想法:
1)使用jQuery的.clone()方法(http://api.jquery.com/clone/)复制包含文本框的usercontrol呈现的标记.也许将它们包装在没有runat =“ server”的div中,以便您可以通过ID轻松获得它.然后,您可能需要递归地遍历克隆元素中的子元素,并在它们的后面附加一个#以避免标识符冲突. (例如,nameTextBox_1,nameTextBox_2等)
2)在回发中,使用服务器端的Request.Form集合获取文本框值.遍历它并捕获所有以“ nameTextBox_”开头的键的项目.
3)对于客户端上每个添加的“用户控件”,在服务器端上创建实际的用户控件,为其分配在文本框中输入的值,然后将其添加到第一个子控件中.这样,在返回用户后便可以保持状态.