Pro ASP.NET 2.0 In CSharp 2005 (2005) [eng]

28 C H A P T E R 2 ■ V I S U A L S T U D I O 2 0 0 5

Figure 2-2. Browsing to a website location

Once you make your selection and click Open, Visual Studio returns you to the Create Web Site dialog box. Click OK, and Visual Studio will create the new web application. A new website starts with exactly one file—a default.aspx start page.

Projectless Development

In many ways, Visual Studio 2005 web applications are more remarkable for what they don’t contain than what they do. Unlike previous versions of Visual Studio, Visual Studio 2005 web applications don’t include extra files, such as .csproj project files and .sln solution files. Instead, every file in your web folder automatically is considered part of the web application. (This model makes sense, because every web page in a virtual directory is independently accessible, whether or not you consider it an official part of your project.)

Clearing out this clutter has several benefits:

•It’s less work to deploy your website, because you don’t need to specifically exclude these files. There’s also less duplication of settings, because most of what Visual Studio needs (such as assembly references) is stored in the web.config configuration file.

•Team collaboration is greatly simplified, because different people can work independently on different pages without needing to lock the project files.

30 C H A P T E R 2 ■ V I S U A L S T U D I O 2 0 0 5

When you click Finish, Visual Studio performs an in-place conversion. The conversion tool is fairly aggressive, and it attempts to convert every web page to use Visual Studio’s new code-behind model. Any errors and warnings are added to a conversion log, which you can display when the conversion is complete. In a typical website, the conversion operation runs without any errors but generates a long list of warnings. These inform you when Visual Studio removes precompiled files, changes pages to use automatic event wire-up, and modifies the accessibility of event handlers (switching them from private to protected). All of these changes are minor modifications designed to apply the new coding model, which is described in the section “The Coding Model” later in this chapter. Figure 2-4 shows a sample log.

Figure 2-4. A conversion log with typical warnings

Visual Studio 2005 doesn’t support adding old web pages to a new web application using the Website Add Existing Item. If you take this step and try to run your web application, you’ll receive an error informing you that the Visual Studio .NET 2003 version of the code-behind model is no longer supported. Instead, Visual Studio will recommend you use the Open Project feature to start the Conversion Wizard.

Designing a Web Page

To start designing a web page, double-click the web page in the Solution Explorer (start with default.aspx if you haven’t added any pages). A blank page will appear in the designer.

To add controls, choose the control type from the Toolbox on the left. (The controls in the Toolbox are grouped in numerous categories based on their functions, but you’ll find basic ingredients in the Standard tab.) Once you’ve added a control, you can resize it and configure its properties

32 C H A P T E R 2 ■ V I S U A L S T U D I O 2 0 0 5

Using the HTML view, you can manually add attributes or rearrange controls. In fact, Visual Studio even provides limited IntelliSense features that automatically complete opening tags and alert you if you use an invalid tag. Generally, you won’t need to use the HTML view in Visual Studio. Instead, you can use the design view and configure controls through the Properties window.

■Note Unlike previous versions, Visual Studio 2005 doesn’t tamper with your HTML markup. Instead, it always preserves the indenting you use. You can fine-tune this behavior using the Text Editor HTML group of settings in the Tools Options dialog box. For example, one handy option that isn’t turned on by default is Format HTML on Paste, which indents arbitrary blocks of markup when you paste them into a page.

To configure a control, click once to select it, or choose it by name in the drop-down list at the top of the Properties window. Then, modify the appropriate properties in the window, such as Text, ID, and ForeColor. These settings are automatically translated to the corresponding ASP.NET control tag attributes and define the initial appearance of your control. Visual Studio even provides special “choosers” (technically known as UITypeEditors) that allow you to select extended properties. For example, you can select a color from a drop-down list that shows you the color, and you can configure the font from a standard font selection dialog box.

To position a control on the page, you need to use all the usual tricks of HTML, such as paragraphs, line breaks, and tables. Unlike previous versions, Visual Studio 2005 doesn’t support a grid-layout mode for absolute positioning with CSS (Cascading Style Sheets). Instead, it encourages you to use the more flexible flow-layout mode, where content can grow and shrink dynamically without creating a problem. However, there is a way to get back to the grid-layout behavior. All you need to do is add an inline CSS style for your control that specifies absolute positioning. (This style will already exist in any pages you’ve created with a previous version of Visual Studio .NET in gridlayout mode.) Here’s an example:

<asp:Button id="cmd" style="POSITION: absolute; left: 100px; top: 50px;" runat="server" ... />

Once you’ve made this change, you’re free to drag the button around the window at will. Of course, you shouldn’t go this route just because it seems closer to the Windows GUI (graphical user interface) model. Few great web pages rely on absolute positioning, because it’s just too awkward and inflexible.

Smart Tags

Another timesaving feature that’s new in Visual Studio 2005 is the smart tag; smart tags make it easier to configure complex controls. Smart tags aren’t offered for all controls, but they are used for rich controls such as the GridView, TreeView, and Calendar.

