Question

有没有办法我们可以重现面板的内容。例如我有一个面板有两个文本框。点击更多按钮我想有另一个面板下面再有两个文本框像第一个一个或在现有面板中添加两个文本框。我的最终目标是在用户点击更多按钮时添加控件并从这些控件中获取数据。This is the controls inside the panel that i would like to reproduce

我可以通过服务器端添加控件（如布局中所示）的任何可能方式吗？请帮忙！

Answer 1

有很多方法可以解决这个问题。您可以使用纯JavaScript或jQuery自己添加适当的DOM元素，或使用一些JS MV *框架，如KnockoutJS（例如：http://knockoutjs.com/examples/contactsEditor.html）或AngularJS。

Answer 2

显然，您可以在“更多按钮”的按钮点击事件中添加来自代码的动态控件。

Click Here了解更多参考资料：

Answer 3

如果你想在客户端使用jQuery实现这一点，那么'nearest（）'（找到要在添加/删除按钮附近重复的源元素/行等，特别是如果它在表格中/网格格式）与'clone（）'函数结合使用，（制作源元素/行的副本）然后可以将克隆粘贴到目标容器中。以下链接可帮助您实现所需目标： jQuery Clone table row

但是在Asp.Net WebForms中这样做应该很直接。

另外，请注意，通过指定更多详细信息（例如，描述中的MVC，WebForms等，您为找到/解决问题所做的试验）和更快的答案总是非常有用的。这也有助于节省其他时间。有关详细信息：https://stackoverflow.com/questions/how-to-ask

Answer 4

试试这个

你的aspx页面添加

<asp:TextBox runat="server" ID="TextBox1" />
<asp:TextBox runat="server" ID="TextBox2" />
<asp:Button Text="Add" ID="btnAdd" OnClick="btnAdd_Click" runat="server" />
<asp:Repeater ID="rpt" runat="server">
    <ItemTemplate>
        <asp:TextBox runat="server" ID="txt1" Text='<%# Eval("str1") %>' />
        <asp:TextBox runat="server" ID="txt2" Text='<%# Eval("str2") %>' /><br />
    </ItemTemplate>
</asp:Repeater>

并在代码中

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        List<temp> lst = GetItemFromRpt();
        lst.Add(new temp
        {
            str1=TextBox1.Text,
            str2 = TextBox2.Text

        });
        rpt.DataSource = lst;
        rpt.DataBind();
    }

    private List<temp> GetItemFromRpt()
    {
        List<temp> lst = new List<temp>();
        for (int i = 0; i < rpt.Items.Count; i++)
        {
            temp obj = new temp();
            obj.str1 = ((TextBox)rpt.Items[i].FindControl("txt1")).Text;
            obj.str2 = ((TextBox)rpt.Items[i].FindControl("txt2")).Text;
            lst.Add(obj);

        }
        return lst;
    }

    public class temp // instead of temp you can use whatever your entity class you need
    {
        public string str1 { get; set; }
        public string str2 { get; set; }
    }

动态重现面板内容

4 个答案: