动态再现面板的内容答案

【问题标题】：Reproduce a content of panel dynamically动态再现面板的内容
【发布时间】：2013-06-13 05:47:34
【问题描述】：

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

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

【问题讨论】：

你尝试使用 Jquery 或 javascript 创建新控件？
可以通过jquery添加服务器端控件吗？或者如何在 C# 中访问 jquery 创建的元素
可以在PlaceHolder 中使用Panel，但这里棘手的部分是当您在复制的Panel 中获取字段值时。
您的控件可以更具体一点吗？
根据您的要求，您可以在服务器上处理按钮点击还是在客户端进行？

标签： c# asp.net webforms

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

Click Here 更多参考资料：

【讨论】：

我已经尝试过您指定的方式..它会在我的表格中动态添加需要它的控件，如截图所示
抱歉，由于某些内容被阻止，我无法在我的电脑上看到此处的图像。但是您在从后面的代码中添加动态控件时遇到了什么问题？
我需要它在一个特定的布局。面板将有一个下拉和六个文本框
如果你想实现一些特定的布局，然后将CssClass添加到控件并使用CSS控制它。如果有一些控件层次结构，则首先将所有子控件添加到父级，然后将此父级添加到其父级。例如：如果您有一个 PlaceHolder 作为最顶层的父级，则在它的一个面板内，在该面板内有一些文本框。然后您首先需要将所有文本框添加到面板，然后将该面板添加到 PlaceHolder。

【解决方案3】：

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

但是在 Asp.Net WebForms 中执行此操作应该非常简单。

另外，请注意，通过在描述中指定更多详细信息（例如，MVC、WebForms 等，您为查找/解决问题所做的试验）和这也有助于节省其他人的时间。欲了解更多信息：https://stackoverflow.com/questions/how-to-ask

【讨论】：

感谢您的帮助。我们如何通过服务器端实现相同的目标？
如果您对 Asp.Net webforms 事件模型有所了解，则在服务器端处理按钮单击事件并根据您的要求做其余的事情，否则您可以参考 MSDN。另外，请您在发布问题之前再次阅读我回答中的最后一段。
标记为网络表单。我已经尝试过了，我知道控件可以动态创建。但我的问题是我需要它与我在图像中显示的面板的布局相同，因此我试图重现整个面板。这可能吗？
您能否发布更多详细信息，例如您正在尝试但无法正常工作的 HTML/ASPX 代码和相应的 C# 代码？

【解决方案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; }
    }

【讨论】：