hamang.net

True dynamic controls

This is something I have been struggeling with so many times, and there are a lot of examples on how to programatically add controls to a page. In this example I add dynamically created controls which remembers their state on postbacks.

The problem:

• I want to add new controls to a page. Clicking a button adds a new control to the page.
• The new control should remember its state through ViewState and postback events should work as normal.

The solution:

• I can add the controls to a Panel or Placeholder and I have to do it in an early stage in the page lifecycle.
• Some experiments and thoughts
  • The dynamically added controls needs to be added to the page on every postback. It is not possible to add a new control and forget it. This means I need to have a loop where the controls are added to the page.
  • The ID of the control need to be the same on every postback in order for the control to remember its state through ViewState.
  • Doing some testing, I tried adding the controls in PreInit. This is where Microsoft recommends to add dynamically created controls. The only problem here is that the ViewState is not available at this stage. So I am not able to track how many controls that have been added to the page. I have a property NumberOfDynamicControls which holds how many dynamically controls that have been added. The same goes with Init, no luck. The ViewState is loaded between Init and Load.
  • You can add controls to the page in almost any event (PreInit, Init, Load, postback event etc.) and it will render fine. However, the ViewState will not be tracked and it is not possible to add and render more than one control.
  • The only solution I found was to override the LoadViewState event and add the controls there. This seems like a hack, and probably is, but everything seems to work fine regarding ViewState tracking and postback events.
  • I need to have the dynamic control available as an invisible "ghost" control before it is "added" to the page. This is to keep track of the state of the control. When clicking the "Add" button, the ghost control is set visible, although it's already there.

Here is the code:

This is the HTML markup. I'm having a simple Panel and a button. Everytime I click the Add button, a new dynamically created button is added to the page.

<asp:Panel runat="server" ID="Panel1" >
 <asp:Button Text="Add" runat="server" OnClick="AddControlToPanel" />
 </asp:Panel>   

   

I have to initialize a "ghost" control. The dynamically created button is actually added to the page before it is visible. This is to track ViewState. Clicking the Add button makes the ghost control visible:

 protected void AddControlToPanel(object sender, EventArgs e)
        {
            Button newButton = Panel1.FindControl("ButtonDynamic" + (NumberOfDynamicControls - 1)) as Button;
            if (newButton != null)
            {
                newButton.Visible = true;
                newButton.Text = "New button";
                NumberOfDynamicControls++;
            }
        }

Here is the tracking of number of dynamically created controls added to the page. The value is stored in the ViewState.

 protected int NumberOfDynamicControls
        {
            get { return ViewState["numberOfDynamicControls"] == null ? 1 : (int)ViewState["numberOfDynamicControls"]; }
            set { ViewState["numberOfDynamicControls"] = value; }
        }

Here comes the real magic. By overriding the LoadViewState and rebuilding the dynamically added controls, everything works as expected.

 protected override void LoadViewState(object savedState)
        {
            base.LoadViewState(savedState);
            if (IsPostBack)
            {
                InitializeDynamicButtons(NumberOfDynamicControls);
            }
        }

protected void InitializeDynamicButtons(int numberOfButtons)
        {
            for (int i = 0; i < numberOfButtons; i++)
            {
                Button dynamicButton = new Button();
                Panel1.Controls.Add(dynamicButton);
                dynamicButton.ID = "ButtonDynamic" + i;
                dynamicButton.Click += DynamicButton_Click;
                dynamicButton.Visible = false;
            }
        }

The dynamically created button also has a click event:

 void DynamicButton_Click(object sender, EventArgs e)
        {
            Button button = (Button) sender;
            button.Text = "Clicked!";
        }

Before:

The page before adding the dynamic buttons

After:

The added buttons. Notice I have clicked the middle button and the state is managed.

Here is the complete code:

DynamicControls

If you know some other good ways to achieve this, let me know!

No comments yet.

Leave a comment