第 61 页

folder or create a new virtual directory entry in which you browse to the physical file location and

specify an alias to appear in the web site list.

The FTP site location type is shown in Figure 20-2, which gives you the option to log in to a remote

FTP site anonymously or with a specified user. When you click Open, Visual Studio saves the FTP

settings for when you create the project, so be aware that it won’t test whether the settings are

correct until it attempts to create the project files and save them to the specified destination.

You can save your project files to any FTP server to which you have access, even

if that FTP site doesn’t have .NET installed. However, you will not be able to run

the files without .NET, so you will only be able to use such a site as a file store.

The last location type is a remote site, which enables you to connect to a remote server that has

FrontPage extensions installed on it. If you have such a site, you can simply specify where you

want the new project to be saved, and Visual Studio 2010 will confirm that it can create the folder

through the FrontPage extensions.

Once you’ve chosen the intended location for your project, clicking OK tells Visual Studio 2010 to

create the project files and store them in the desired location. After the web application has finished

initializing, Visual Studio opens the Default.aspx page and populates the Toolbox with the

components available to you for web development.

The Web Site project has only a small subset of the project configuration options available under the

property pages of other project types, as shown in Figure 20-3. To access these options, right-click

the project and select Property Pages.

fiGure 20-3

404 .

chaPter 20 ASp.neT Web FormS

The References property page, shown in Figure 20-3, enables you to define references to external

assemblies or web services. If you add a binary reference to an assembly that is not in the Global

Assembly Cache (GAC), the assembly is copied to the \bin folder of your web project along

with a .refresh file, which is a small text file that contains the path to the original location of

the assembly. Every time the web site is built, Visual Studio compares the current version of the

assembly in the \bin folder with the version in the original location and, if necessary, updates it.

If you have a large number of external references, this can slow the compile time considerably.

Therefore, it is recommended that you delete the associated .refresh file for any assembly

references that are unlikely to change frequently.

The Build, Accessibility, and Start Options property pages provide some control over how the web

site is built and launched during debugging. The accessibility validation options are discussed later

in this chapter and the rest of the settings on those property pages are reasonably self-explanatory.

The MSBuild Options property page provides a couple of interesting advanced options for web

applications. If you uncheck the Allow This Precompiled Site to be Updatable option, all the content

of the .aspx and .ascx pages is compiled into the assembly along with the code-behind. This can

be useful if you want to protect the user interface of a web site from being modified. Finally, the

Use Fixed Naming and Single Page Assemblies option specifies that each page be compiled into a

separate assembly rather than the default, which is an assembly per folder.

The Silverlight Applications property page allows you to add or reference a Silverlight project that

can be embedded into the web site. This is discussed in more detail in Chapter 22.

creating a web application Project

Creating a Web Application project with Visual Studio 2010 is much the same as creating any other

project type. Select File . New . Project and you are presented with the New Project dialog box,

shown in Figure 20-4. By filtering the project types by language and then by the Web category, you

are given a selection of templates that is partially similar to those available for Web Site projects.

fiGure 20-4

Creating Web Projects .

405

The notable difference in available project templates is that the reporting template is not available

as a Web Application project. However, the Web Application project type includes templates for

creating several different types of server controls.

Once you click OK your new Web Application project will be created with a few more items than

the Web Site projects. It includes an AssemblyInfo file, a References folder, and a My Project item

under the Visual Basic or Properties node under C#.

You can view the project properties pages for a Web Application project by double-clicking the

Properties or My Project item. The property pages include an additional Web page, as shown in

Figure 20-5.

fiGure 20-5

The options on the Web page are all related to debugging an ASP.NET web application and are

covered in Chapter 42, “Debugging Web Applications,” and Chapter 43, “Advanced Debugging

Techniques.”

406

.

chaPter 20 ASp.neT Web FormS

other web Projects

In addition to the standard ASP.NET Web Site and Web Application project templates are templates

that provide solutions for more specific scenarios:

.

ASP.NET MVC 2 Web Application: This creates a web application using the Model-View-

Controller (MVC) architecture. This is only available as a Web Application project and is

discussed in Chapter 21.

.

ASP.NET Web Service: This creates a default Web service called Sevice.asmx, which contains

a sample Web method. This is only available as a Web Application project when the

target is .NET Framework 3.5 or earlier.

.

ASP.NET Reports Web Site: This creates an ASP.NET web site with a report (.rdlc) and a

ReportViewer control bound to the report. This is only available as a Web Site project and is

explained in Chapter 30.

.

ASP.NET Crystal Reports Web Site: This creates an ASP.NET web site with a sample

Crystal Report. This is only available as a Web Site project.

.

ASP.NET Server Control: Server controls include standard elements such as buttons and

textboxes, and also special-purpose controls such as a calendar, menus, and tree view

control. This template is only available as a Web Application project.

.

ASP.NET AJAX Server Control: This contains the ASP.NET web server controls that enable

you to add AJAX functionality to an ASP.NET web page. This is only available as a Web

Application project.

.

ASP.NET AJAX Server Control Extender: ASP.NET AJAX extender controls improve the

client-side behavior and capabilities of standard ASP.NET web server controls. This is only

available as a Web Application project.

.

Dynamic Data Web Site and Web Application: Dynamic Data provides a quick way to

build data-bound web applications that use either LINQ to SQL or Entity Framework.

These are available for both Web Site and Web Application projects, and are covered in

Chapter 23.

From time to time, Microsoft releases additional project templates as a separate download. For

example, in Visual Studio 2008 the ASP.NET MVC and Silverlight 2.0 project types were released

