8 Replies - 12883 Views - Last Post: 12 July 2011 - 09:35 PM Rate Topic: -----

#1 capeluto   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 14-April 11

How to add dynamic controls (txtBoxes, etc)

Posted 09 July 2011 - 11:25 PM

Hello,

I have been developing in ASP.net for a few months now. I have a req. now to show a form in which the user can insert contract information. Each contract consists of Labels, TextBoxes, Radio buttons and Textbox's Extenders (such as watermarks, and calendar). My difficulty is adding unlimited "forms" for the user to add more contracts.

I tried creating a panel within an update panel, and a button as a trigger for the update panel. The code within the button dynamically adds controls to the panel. My problem is that every time I click the button, the new controls being added seem to be replacing the previously added controls, so I find myself limited to adding only one contract. Is there a better way for achieving this?

THANKS IN ADVANCE FOR YOUR HELP!

Is This A Good Question/Topic? 0
  • +

Replies To: How to add dynamic controls (txtBoxes, etc)

#2 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: How to add dynamic controls (txtBoxes, etc)

Posted 10 July 2011 - 02:13 PM

need to see the code. Also have you thought about using something like the FormView control or would that not work for this situation?
Was This Post Helpful? 0
  • +
  • -

#3 capeluto   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 14-April 11

Re: How to add dynamic controls (txtBoxes, etc)

Posted 10 July 2011 - 09:19 PM

Hi Nakor,

Thank you very much for answering.

The code I have inside the click event of the button is:

            protected void btn_Add_Service_Click(object sender, EventArgs e)
        {
            //Adding some space before the previous contract and the new one
            Panel_ServicesControls.Controls.Add(new LiteralControl("<br />"));
            Panel_ServicesControls.Controls.Add(new LiteralControl("<br />"));

            //Adding a label
            Label newLabel = new Label();
            newLabel.ID = "Label50" + txtBox_Counter.Text;
            newLabel.Text = txtBox_Counter.Text + ".- Service:";
            Panel_ServicesControls.Controls.Add(newLabel);

            //Adding another break line
            Panel_ServicesControls.Controls.Add(new LiteralControl("<br class=\"specialEnter\" />"));

            //Adding another label
            Label newLabel2 = new Label();
            newLabel2.ID = "Label60" + txtBox_Counter.Text;
            newLabel2.Text = "Type: ";
            newLabel2.CssClass = "formLabel";
            Panel_ServicesControls.Controls.Add(newLabel2);

            //Adding a radio button
            RadioButton newRadio = new RadioButton();
            newRadio.ID = "radioButton_Departure" + txtBox_Counter.Text;
            newRadio.Text = "Departure";
            newRadio.GroupName = "ServiceType" + txtBox_Counter.Text;
            newRadio.CssClass = "RadioSeparation";
            Panel_ServicesControls.Controls.Add(newRadio);

            //Adding another radio button
            RadioButton newRadio2 = new RadioButton();
            newRadio.ID = "radioButton_Arrival" + txtBox_Counter.Text;
            newRadio.Text = "Arrival2";
            newRadio.GroupName = "ServiceType" + txtBox_Counter.Text;
            Panel_ServicesControls.Controls.Add(newRadio2);

            //Hidden box for keeping the counter of controls/forms
            txtBox_Counter.Text =
            (
            Convert.ToInt32(txtBox_Counter.Text) + 1
            ).ToString();
        }



I see that the FormView control would help me for having the user input information and I would be storing that information in a db, but for this req, I have to display and be able to modify all the contracts in a list form.