You’ll know a smart tag is available if, when you select a control, you see a small arrow in the top-right corner. If you click this arrow, a window will appear with links that trigger other, higherlevel tasks. For example, Figure 2-6 shows how you can use this technique to access Calendar autoformatting. (Smart tags can include many more features, but the Calendar smart tag provides only a single link.)

34 C H A P T E R 2 ■ V I S U A L S T U D I O 2 0 0 5

If you want to configure the HTML element as a server control so that you can handle events and interact with it in code, you need to right-click it in the web page and select Run As Server Control. This adds the required runat="server" attribute to the control tag. Alternatively, you could switch to design view and type this in on your own.

HTML Tables

One convenient way to organize content in a web page is to place it in the different cells of an HTML table using the <table> tag. In previous versions of Visual Studio, the design-time support for this strategy was poor. But in Visual Studio 2005, life gets easier. To try it, drag a table from the HTML tab of the Toolbox. You’ll start with a standard 3 3 table, but you can quickly transform it using editing features that more closely resemble a word processor than a programming tool. Here are some of the tricks you’ll want to use:

•To move from one cell to another in the table, press the Tab key or use the arrow keys. The current cell is highlighted with a blue border. Inside each cell you can type static HTML or drag and drop controls from the Toolbox.

•To add new rows and columns, right-click inside a cell, and choose from one of the many options in the Insert submenu to insert rows, columns, and individual cells.

•To resize a part of the table, just click and drag.

•To format a cell, right-click inside it, and choose Style. This shows the same Style Builder dialog box you saw in Figure 2-7.

•To work with several cells at once, hold down Ctrl while you click each cell. You can then right-click to perform a batch formatting operation.

•To merge cells (in other words, change two cells into one cell that spans two columns), just select the cells, right-click, and choose Merge.

With these conveniences, you might never need to resort to a design tool like Dreamweaver.

The Visual Studio IDE

Now that you’ve created a basic website, it’s a good time to take a tour of the different parts of the Visual Studio interface. Figure 2-8 identifies each part of the Visual Studio window, and Table 2-1 describes each one.

Table 2-1. Visual Studio Windows

36 C H A P T E R 2 ■ V I S U A L S T U D I O 2 0 0 5

■Tip The Visual Studio interface is highly configurable. You can drag the various windows and dock them to the sides of the main Visual Studio window. Also, some windows on the side automatically slide into and out of view as you move your mouse. If you want to freeze these windows in place, just click the thumbtack icon in the top-right corner of the window.

Solution Explorer

The Solution Explorer is, at its most basic, a visual filing system. It allows you to see the files that are in the web application directory.

Table 2-2 lists some of the file types you’re likely to see in an ASP.NET web application.

Table 2-2. ASP.NET File Types

In addition, your web application can contain other resources that aren’t ASP.NET file types. For example, your virtual directory can hold image files, HTML files, or CSS files. These resources might be used in one of your ASP.NET web pages, or they can be used independently.

Visual Studio distinguishes between different file types. When you right-click a file in the list, a context menu appears with the menu options that apply for that file type. For example, if you rightclick a web page, you’ll have the option of building it and launching it in a browser window.

Using the Solution Explorer, you can rename, rearrange, and add files. All these options are just a right-click away. To delete a file, just select it in the Solution Explorer, and press the Delete key.

You can also add new files by right-clicking the Solution Explorer and selecting Add Add New Item. You can add various different types of files, including web forms, web services, stand-alone

classes, and so on. You can also copy files that already exist elsewhere on your computer (or an accessible network path) by selecting Add Add Existing Item. Use the Add New Folder to create a new subdirectory inside your web application. You can then drag web pages and other files into or out of this directory.

Visual Studio also checks for project management events such as when another process changes a file in a project you currently have open. When this occurs, Visual Studio will notify you and give you the option to refresh the file.

Document Window

The document window is the portion of Visual Studio that allows you to edit various types of files using different designers. Each file type has a default editor. To learn a file’s default editor, simply right-click that file in the Solution Explorer, and then select Open With from the pop-up menu. The default editor will have the word Default alongside it.

Depending on the applications you’ve installed, you may see additional designers that plug into Visual Studio. For example, if you’ve installed FrontPage 2003, you’ll have the option of editing web pages with a FrontPage designer (which actually opens your web page in a stand-alone FrontPage window).

Toolbox

The Toolbox works in conjunction with the document window. Its primary use is providing the controls that you can drag onto the design surface of a web form. However, it also allows you to store code and HTML snippets.

The content of the Toolbox depends on the current designer you’re using as well as the project type. For example, when designing a web page, you’ll see the set of tabs described in Table 2-3. Each tab contains a group of buttons. You can see only one tab at a time. To view a tab, click the heading, and the buttons will slide into view.

Table 2-3. Toolbox Tabs for an ASP.NET Project