How do I add different controls dynamically on selection from dropdown list in asp.net

Question

0.00/5 (No votes)

See more:

Hello

I am creating a page in asp.net website on which i add the controls dynamically on selection from drop down list, but on every selection from the drop down list the previous control lost due to post back of drop down list.
I want to add the controls dynamically in my panel on selection from drop down list. For example: if i select the text box from the drop down list,the control should be add to the panel then again if i select the button from drop down list, the button should be added to the panel. Now the panel should have the text box and button. Now if i select the drop down list from the drop down list, it should be added to the panel i.e panel should display the text box ,button and drop down list in it.

Can any body suggest me or help me to figure it out.

Thanks & Regards

Posted 5-Oct-14 20:03pm

Yash khurana

Updated 5-Oct-14 20:22pm

v2

Add a Solution

Comments

Thanks7872 6-Oct-14 2:05am

Why?

Sinisa Hajnal 6-Oct-14 2:26am

Use some type of persistance, otherwise your controls will always be lost on postback...but why would you need such thing?

Yash khurana 6-Oct-14 5:00am

I have a task to create a form dynamically in asp.net website that's why i need this thing.

VC.J 6-Oct-14 2:49am

the control that you add will be lost on post back.
if you know that you can have n number of control than you can add in Aspx and show/hide them using javascript

4 solutions

Solution 1

Suppose you have DDL as -

XML

<asp:DropDownList ID="ddlSample" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlSample_SelectedIndexChanged" >
    <asp:ListItem>Textbox</asp:ListItem>
    <asp:ListItem>Button</asp:ListItem>
    <asp:ListItem>ComboBox</asp:ListItem>
    <asp:ListItem>DropdownList</asp:ListItem>
</asp:DropDownList>

C#

protected void ddlSample_SelectedIndexChanged(object sender, EventArgs e)
      {
          if (ddlSample.SelectedItem.Text == "Textbox")
          {
              TextBox TxtBoxU = new TextBox();
              TxtBoxU.ID = "TextBoxU" + i.ToString();
              //Add the textbox to the Panel.
              Panel1.Controls.Add(TxtBoxU);
          }
      }

refer this :

http://www.dotnettips4u.com/2013/03/dynamically-creating-text-boxes-using-c.html[^]

Posted 5-Oct-14 20:36pm

Leena 206

Updated 5-Oct-14 20:38pm

v3

Solution 2

Yash ,
you can use a trick, I am providing you a sample You can add your logic

In Aspx Use :

XML

<asp:DropDownList ID="ddlIds" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlIds_SelectedIndexChanged" >
    <asp:ListItem>Textbox</asp:ListItem>
    <asp:ListItem>Button</asp:ListItem>
    <asp:ListItem>CheckBox</asp:ListItem>
    <asp:ListItem>DropdownList</asp:ListItem>
</asp:DropDownList>
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
<asp:HiddenField ID="hdnValue" runat="server"/>

In code behind use this logic

protected void ddlIds_SelectedIndexChanged(object sender, EventArgs e)
        {
            TextBox TxtBox = new TextBox();
            CheckBox chkBox = new CheckBox();

            switch (ddlIds.SelectedItem.Text)
            {
                case "Textbox":
                    TxtBox.ID = "txtBox";
                    hdnValue.Value = hdnValue.Value + "^" + TxtBox.ID;
                    break;
                case "CheckBox":
                    chkBox.ID = "chkBox";
                    hdnValue.Value = hdnValue.Value + "^" + chkBox.ID;
                    break;
            }


            if (hdnValue.Value != "")
            {
                var val = hdnValue.Value.Split('^');
                foreach (var IDs in val)
                {
                    if (IDs.Contains("chk"))
                    {
                        chkBox.ID = IDs;
                        Panel1.Controls.Add(chkBox);
                    }

                    else if (IDs.Contains("txt"))
                    {
                        TxtBox.ID = IDs;
                        Panel1.Controls.Add(TxtBox);
                    }

                }
            }
        }

Hope this will do for you if that is the solution please mark it as solution

Posted 5-Oct-14 21:11pm

VC.J

Comments

Yash khurana 6-Oct-14 4:57am

Thanks Vipin for help

In this first when i select a check box then select text box till this work fine, but if i select check box again it will loose the first check box that is created before text box.
I need that check box also should be maintained.

Thanks

VC.J 6-Oct-14 5:39am

ok one thing in the code if you enter any value in text box and select the check box that will be disappear once drop down event is fired
For you problem I will try to find out solution

Solution 3

Maintain a list of controls and their positions in persistent store and on every selection from the drop down list, add new one to the store and then restore all controls.

When user deletes a control (I assume there is an option?) you simply delete it from the store and again restore everything on the screen (within the panel)

You could create a datatable and keep it in the database for real persistable layouts or just use Session for Controls collection.

Posted 6-Oct-14 0:08am

Sinisa Hajnal

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

VC.J · Accepted Answer · 2014-10-06T00:19:00

Now Updated code is this :

protected void ddlIds_SelectedIndexChanged(object sender, EventArgs e)
       {
           switch (ddlIds.SelectedItem.Text)
           {
               case "Textbox":
                   var txtBox = string.Empty;
                   if (hdnValue.Value != "" && hdnValue.Value.Contains("txtBox"))
                   {
                       var value = hdnValue.Value.Split('^');
                       int latestID = CountStringOccurrences(hdnValue.Value, "txtBox") + 1;
                       txtBox = "txtBox" + latestID.ToString();
                       hdnValue.Value = hdnValue.Value + "^" + txtBox;
                   }
                   else
                   {
                       txtBox = "txtBox1";
                       hdnValue.Value = hdnValue.Value + "^" + txtBox;
                   }
                   break;
               case "CheckBox":
                   var chkbox = string.Empty;
                   if (hdnValue.Value != "" && hdnValue.Value.Contains("chkBox"))
                   {
                       var value = hdnValue.Value.Split('^');
                       int latestID = CountStringOccurrences(hdnValue.Value, "chkBox") + 1;
                       chkbox = "chkBox" + latestID.ToString();
                       hdnValue.Value = hdnValue.Value + "^" + chkbox;
                   }
                   else
                   {
                       chkbox = "chkBox1";
                       hdnValue.Value = hdnValue.Value + "^" + chkbox;
                   }
                   break;
           }


           if (hdnValue.Value != "")
           {
               var val = hdnValue.Value.Split('^');
               foreach (var IDs in val)
               {
                   if (IDs.Contains("chk"))
                   {
                       CheckBox chkBox = new CheckBox();
                       chkBox.ID = IDs;
                       Panel1.Controls.Add(chkBox);
                   }

                   else if (IDs.Contains("txt"))
                   {
                       TextBox TxtBox = new TextBox();
                       TxtBox.ID = IDs;
                       Panel1.Controls.Add(TxtBox);
                   }

               }
           }
       }

Handle the control in post back

This function I have used from link ttp://www.dotnetperls.com/string-occurrence

public static int CountStringOccurrences(string text, string pattern)
        {
            int count = 0;
            int i = 0;
            while ((i = text.IndexOf(pattern, i)) != -1)
            {
                i += pattern.Length;
                count++;
            }
            return count;
        }

Marked it as solution if you like it