Most of us have faced the case when we have to load the controls dynamically. We can load user control by calling LoadControl method. To load inbuilt server controls we can use Page.Form.Controls.Add() method or we can user any container like panel or place holder and call Controls.Add() method. Upto this it looks very easy and works fine. However at first postback you either find the control is not loaded or the viewstate is not preserved for that control.
Lets take an example, we have a user control with only one textbox inside it and a web for which have two buttons LoadControl and Submit. When user clicks on LoadControl button we will load the user control and on Submit button we just submit the form so that postback occurs.
Fig - (1) User control with only a textbox.
Fig - (2) Webform with two buttons.
Fig - (3) Code behind for Webform
As you can see we are calling LoadControl() method to load our user control. Now when you click on submit button and you find that the control disappears. WHY? The reason is as we have loaded the control the page's control tree does not have its detail so we need to load the control again with each postback. So first rule for lading dynamic control is,
RULE 1 : Load the Dynamic control in each postback
So in our example we also need to add the control with each postback. However we need to check that whether the control is loaded before postback or not. To check this I have created one property as shown in code below,
Fig - (4) loading dynamic control with each postback.
You may have notice the code the code for lading user control,
Fig - (5) Code for loading User control Dynamically
You may also write this two line code in single line as shown below,
Fig - (6) Code for loading Dynamic Control
If you use this code to load user control dynamically than sometime you find an interesting issue. The viewstate is not maintained for dynamically loaded control !!!!!! The viewstate requires the controls ID to store the viewstate properly. So always use code shown in Fig - (4) to load user control dynamically.
RULE 2 : Always load the Dynamic control by assigning it to one temporary variable so that it has unique id.
One more common mistake is we write Page.Controls.Add() to add the control. This will leads to "Control 'ControlName' of type 'ControlType' must be placed inside a form tag with runat=server" error.
Now we have to find how the viewstate is maintained for dynamically loaded user control. I will suggest you to read this article first. When we add any control dynamically it play "catch-up" with the page life cycle once they are added. Once the control is added to the "
Controls" collection, it plays "catch-up" with the page life cycle, and all the events that it missed are fired. This leads to a very important conclusion: you can add dynamic controls at any time during the page life cycle until the "
PreRender" event. Even when you add the dynamic control in the "
PreRender" event, once the control is added to the "
Controls" collection, the "
Load", and "
SaveViewstate" are fired for this control.
We have seen how to load user controls dynamically now we will see how to load inbuilt server controls. The process is same however we don't have to use LoadControl method, we can directly use Controls.Add() method as shown below,
Fig - (7) Load server controls at runtime and maintaining viewstate
Here we have added server controls and user controls dynamically using regular way. You can load user controls / server control dynamically using AJAX also. Below is the code where I have displayed loading controls using AJAX and normal way.
Fig - (8) code for aspx page.
Fig - (9) Code for aspx.cs page
Fig - (10) Code for user control
Happy Programming !!!