I am trying to emulate something that is done in this website (http://royal.horesh-studios.com/) when you click on the "Add Departure" or "Add Arrival" button. You can see that in that case, some "subform" is being added to the list, and there is no limit to how many forms can be added. In my case, I do not need two types of forms (namely, Departure or arrival), but only one form, the same one I would be displaying just over and over as long as the user clicks on the Add Service button.

In any case, THANK YOU!
Was This Post Helpful? 0
  • +
  • -

#4 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: How to add dynamic controls (txtBoxes, etc)

Posted 11 July 2011 - 04:01 AM

Since you're wanting to add basically the same form multiple times I would look into creating a user control out of it, this way you only have to add one control to the page at a time instead of multiple. Here's a link to a quick tutorial on user controls: link. It includes a section on dynamically adding a user control to the page near the bottom.
Was This Post Helpful? 1
  • +
  • -

#5 capeluto   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 14-April 11

Re: How to add dynamic controls (txtBoxes, etc)

Posted 11 July 2011 - 05:14 PM

Hi Nakor,

Thanks AGAIN for your answer.

I tried your suggestion. I get the same result. When I click in the button, the new UserControl replaces the previous one. (The UserControl will be useful for me for this particular req. but I still have to find a way to keep adding that UserControl underneath the previous one, and not replace the previous one...) Any other ideas on how to add that user control, or a simple textbox in like an on-demand fashion indefinitely?

THANK YOU!
Was This Post Helpful? 0
  • +
  • -

#6 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: How to add dynamic controls (txtBoxes, etc)

Posted 11 July 2011 - 05:28 PM

post your new code
Was This Post Helpful? 0
  • +
  • -

#7 capeluto   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 14-April 11

Re: How to add dynamic controls (txtBoxes, etc)

Posted 11 July 2011 - 05:35 PM

This is the new button code:

protected void btn_Add_Service_Click(object sender, EventArgs e)
        {
            ServiceRequest SR = (ServiceRequest)LoadControl("~/ServiceRequest.ascx");
            SR.Labeler = txtBox_Counter.Text + ".- Service";
            Panel_ServicesControls.Controls.Add(SR);
        }



The ServiceRequest UserControl code is the following:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ServiceRequest.ascx.cs" Inherits="ROYAL_AIRPORT_CONCIERGE.ServiceRequest" %>
<asp:Label ID="Label1" runat="server" Text="Label">N.- Service</asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Label">Type: </asp:Label>

<asp:RadioButton ID="radioButton_DepartureN" runat="server" Text="Departure" GroupName="ServiceTypeN"/>
<asp:RadioButton ID="radioButton_ArrivalN" runat="server" Text="Arrival" GroupName="ServiceTypeN"/>



and

 public string Labeler = "";
    
 protected void Page_Load(object sender, EventArgs e)
 {
       Label1.Text = Labeler;
 }




To clarify, every time I click the button, I can see the NEW user control is added on top of the previous one, because I am updating the label with a textBox counter...

As always, THANKS!
Was This Post Helpful? 0
  • +
  • -

#8 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: How to add dynamic controls (txtBoxes, etc)

Posted 11 July 2011 - 08:41 PM

You'll need to add the user controls back to the page on every PostBack. The best time to do this is in the PreLoad event since this is the earliest point at which ViewState is loaded so we can retrieve the previous values. You also need to make sure that when you are adding the user controls to the page that they are added in the same order on every PostBack or the ViewState will not track any of the values in the user controls. I made a simple example that will hopefully make it a little clearer.

Here was my .aspx page

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>    
        <asp:Panel ID="PlaceHolder1" runat="server" EnableViewState="true"></asp:Panel>

         <br />
        <asp:Button ID="btnAddControl" runat="server" Text="Add Form" 
             onclick="btnAddControl_Click" />
    </ContentTemplate>
    </asp:UpdatePanel>



As you can see, there's not much to it, just a placeholder to hold the controls and a button to add controls. I did use it in an UpdatePanel and that presented no problem.


Here was my code behind

        // I used a ViewState backed property to track the Control count
        //  instead of a page control.  The value is initialized to 1 since
        //  I wanted it to load a user control on the first page load
        public int ControlCount
        {
            get
            {
                object temp = ViewState["ControlCount"];
                return temp == null ? 1 : (int)temp;
            }
            set { ViewState["ControlCount"] = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Nothing to be done here
        }

        protected void btnAddControl_Click(object sender, EventArgs e)
        {
            // Load a new user control and use the Control count in to
            // create a unique control ID. Add the control to the placeholder
            // and then increment the control count at the end of this event.

            var ucControl = (uc_TestControl1)LoadControl("/uc_TestControl1.ascx");
            ucControl.ID = "Control_" + ControlCount;

            PlaceHolder1.Controls.Add(ucControl);
            ControlCount = PlaceHolder1.Controls.Count;
        }

        protected override void OnPreLoad(EventArgs e)
        {
            base.OnPreLoad(e);

            // Use this event to load the existing user controls
            LoadControls();
        }

        private void LoadControls()
        {
            // This uses the control count to reload the previously added
            //  user controls and add them to the placeholder in the same 
            // order that they were originally created.

            for (int i = 0; i < ControlCount; i++)
            {
                var ucControl = (uc_TestControl1)LoadControl("/uc_TestControl1.ascx");
                ucControl.ID = "Control_" + i;

                PlaceHolder1.Controls.Add(ucControl);
            }
        }


This post has been edited by Nakor: 11 July 2011 - 08:42 PM

Was This Post Helpful? 1
  • +
  • -

#9 capeluto   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 14-April 11

Re: How to add dynamic controls (txtBoxes, etc)

Posted 12 July 2011 - 09:35 PM

Nakor,

You just literally solved my issue. THANK YOU KINDLY for posting all that code. Highly appreciated.

Everything is straight forward - learning asp.net every day...

THANKS AGAIN!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1