I have often read a common question in forum posts of how to set the values of a User Control from a parent page in ASP.NET but no one has provided the proper solution so by 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.
What User Control Properties Are
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 "PropertiesinUsercontrol" or another as 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 in the following:
Now open the design mode and add the two textboxes. After adding it, the User Control source code will look as follows:
Step 3: Create Properties in User Control
Write the following code in the student.ascx.cs file to create the properties as:
In the preceding code we are setting the values to the User Control textboxes, now after creating the properties the student.ascx class file will look as in the following:
Now we are done with the properties. Let us use it in an .aspx page. As already discussed in the preceding, 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.
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 such as follows:
Now switch to design mode and it will look as in the following:
In the preceding UI, on the save button we will pass the values to the user text box controls and I will show it in the User Control text box, now let us see how properties will look, its similar to any standard TextBox control as:
Step 6: Set the values to User Control from .aspx page using User Control properties
Now in the preceding control you have seen that the properties of the User Control we have created are shown the same as standard contols. We can also create properties to set the height and width and so on 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 in the following:
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 User default.aspx page and the values are assigned using properties to the User Control from the parent page.
From all the preceding examples you have learned how to use the properties 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.