Introduction

Welcome to this product comparison video overview showing the differences between the latest Web design tools available from Microsoft and Macromedia, namely, Microsoft’s Visual Studio 2005 and Macromedia’s Dreamweaver, Version 8. In this video, we will examine the use of user controls. User controls in ASP.NET are very simple and probably the most used feature of ASP.NET. User controls contain reusable content that is stored in an ASCX file.

Dreamweaver Section

Dreamweaver has the ability to edit ASCX files with the same support from ASCX Web form files. There’s no distinction made between these two files in Dreamweaver; the same editing features are available, including the Insert tag and Tag Editor. While you can manually create a user control and make it work within an ASP.NET page, Dreamweaver does not offer specific support for the creation of user controls, or the ability to easily drag and drop them onto the design surface.

Visual Studio 2005 Section

Visual Studio 2005 was specifically designed for the use with the .NET Framework 2.0 and has built-in support for user controls. You create the user control in much the same way you create an ASP.NET page, and then can add mark-up and child controls as needed. A user control can include code to manipulate its contents, just like a regular ASP.NET Web form can. There are three distinct differences between a user control and an ASP.NET Web page. First of all, the file name extension for a user control is ASCX. Second, instead of using an "@ Page" directive, the user control contains an "@ Control" directive that defines the configuration and other properties of the user control. Finally, user controls are treated as stand-alone objects by the .NET framework. This makes their properties available in the code behind file so it can be easily referenced programmatically.

User controls are commonly created in order to use the same information on multiple pages. In this example, the user control contains a login box that can be reused. Here is a page where we would like to consume the user control. By simply dragging and dropping the user control into place from the Solution Explorer, all the code and references are automatically written. Notice also that the user control renders itself on the page, so that you see exactly what its going to look like. If we look at the source view of our page, we’ll see that the drag and drop added a registered directive at the top of our page, and then added mark-up to load the user control. Now, if we open our second example page and drag and drop the log in user control onto the design surface, you’ll see that we get the same user control on both pages. The obvious benefit of this is that we can now control the log in box in one place, and any changes to that log in box will automatically affect all of the places where the log in box is used. User controls can also be used inside of other user controls, with no limitations on how many controls can be nested inside each other. This can make for a very granular and powerful approach to designing your Web site.

User controls are also available for programmatic access. Our third example page only has a PlaceHolder control and a button. When the page is running, we want to be able to run the user control when the button is clicked. To accomplish this, we’ll double-click the button at design time, which opens the "code beside" file and lets us define the server side action that will be run when the end user clicks the button. The first line of code in the button click method is a simple load control method to load up the user control on the server… and line two is to add that user control to our PlaceHolder. With this type of server side control, it’s very simple to dynamically load user controls. Now if we run our page, we can see that our page only has a button on it. Clicking this button will run our server side code and load our user control dynamically, now showing the log in box.

User controls can also have properties that can be set at design time or run time. For example, let’s open our WebUserControl, which we built to host the login control. We’d like to add the ability to change the background color of our login control, every time this user control is used. On some pages we want a red color, and on other pages we want a blue color. If we look at the properties for the Log In control, we see that there is in fact a BackColor property. But if we set this property to red, the login control will be red in every instance. We want the ability to set the color of the user control instance, and then have the user control, tell the log in control what color to use. To accomplish this, we’ll open the "code beside" file for WebUserControl. We’ll add a public string variable that will hold the color option. This is a field that will be available for setting anytime this user control is used. We’ll name our field LoginBackColor. Now in the Page_Load method, we’ll check to see if the LoginBackColor has been set. If it has, we’ll se the BackColor of the Log In Control, to be that value. Now let’s look back at our default and default2.aspx pages that are using this user control. On the Default page, we’ll set our LoginBackColor property to Red and on our Default2.aspx page, we’ll set our LoginBackColor property to Blue. Now if we view the Default page, our Log In control will be red. If we change the URL to the default2.aspx page, our login control will have a blue background.

Finally, our new color field can be set programmatically. Remember when we loaded our user control programmatically with the button click in an earlier example. Let’s open that "code beside" page. Line one of the page load method loads our user control into a variable named MyUserControl. Let’s insert a line that sets the MyUserControl LoginBackColor value to Gray. Now if we run the page, and click our login button, our login control will be loaded, and will have a gray back color that was set programmatically.

Conclusion

This concludes our analysis of support for user controls in Dreamweaver Version 8 and Visual Studio 2005.