Visual Studio 2005 ASP.NET Design View

ToolKit

LANGUAGES: ALL

ASP.NET VERSIONS:2.0

Visual Studio 2005 ASP.NET Design View

Explore Some New (and Some Not So New) Design ViewFeatures

By Ken McNamee

In the interest of full disclosure, I must admit that I venever used the Visual Studio ASP.NET Web page Design view if I absolutely,positively, did not need to. I coded everything in source view and savedfrequently because if I accidentally hit Design view, Visual Studio.NET might helpfully reformat all my HTML into something completely unreadable. Hate is a strongword, but probably not strong enough when it comes to my feelings about Designview in Visual Studio.NET ... that is, until now.

With Visual Studio 2005, I am finally trulydiscovering the usefulness and RAD capabilities that a well done HTML pagedesigner can provide.

Smart Tags

If you ve been using the Web page Design view in previousVisual Studio versions, then you ll certainly be comfortable with the VisualStudio 2005 version. Microsoft has carried forward all the features of theprior version, cleaned up the interface, fixed a few annoyances, and added anumber of new features.

Probably the most obvious new feature in Design view isthe addition of control smart tags, which are a kind of context-sensitivedialog box that provide quick and easy access to properties and designeractions that are most commonly used for that control. Logically, each type ofcontrol has its own distinctive smart tag; you can see the smart tag for themenu control in Figure 1. The first item on this smart tag is the Auto Formatoption, which you can find on many controls that render a user interface. AutoFormat pops up a dialog box that allows the developer to choose from a list ofthemes for that control. It s an especially useful feature if you want to givethe control a clean and professional look without being bothered to come upwith a design yourself.

Figure 1: The Visual Studio 2005Design view has added smart tags to controls to provide quick and easy accessto common control-specific tasks. In this example, the smart tag providesaccess to the data source property and menu item management dialog box.

The Choose Data Source command allows you to link thecontrol to an existing XmlDataSource or SiteMapDataSource control on the page.Optionally, you can also have the command create a new data source for you.This command is not specific to the Menu control but can be found on allcontrols that have a DataSourceID property. Depending on the control, you maybe able to link it to a SqlDataSource, AccessDataSource, or ObjectDataSource,as well. The new GridView is an example of a control that is most flexible todifferent types of data sources.

Another option to note here is the Edit Items command,which pops up the Menu Item Editor displayed in Figure 1 and is used to createa static list of menu items. Many controls have similar commands that allow youto statically set up the data for the control if the data is not beingdynamically derived from a data source.

Finally, Edit Templates is also a common item you will seeon smart tags, but like Choose Data Source it can behave differentlydepending on the control. Usually, this designer action allows you to add sometext or formatting that will be used for each item in the list.

I should say that all of these designer actions are alsoavailable via the right-click menu, as well as in the Properties window.However, the smart tag provides a uniquely productive interface that just seemsmore natural to work with.

Returning Features

One feature I do use frequently in the Visual Studio.NET2003 Design view is the Style Builder, which you can see in Figure 2. The StyleBuilder is a dialog box that allows you to build and customize the CSS stylefor an HTML element using just about any style attribute you can think of andprobably several that you never knew existed. Personally, I can never seem toremember the spelling and values of some of those style attributes, so thisfeature is a real time saver for me. Let s see, is it border-bottom or bottom-border ;is it visibility: hidden or visibility: false ? You get the idea.

Figure 2: The Style Builder dialogbox allows you to build and customize the CSS style for most HTML elementsusing just about any style attribute you can think of and probably severalthat you never knew existed.

The Document Outline dockable window, shown in Figure 3,is a feature that I also find to be highly useful, especially when I have manynested controls which is something that occurs pretty much all the time. Itsbasic function is simply to give you a quick overview of the structure of yourpage, but clicking on an item in the outline will helpfully select it on thedesign surface or in the source view.

Figure 3: The Document Outlinewindow is great for giving you an overview of the hierarchical structure or theHTML elements and controls in your page. It is especially useful when you havemany deeply nested controls.

In addition to the Document Outline, Visual Studio 2005provides another way to navigate through the structure of your page. In Figure1, just to the right of the Design and Source buttons at the bottom of the IDE,is a breadcrumbs type of interface that allows you to see which HTML element orcontrol currently has focus, as well as all of its parent elements all the wayup to the root tag. You can also click on the tag in thatinterface or the dropdown box next to it to get other options. Unlike theDocument Outline, this feature is new in Visual Studio 2005.

Conclusion

The Design view is just one example of how Visual Studio2005 is far superior to its predecessors. I can now construct a Web page like Iwould a Windows Form. I can drag and drop controls onto the Design surface fromthe Toolbox, move controls around, resize them, and then switch to Source viewand see that it hasn t created a bunch of jumbled, inefficient HTML that willtake me half an hour to reformat and optimize.

Finally, the Web page Designer feels right to thisstubborn source coder.

Ken McNamee is aSenior Software Developer with Vertigo Software, Inc., a leading provider ofsoftware development and consulting services on the Microsoft platform. Priorto this, he led a team of developers in re-architecting the Home ShoppingNetwork s e-commerce site, http://www.HSN.com,to 100% ASP.NET with C#. Readers can contact him at [email protected].