ASP.NET 3.5-Related Visual Studio 2008 Enhancements (continued)
JavaScript IntelliSense
For years I have taken the IntelliSense capability inside Visual Studio for granted but that changed quickly the more I began writing client-side JavaScript code. If you are like me, you will really appreciate Visual Studio 2008's built-in support for JavaScript IntelliSense. Wow, this makes such a difference writing JavaScript code in Visual Studio 2005 versus Visual Studio 2008. Being able to select JavaScript keywords and language features from an IntelliSense list makes building AJAX applications so much easier (see
Figure 19).
 | |
| Figure 19. JavaScript Intellisense: IntelliSense displays JavaScript keywords and types. |
IntelliSense also extends to external JavaScript libraries as well. I have created a
CodeMagazine.js file that contains a single function. You can optionally include comments that will provide a richer IntelliSense experience when the function is referenced:
function AgeInDogYears(Age)
/// <summary>This returns a person's age in dog years</summary>
/// <param name="Age">Person's Age</param>
/// <returns>integer</returns>
{
var DogYears = Age * 7
return DogYears
}
 | |
| Figure 20. Intellisense for External JavaScript Libraries: IntelliSense picks up the members of an external JavaScript library. |
You just need to declare an external JavaScript reference either manually or by dragging the
.js file into the
<HEAD> tag and IntelliSense picks up on the functions contained in the external library (see
Figure 20).
JavaScript Debugging
With the increased popularity of AJAX-enabled Web applications, the improved support in Visual Studio 2008 for debugging JavaScript code will come as welcome news. If you have had to debug JavaScript code in the past, I am sure you will agree that one of the frustrating things about debugging JavaScript code with Visual Studio 2005 was that you had to run your ASP.NET application before you could set any breakpoints in the debugger. Fortunately, Microsoft dramatically improved this situation because you can now set breakpoints in your JavaScript code located in regular ASP.NET pages (
.aspx), external code files (
.js), and in your master pages (
.master) (see
Figure 21).
 | |
| Figure 21. JavaScript Breakpoints: You can set breakpoints in your JavaScript code. |
|
 | |
| Figure 22. JavaScript Debugging: The runtime debugger displaying a JavaScript breakpoint. |
|
|
 | |
| Figure 23. JavaScript Object Inspector: JavaScript object inspection has been improved. |
In addition, you can now set breakpoints in your client-side JavaScript code and your server-side Visual Basic or C# code on the same page and utilize a single debugger session to step though all the code (see
Figure 22).
Also, I think one of the most significant additions to the JavaScript debugging experience is the improved object inspection support, which provides more detailed object property and property type information (see
Figure 23).
CSS Properties Window
The first of the new CSS features added to Visual Studio 2008 that I will cover is the CSS Properties window. You will find it about half-way down the View menu. The CSS Properties window shows you all the CSS settings currently being applied to any ASP.NET server control or HTML element (see
Figure 24). A red line displayed through the property name indicates that it has been overridden. Overridden style properties are not applied to the selected element. Click the Summary button to display all the properties that are applied to the selected element (see
Figure 25). As you can see, the new CSS Properties window makes keeping track and changing CSS values quick and easy.
 | |
| Figure 24. CSS Properties Window: The CSS Properties window displays all the CSS properties for the selected item. |
|
 | |
| Figure 25. CSS Properties Summary: The CSS Properties Summary provides a list of properties that are applied to the selected element. |
|
|
Manage Styles Window
 | |
| Figure 26. Manage Styles Window: The Manage Styles window displays all the styles in a CSS file and indicates which elements are in use. |
The Manage Styles window is a welcome addition to Visual Studio 2008. It helps you visually manage the CSS styles used on the page you are currently working with in both Design and Source view (see
Figure 26). You will find it on the View menu, just after the CSS Properties menu option. When an item is circled it means that rule is currently used somewhere on the current page. Hover over a style to display the rule values for that rule. Select a rule and you'll see a preview of its appearance in the Selected Style Preview section at the bottom of the Manage Styles window. Double-click on a rule to open the style sheet in which it resides. Start making changes and you'll see another feature of Visual Studio 2008—full IntelliSense within your style sheets.
At the top of the Manage Styles window you'll see an option to create new styles and an option to load an additional style sheet into the Manage Styles window if your project utilizes more than a single style sheet. You can click the Options button to display a number of display options (see
Figure 27).
 | |
| Figure 27. CSS Options: The Options button provides categorizing and display options for the CSS elements. |
All these new features in ASP.NET 3.5 and Visual Studio 2008 should peak your interest and the coverage here should help jumpstart your learning process. Even if you aren't ready to start using the new features in ASP.NET 3.5, because of the multi-framework targeting support in Visual Studio 2008, you can take advantage of all the new Web development features such as the JavaScript debugging, JavaScript IntelliSense, improved Web designer, nested master pages, and CSS features in your ASP.NET 2.0 applications.
You can find
videos regarding ASP.NET 3.5 and Visual Studio 2008 on the Microsoft ASP.NET Web site.
Previous Page
