I have often read a common question in forum posts of how to set the values of a User Control from a parent page using a method but no one has provided the proper solution. Considering the preceding requirements, I have decided to write this article to provide the step-by-step solution to create a User Control. So let us start creating an application so beginners can also understand.
For more details of how to create a User Control please refer to my previous article:
Step 1: Create Web Application
Now let us create the sample web application as follows:
- Start -> All Programs -> Microsoft Visual Studio 2010.
- File -> New WebSite -> C# -> Empty WebSite (to avoid adding a master page).
- Provide the web site a name such as "CallingUsercontrolMethod" or anything you wish and specify the location.
- Then right-click on the project in the Solution Explorer then select "Add New Item" then select Web User Control template as follows:
Now open the design mode and add the two textboxes. After adding it, the User Control source code will look as in the following:
In the preceding code we are creating the method setData that will set the values to the textboxes from the parent form, now after creating the properties the student.ascx class file will look as follows:
Now we are done with the method. Let us use it in an .aspx page. As already stated, a User Control does not run directly on its own. To render a User Control you must use it in an .aspx page. Now let us add the User Control to the .aspx page.
Now we need to add the User Control into an .aspx page to use it. So let us add the Default.aspx page by right-clicking on the project in the Solution Explorer. After adding the .aspx page the Solution Explorer will look as follows:
Step 4: Adding User Control into .aspx page
Step 5: Register the User Control on .aspx page
To use a User Control in an .aspx we need to register it using the Register page directive, the register page directive has the following properties:
Now open the default.aspx page and drag and drop two text boxes, one button and also add a control to the .aspx page form the section. After adding the Default.aspx the source code will be as follows:
Now switch to design mode and it will look as follows:
In the preceding UI, on the save button we will pass the values to the user TextBox controls and I will show it in the User Control text box. Now let us see how the method will look, it's similar to any standard TextBox control as:
Step 6: Set the values to User Control from .aspx page using User Control Method
Now in the preceding control you saw that in the method of the User Control we have created is shown the same as standard controls. We can also create a method to set the height and width in a similar manner. Double-click on the Save button and write the following code in the Default.aspx.cs file to set the values
Now the entire code of the Default.aspx.cs class file will look as in the following:
Now run the application, the UI will look as follows:
Now enter the name and city into the preceding two text boxes and click on the Save button. The output will be shown in the User Control text boxes as follows:
Now you have seen that we do not have any code in the .ascx page that is in the User Control but still the output is shown because all the logic is written in the default.aspx page and the values are assigned using methods to the User Control from the parent page.
From the preceding examples you have learned how to use the methods in a User Control to assign the values. I hope this article is useful for all readers, if you have a suggestion then please contact me.