ASP.Net - 使用中继器在客户端的重复输入框 [英] ASP.Net - repeating input boxes on the client side using Repeater
问题描述
我有以下要求，在我的应用程序创建用户配置文件：
I have the following requirement for creating a user profile in my application:
用户应该能够在他的个人资料输入多个电话号码/电子邮件地址。结果
屏幕看起来有点像这样：结果
- 默认情况下，页面上加载一个文本框的电话和电子邮件显示结果。
- 用户可以点击+按钮来添加其他号码/地址结果。
- 在点击+按钮，我们需要添加仅低于第一个文本框的另一个。用户可以按照他想添加尽可能多的号码/地址。在提交时，服务器应收集所有号码/电子邮件，并将其保存在数据库中。
User should be able to enter multiple phone numbers/email addresses in his profile.
The screen looks somewhat like this:
- By default, on page load a single textbox for phone and email are shown.
- User can click a "+" button to add additional numbers/addresses.
- On clicking the "+" button we need to add another textbox just below the first one. User can add as many numbers/addresses as he wants. On submit, the server should collect all numbers/emails and save it in DB.
我尝试使用Repeater控件做到这一点。在我的Page_Load绑定中继器大小的新的ArrayList对象1.所以，这使得精 - 用户将看到一个不带值的单个文本框搜索
当他点击+按钮，我最好要使用JavaScript来创建更多的文本框类似的加价为第一。
I tried using the Repeater control to do this. On page_load I bind the repeater to a "new arraylist" object of size 1. So, this renders fine - user sees a single textbox with no value in it.
When he clicks the "+" button, I ideally want to use javascript to create more textboxes with similar mark-up as the first.
我的问题是：
- 我可以呈现新的文本框，反正用JS？我注意到，由中继控制呈现的HTML有些复杂（名称/ IDS）等，它可能无法正确地创建客户端的控制。
- 如果有一种方法可以做到＃1，将在服务器明白，这些额外的投入都在Repeater控件的项目？再说了，我想获得的所有电话号码，用户通过循环Repeater.DataItems输入。
- 从概念上讲，是我的做法正确或错用直放站这个？你认为可能会处理这一需要任何其他的方法呢？
这是一个Struts / JSP背景的，我还在努力让做事的.NET方式握 - 因此，任何帮助将是AP preciated。
Coming from a Struts/JSP background, I am still struggling to get a grip on the .NET way of doing things - so any help would be appreciated.
推荐答案
中继器控制可能有点矫枉过正为您所要完成的任务。它主要目的是为数据presenting行的数据绑定控件。
The repeater control may be a bit of overkill for what you're trying to accomplish. It is mainly meant as a databound control for presenting rows of data.
你可以做的是动态创建的框作为的Page_Load 事件（C＃）的一部分：
What you can do is to dynamically create the boxes as part of the Page_Load event (C#):
TestInput.aspx：
TestInput.aspx :
<form id="form1" runat="server">
<asp:HiddenField ID="hdnAddInput" runat="server" />
<asp:Button ID="btnPlus" OnClientClick="setAdd()" Text="Plus" runat="server" />
<asp:PlaceHolder ID="phInputs" runat="server" />
</form>
<script type="text/javascript">
function setAdd() {
var add = document.getElementById('<%=hdnAddInput.ClientID%>');
add.value = '1';
return true;
}
</script>
TestInput.aspx.cs：
TestInput.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (ViewState["inputs"] == null)
ViewState["inputs"] = 1;
if (hdnAddInput.Value == "1")
{
ViewState["inputs"] = int.Parse(ViewState["inputs"].ToString()) + 1;
hdnAddInput.Value = "";
}
for (int loop = 0; loop < int.Parse(ViewState["inputs"].ToString()); loop++)
phInputs.Controls.Add(new TextBox() { ID = "phone" + loop });
}
我结束了使用占位符文本框和一个 HiddenField 动态添加到标志时，另一个<$要添加C $ C>文本框需要。由于标识进行匹配，它保持每次回发时控件的ViewState中。
I ended up using a PlaceHolder to dynamically add the text boxes and a HiddenField to flag when another TextBox needed to be added. Since the IDs were matching, it maintains the ViewState of the controls during each postback.
这篇关于ASP.Net - 使用中继器在客户端的重复输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
