Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In order to make your code more reusable, it's possible to declare public properties that are members of your user controls, and then set the values of these properties when you use the control in a page. For this demonstration, I'm going to use existing file HeaderWithProps.ascx. This is the same file that I was working on previously under the name Header.ascx. Notice that it has two ASP panel components, each resulting in a visual presentation. The first panel has the image, the second one the menu. In the one page that's left in this website that doesn't use the existing control, I still have the existing content, plus I also have an h1, a heading 1 that displays a heading at the top of the page. I would like to make that presentation a part of the control, but I would like to make the text within the heading 1 tags dynamic.
So I can change it when I use the control in a page. Here are the steps. The first part is to declare a public variable that's a member of the component. You can do this with either C# or Visual Basic. I'm going to demonstrate it in C#, but the code is much the same in VB. I'll declare variable starting off with the access modifier, public, then I'll set the data type which will be a string and then the variable name, which I'll call heading. Then optionally, you can set an initial or default value by adding the equals assignment operator and then a string that you want to use if a value is not passed in. I'll use the default string of page heading. That way if I use the control later on, and I've forgotten to set the heading value, I'll see this default value and it will remind me I need to set it.
Now to present that value to the user, I'm going to combine some very simple HTML and an ASP.NET expression that outputs the value of the variable to the page. I'll create a pair of heading 1 tags at the bottom of the page. Then I'll add an output expression, starting with less than, percent, and the equals operator and the variable heading. Notice that Visual Web Developer already knows about the property and allows me to select it from the list. So that's the completed control with a public property. I'll save those changes by pressing Ctrl+S. Next, I'll register the control globally so that it's available to the entire website.
I will go to my web.config file. This is the file where I have previously registered a control named header. I'm going to select and copy the Add element that registered that control. I'll select the line and press Ctrl+C and then clear the selection and press Ctrl+V to create a second version of the tag. I will change the tag name to HeaderWithProps to match the file in which it is defined. I'll set the source attribute to HeaderWithProps.ascx to reference the source code file. Then I'll press Ctrl+S again, saving this file.
Now, I'll return to the title's page. I'll select everything starting with the first Div tag set, continuing through the ASP panel element and this time selecting the h1 tag set as well. And I'll delete all that content because all of these content is part of the control. Now I'll put in an instance of the control. I'll start with the less than character and then start typing cu or customControls. Notice that Visual Web Developer now knows about both controls that have been registered globally in the web.config file.
Select the file HeaderWithProps. I'll add the runat="server" attribute and then I'll set the value of that heading property. I'll pass it in as a simple attribute and I'll set the heading for this particular page as Title List. That's it. I'll save the changes and I'll run the page without debugging. And now the entire heading of my website is completely reusable. The top image banner, the menu and the heading, and I'll be able to pass in a different text value into the heading for each page on which I use the control.
So that's the basic look at how to create your own user controls, how to make them configurable with public properties, how to register them globally for the whole website, and then how to use these controls on individual web pages passing values into the properties to customize their behavior and appearance.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96353 Viewers
56 Video lessons · 110105 Viewers
71 Video lessons · 78911 Viewers
131 Video lessons · 37865 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.