in this manner.

starter kits, community Projects, and open-source applications

One of the best ways to learn any new development technology is to review a sample

application. The Microsoft ASP.NET web site contains a list of starter kits and community

projects at http://www.asp.net/community/projects. These web applications are excellent

reference implementations for demonstrating best practices and good use of ASP.NET

components and design.

Designing Web forms .

407

Unfortunately, many of the starter kits have not been maintained and are still running on older

versions of the .NET Framework. However, they are still very useful because they demonstrate

a wide range of advanced ASP.NET technologies and techniques including multiple CSS themes,

master-detail pages, and user management.

The Microsoft ASP.NET site also contains a list of popular open-source projects that have

been built on ASP.NET. One of the more comprehensive projects is the DinnerNow.net sample

application, available at http://w

w

w.dinnernow.net/. Although it is categorized as an open-

source application, it is really a reference implementation of many of the latest technologies

from Microsoft.

The DinnerNow.net application is a fictitious marketplace where customers can order food from local

restaurants for delivery to their homes or offices. In addition to the latest ASP.NET components,

it demonstrates the use of IIS7, ASP.NET AJAX Extensions, LINQ, Windows Communication

Foundation, Windows Workflow Foundation, Windows Presentation Foundation, Windows

Powershell, and the .NET Compact Framework.

Another great place to find a large number of excellent open-source examples is CodePlex,

Microsoft’s open-source project-hosting web site. Located at http://www.codeplex.com/,

CodePlex is a veritable wellspring of the good, the bad, and the ugly in Microsoft open-source

applications.

desiGninG web forMs

One of the strongest features in Visual Studio 2010 for web developers is the visual design of

web applications. The HTML Designer allows you to change the positioning, padding, and

margins in Design view, using visual layout tools. It also provides a split view that enables you

to simultaneously work on the design and markup of a web form. Finally, Visual Studio 2010

supports rich CSS editing tools for designing the layout and styling of web content.

the htMl designer

The HTML Designer in Visual Studio is one of the main reasons it’s so easy to develop ASP.NET

applications. Because it understands how to render HTML elements as well as server-side ASP.NET

controls, you can simply drag and drop components from the Toolbox onto the HTML Designer

surface to quickly build up a web user interface. You can also quickly toggle between viewing the

HTML markup and the visual design of a web page or user control.

The modifications made to the View menu of the IDE are a great example of what Visual Studio

does to contextually provide you with useful features depending on what you’re doing. When you’re

editing a web page in Design view, additional menu commands become available for adjusting how

the design surface appears (see Figure 20-6).

408 .

chaPter 20 ASp.neT Web FormS

fiGure 20-6

The three submenus at the top of the View menu — Ruler and Grid, Visual Aids, and Formatting

Marks — provide you with a whole bunch of useful tools to assist with the overall layout of controls

and HTML elements on a web page.

For example, when the Show option is toggled on the Visual Aids submenu, it draws gray borders

around all container controls and HTML tags such as <table>

and <div> so you can easily see

where each component resides on the form. It also provides color-coded shading to indicate the

margins and padding around HTML elements and server controls. Likewise, on the Formatting

Marks submenu you can toggle options to display HTML tag names, line breaks, spaces, and much

more. The impact of these options in the HTML Designer can be seen in action in Figure 20-6.

The HTML Designer also supports a split view, shown in Figure 20-7, which shows your HTML

markup and visual design at the same time. You activate this view by opening a page in design mode

and clicking the Split button on the bottom left of the HTML Designer window.

fiGure 20-7

Designing Web forms .

409

When you select a control or HTML element on the design surface, the HTML Designer highlights

it in the HTML markup. Likewise, if you move the cursor to a new location in the markup, it

highlights the corresponding element or control on the design surface.

If you make a change to anything on the

design surface, that change is immediately

fiGure 20-8

reflected in the HTML markup. However,

changes to the markup are not always shown in the HTML Designer right away. Instead, you are

presented with an information bar at the top of the Design view stating that it is out of sync with

the Source view (see Figure 20-8). You can either click the information bar or press Ctrl+Shift+Y to

synchronize the views. Saving your changes to the file also synchronizes it.

If you have a widescreen monitor you can orient the split view vertically to take

advantage of your screen resolution. Select Tools . Options and then click the

HTML Designer node in the TreeView. You can use a number of settings here

to configure how the HTML Designer behaves, including an option called Split

Views Vertically.

Another feature worth pointing out in the HTML Designer is the tag navigator breadcrumb that

appears at the bottom of the design window. This feature, which is also in the Silverlight and

WPF Designers, displays the hierarchy of the current element or control and all its ancestors.

The breadcrumb displays the type of the control or element and the ID or CSS class if it has been

defined. If the tag path is too long to fit in the width of the HTML

Designer window, the list is truncated and a couple of arrow

buttons are displayed so you can scroll through the tag path.

The tag navigator breadcrumb displays the path only from the

current element to its top - level parent. It does not list any elements

outside that path. If you want to see the hierarchy of all the

elements in the current document you should use the Document

Outline window, shown in Figure 20 - 9. Select View . Other

Windows .

Document Outline to display the window. When

you select an element or control in the Document Outline, it is

highlighted in the Design and Source views of the HTML Designer.

However, selecting an element in the HTML Designer does not

highlight it in the Document Outline window.

Positioning controls and htMl elements

One of the trickier parts of building web pages is the positioning of HTML elements. Several

attributes can be set that control how an element is positioned, including whether it is using a relative