Reproduce a content of panel dynamically

Question

Is there any way where we can reproduce the content of a panel.For example i have a panel which has two text box .On clicking more button i would like to have another panel below which again has two text box like the first one or add two text box into the existing panel.My end goal is to add controls as the user clicks on more button and get data from those controls .This is the controls inside the panel that i would like to reproduce

any possible way where i can add the controls as shown in the layout through server side ?Please help!

hv u tried to use Jquery or javascript to create new controls? — Nitin Agrawal, Jun 17 '13 at 09:56
Can a server side control be added through jquery? or how to access elements created by jquery in C# — Karthik, Jun 17 '13 at 10:00
It is possible using `Panel` inside a `PlaceHolder` but the tricky part here is when you get the values of your fields in the `Panel` you replicate. — Mark, Jun 17 '13 at 10:01
As per your requirement, can you handle the button click on the server or do you want to do it at the client side? — Siva Gopal, Jun 17 '13 at 10:05
@SivaGopal either would do.But it should be like the image shown above .any ideas? — Karthik, Jun 17 '13 at 10:08

score 0 · Answer 1 · answered Jun 17 '13 at 09:57

0

There are plenty ways to solve this. You could add proper DOM elements by yourself using plain JavaScript or jQuery, or use some JS MV* frameworks, like KnockoutJS (example: http://knockoutjs.com/examples/contactsEditor.html) or AngularJS.

answered Jun 17 '13 at 09:57

tdragon

3,209
1
16
17

score 0 · Answer 2 · answered Jun 17 '13 at 10:01

0

you can obviously add dynamic controls from code behind on button click event of 'more button'.

Click Here for more references:

answered Jun 17 '13 at 10:01

Sanjeev Rai

6,721
4
23
33

I have already tried the way you have specified..It dynamically adds controls need it with in my table as shown in the snip – Karthik Jun 17 '13 at 10:09
Sorry, I'm not able to see Image here on my PC due to some blocked content. but what issue are you facing while adding dynamic controls from code behind? – Sanjeev Rai Jun 17 '13 at 10:15
i need it in a particular layout .the panel will have a drop down and six text box – Karthik Jun 17 '13 at 10:28
If you want to achive some specific layout, then add `CssClass` to controls and control it using CSS. If there is some hierarchy of controls, then first add all Child contorls to parent, and then add this parent to its parent. for ex: if you have a PlaceHolder as Top most Parent, inside it one panel and inside that panel there are some textboxes. Then you first need to add all textboxes to panel, then add that Panel to PlaceHolder. – Sanjeev Rai Jun 17 '13 at 10:42

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

If you want to achieve this on client side using jQuery, then 'closest()' (to find the source element/row to be repeated nearby to the add/remove button etc., especially if it is in a tabular/grid format) in conjunction with 'clone()' function, (to make a copy of the source element/row) and then you can paste the clone inside the target container. The following link might help you achieve what you want: jQuery Clone table row

But doing this in Asp.Net WebForms should be much straight forward.

Also, please be noted that, it would always be much helpful to get a quicker answer by specifying more details(eg., MVC, WebForms etc. in the description, what trials you did to find/fix the problem) and that help save other's time as well. For more info: https://stackoverflow.com/questions/how-to-ask

edited May 23 '17 at 12:21

Community

1
1

answered Jun 17 '13 at 10:17

Siva Gopal

3,474
1
25
22

Thanks for the help .How would we achieve the same through server side? – Karthik Jun 17 '13 at 10:22
Handle the button click event on server side and do rest of the stuff based on your requirement, if you have understanding on Asp.Net webforms event model, otherwise you can refer MSDN. Also, I request you to once again read through the last paragraph in my answer before posting a question, please. – Siva Gopal Jun 17 '13 at 10:28
tagged to webform. i have already tried it and i know controls can be created dynamically.But my question is i need it be in the same layout as the panel i have shown in the image and hence am trying to reproduce an entire panel.Is that possible? – Karthik Jun 17 '13 at 10:33
Can you post further details like your HTML/ASPX code and corresponding C# code that you are trying but not working? – Siva Gopal Jun 17 '13 at 10:37

score 0 · Answer 4 · answered Jun 17 '13 at 10:43

try this

your aspx page add

<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>

and in code behind

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

Reproduce a content of panel dynamically

4 Answers4