9,735
Sometimes, when developing web applications, we need to be able to dynamically load controls based on user selections. The following article describes a simple scenario where TextBox controls need to be dynamically loaded according to user input. This simple example can be further extended to dynamically load custom web user controls.
Background
Please familiarize yourself with the ASP.NET Page Life Cycle. It is crucial to understand this cycle in order to avoid messy problems.
The Scenario
Provide the user with a DropDownList in order to let them select the number of TextBoxes to display. Retrieve the values entered by the user and display them in a sentence.
A Dynamic Solution
First of all we need to allocate enough space for the TextBoxes.
For this example I am going to use an array of TextBoxes, in your project you can create as many controls as you require dynamically from a database etc.
(C#)
Expand|Select|Wrap|Line Numbers
- private TextBox textBoxArr(5)
Expand|Select|Wrap|Line Numbers
- Private textBoxArr(4) As TextBox
The reason we do this in the Page_Init method is because this method occurs before ASP.NET loads the page's ViewState. Recall that the ViewState contains all of the page's Objects' properties. ASP.NET sets the properties of your objects right after the Page_Init method finishes executing. If you have not instantiated your TextBoxes (controls) at this point, they will not contain any properties (including the Text property that we're interested in).
(C#)
Expand|Select|Wrap|Line Numbers
- private void Page_Init(Objectsender, System.EventArgs e)
- {
- //This event happens before any controls are initialized by ASP.NET
- //The ViewState for objects has not been loaded.
- //After this event happens, the ViewState is loaded for each control and the object's properties are filled with the values submitted.
- //Creating the TextBox Objects that are dynamically shown in the web page
- //according to the number selected from a DropDownList
- for(int i = 0; i < textBoxArr.Length - 1; i++)
- { textBoxArr(x) = New TextBox();
- textBoxArr(x).ID = "myTextBox" + x.ToString();
- textBoxArr(x).Visible = False; //Initializing the TextBox so that it is not rendered in the browser
- Pnl_TextBoxes.Controls.Add(textBoxArr(x)); //Adding the TextBox to the Panel that holds the text boxes.
- }
- }
Expand|Select|Wrap|Line Numbers
- Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
- 'This event happens before any controls are initialized by ASP.NET'
- 'The ViewState for objects has not been loaded.'
- 'After this event happens, the ViewState is loaded for each control and the object's properties are filled with the values submitted.'
- 'Creating the TextBox Objects that are dynamically shown in the web page'
- 'according to the number selected from a DropDownList'
- For x As Integer = 0 To textBoxArr.Length - 1
- textBoxArr(x) = New TextBox
- textBoxArr(x).ID = "myTextBox" + x.ToString
- textBoxArr(x).Visible = False 'Initializing the TextBox so that it is not rendered in the browser
- Pnl_TextBoxes.Controls.Add(textBoxArr(x)) 'Adding the TextBox to the Panel that holds the text boxes.
- Next
- End Sub
So, now user is able to choose to use up to 6 TextBoxes and we are able to retrieve the Text values that the user has entered into these TextBoxes.
The following code displays the number of TextBoxes that the user has selected from a DropDownList named "numTextBoxes":
(C#)
Expand|Select|Wrap|Line Numbers
- private numTextBoxes_SelectedIndexChanged(System.Objectsender, System.EventArgs e)
- {
- For(int i= 0; i < numTextBoxes.SelectedValue - 1; i++)
- {
- textBoxArr(x).Visible = True //Setting the TextBox visible property to True
- }
- }
Expand|Select|Wrap|Line Numbers
- Protected Sub numTextBoxes_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles numTextBoxes.SelectedIndexChanged
- For x As Integer = 0 To numTextBoxes.SelectedValue - 1
- textBoxArr(x).Visible = True 'Setting the TextBox Visible property to True'
- Next
- End Sub
(C#)
Expand|Select|Wrap|Line Numbers
- private void btnText_Click(Object sender, System.EventArgs e)
- {
- StringBuilder str = New System.Text.StringBuilder();
- for(int i = 0;i < textBoxArr.Length - 1)
- {
- If (textBoxArr(i)!= null)
- {
- str.Append(" " + textBoxArr(i).Text); //Grabbing the text from the TextBox...remember that at this stage the TextBox's Text property has already been set by ASP.NET according to its ViewState
- }
- }
- //Showing in a label what was in the TextBoxes
- lbl_message.Text = "message: " + str.ToString();
- }
Expand|Select|Wrap|Line Numbers
- Private Sub btnText_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnText.Click
- Dim str As New StringBuilder
- For i As Integer = 0 To textBoxArr.Length - 1
- If textBoxArr(i) IsNot Nothing Then
- str.Append(" " + textBoxArr(i).Text) 'Grabbing the text from the TextBox...remember that at this stage the TextBox's Text property has already been set by ASP.NET according to its ViewState
- End If
- Next
- 'Showing in a label what was in the TextBoxes
- lbl_message.Text = "message: " + str.ToString
- End Sub
A Dynamic Solution Using Custom Web User Controls
When dynamically loading a Web User Control into your page you must register that control with your page. In order to do that ASP.NET has provided us with the Page.LoadControl() method.
Example of using custom Web User Controls:
Expand|Select|Wrap|Line Numbers
- Private WithEvents myCtrl As MyWebUserControl
- Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
- myCtrl = Page.LoadControl("~/MyWebUserControl.ascx")
- Pnl_ForDisplayingMyControl.Controls.Add(myCtrl)
- End Sub
