ASP.Net - 使用中继器在客户端重复输入框(ASP.Net - repeating inpu

2019-10-18 15:45发布

我创建我的应用程序的用户配置文件的以下要求:

用户应该能够在他的个人资料输入多个电话号码/电子邮件地址。
屏幕看起来有点像这样:
- 默认情况下,页面上加载一个文本框的电话和电子邮件显示。
- 用户可以点击“+”按钮来添加其它号码/地址。
- 在点击“+​​”按钮,我们需要添加正下方的第一个文本框的另一个。 用户可以根据自己想要添加尽可能多的号码/地址。 在提交时,服务器应收集所有号码/电子邮件并将其保存在数据库中。

我尝试使用Repeater控件做到这一点。 在我的Page_Load绑定中继器大小的“新的ArrayList”对象1.所以,这使得精 - 用户会看到一个文本框,在它没有价值。
当他点击“+”按钮,我非常想使用JavaScript来创建更多的文本框类似加价为第一。

我的问题是:

  1. 我可以呈现新的文本框,反正用JS? 我注意到,由中继器控制呈现的HTML有些复杂(名称/ IDS)等,它可能无法正确地创建于客户端的控件。
  2. 如果有一种方法可以做到#1,将在服务器理解,这些额外的投入都在中继器控制项目? 再说了,我想所有的电话号码,用户通过迭代Repeater.DataItems输入。
  3. 从概念上讲,是我的做法正确或错用中继器呢? 你认为可能处理这个要求任何其他的方法呢?

从一个Struts / JSP背景的人,我还在努力让做事的.NET方式抓地力 - 所以任何帮助,将不胜感激。

Answer 1:

转发器控制可能是你要完成的有点大材小用的。 它主要是指作为一个数据绑定控件用于显示数据的行。

你可以做的是动态创建的箱子作为的一部分Page_Load事件(C#):

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:

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 });
}

最后我用一个PlaceHolder的文本框和一个动态添加HiddenField到标志时,另一个TextBox添加必要的。 由于这些ID被匹配时,每次回发期间维持控制的视图状态。



Answer 2:

欢迎来到ASP.NET是动态添加控件的毛球。 它不漂亮,但它可以做到的。

你不能添加新字段动态地使用JavaScript,因为新的领域会在页面的服务器端控件集合任何陈述。

鉴于要求是没有限制的,用户可以添加到网页地址的数量,你唯一的选择就是做“传统”的动态ASP.NET控件。 这意味着你必须处理好控制服务端的加入new -ing一个新的对象来表示控制:

private ArrayList _dynamicControls = new ArrayList();
public void Page_Init()
{
    foreach (string c in _dynamicControls)
    {
        TextBox txtDynamicBox = new TextBox();
        txtDynamicBox.ID = c;
        Controls.Add(txtDynamicBox);
    }
}

public void AddNewTextBox()
{
    TextBox txtNewBox = new TextBox();
    txtNewBox.ID = [uniqueID] //  Give the textbox a unique name
    Controls.Add(txtNewBox);    
    _dynamicControls.Add([uniqueID]);
}

你可以在这里看到的是每个备份动态添加场的对象必须加回每个投递的页面的控件集合。 如果你不这样做,数据发布了由外地赶回无处可去。



Answer 3:

如果你想用户中继器,我认为最简单的方法就是把中继器在ASP.Net AJAX更新面板中加入了对服务器端的额外文本框。

肯定有实现这个不使用中继器的其他方式,它也许更容易使用JS添加文本框。



Answer 4:

  1. 没有,但你可以创建input类似于元素TextBox控件将使。

  2. ASP.NET号防止自身发送到服务器假数据。 你不能让服务器代码认为它创造了一个TextBox早些时候刚刚加入,这将返回数据。

  3. 这种方法是错误的。 您正在尝试去不起作用一条中间道路。 你必须去所有的方式在任何一个方向。 要么你做回传,并添加TextBox在服务器端,或者你完全做到这一点在客户端,并使用Request.Form集合接收服务器端的数据。



文章来源: ASP.Net - repeating input boxes on the client side using Repeater