Вы находитесь на странице: 1из 5286

VViissuuaall SSttuuddiioo 22000055 VViissuuaall WWeebb DDeevveellooppeerr

Copyright© 2016 Microsoft Corporation

The content in this document is retired and is no longer updated or supported. Some links might not work. Retired content represents the latest updated version of this content.

Visual Web Developer

Visual Web Developer

Visual Web Developer is a tool for creating and working with ASP.NET Web applications (called simply "Web sites") in a variety of configurations.

In This Section

Welcome

Provides general information on Visual Web Developer and on improvements and enhancements in the Web development tool since Visual Studio .NET 2003.

Guided Tour of Creating Web Sites in Visual Web Developer

Lists walkthrough topics (tutorials) that illustrate how to use Visual Web Developer to create and customize Web sites.

ASP.NET Web Sites (Visual Studio)

Provides information on how to create ASP.NET Web applications (sometimes referred to as a Web sites).

ASP.NET Web Pages (Visual Studio)

Provides information about how ASP.NET Web pages function and how to create and program them.

ASP.NET Web Server Controls (Visual Studio)

Provides information about how ASP.NET Web server controls work, how to add them to ASP.NET pages, and how to program them.

ASP.NET Data Access (Visual Studio)

Provides information on displaying and editing data in ASP.NET Web pages.

ASP.NET Web Site Security (Visual Studio)

Provides information on security threats to your ASP.NET applications, ways to mitigate threats, and ways to authenticate and authorize users.

ASP.NET Debugging and Troubleshooting (Visual Studio)

Provides information on handling errors, debugging ASP.NET pages, viewing trace information during page processing, and monitoring the health of your application.

Customizing ASP.NET Web Sites (Visual Studio)

Provides information on enabling your Web site to track individual users, adding navigation features to your site, creating Web pages for multiple languages and cultures, and creating Web pages that are accessible to people with disabilities.

Managing ASP.NET Web Sites in Visual Studio

Provides information on configuring an ASP.NET Web site, deploying (publishing) Web sites, and managing performance for your applications.

XML Web Services (Visual Studio)

Provides information on creating and using components that can be accessed across the Web using standard protocols such as HTTP.

Converting from Visual Studio .NET 2002 or 2003

Provides information on converting Web projects created in Visual Studio .NET 2002 or 2003 to the format used for projects in Visual Web Developer, including details about how project settings are handled.

ASP.NET Web Sites for Mobile Devices (Visual Studio)

Provides information on features in ASP.NET that help you create applications that can render to browsers in mobile phones and other devices.

Visual Web Developer

Welcome

This section welcomes you to Visual Studio and provides an overview of the product.

In This Section

What's New in Web Development for Visual Studio Describes changes and improvements that have been introduced in ASP.NET 2.0.

Visual Web Developer

Introduction to Visual Web Developer

Welcome to Visual Web Developer. Visual Web Developer is a full-featured development environment for creating ASP.NET Web applications (which are simply called "Web sites"). Visual Web Developer offers you the following features:

Web page designVisual Web Developer offers you the following features: A powerful Web page editor that includes WYSIWYG

A powerful Web page editor that includes WYSIWYG editing and an HTML editing mode with

IntelliSense and validation.

Page design features skins. skins.

Code editingIntelliSense and validation. Page design features skins. Consistent site layout with master pages and consistent page

Consistent site layout with master pages and consistent page appearance with themes and

A code editor that enables you to write code for your dynamic Web pages in Visual Basic or C#. The code

editor includes syntax coloration and IntelliSense.

DebuggingThe code editor includes syntax coloration and IntelliSense. Controls A debugger that helps you find errors

Controlsincludes syntax coloration and IntelliSense. Debugging A debugger that helps you find errors in your programs.

A debugger that helps you find errors in your programs.

An extensive suite of ASP.NET Web server controls that incorporate much of the functionality you need for

creating Web sites.

Data accessmuch of the functionality you need for creating Web sites. Support for displaying and editing data

Support for displaying and editing data in your Web pages. The data can be in a variety of data stores,

including databases or XML files. In many cases, you can add data display and editing to your Web pages without writing any code.

Security, personalization, and moreand editing to your Web pages without writing any code. Built-in application services that enable you

Built-in application services that enable you to add membership for login

security to your site, profile properties that enable you to maintain user-specific information, and other features, most without requiring any code.

Development for hosted sitesand other features, most without requiring any code. Tools for publishing sites to your hosting site,

Tools for publishing sites to your hosting site, including a local Web server for testing.

Local Development for Hosted Sites

Visual Web Developer provides an ideal environment in which to build Web sites and then publish them to a hosting site. Using the development tools in Visual Web Developer, you can develop ASP.NET Web pages on your own computer. Visual Web Developer includes a local Web server that provides all the features you need to test and debug ASP.NET Web pages, without requiring Internet Information Services (IIS) to be installed.

When your site is ready, you can publish it to the host computer using the built-in Copy Web tool, which transfers your files when you are ready to share them with others. Alternatively, you can precompile and deploy a Web site by using the Build Web Site command. The Build Web Site command runs the compiler over the entire Web site (not just the code files) and produces a Web site layout that you can deploy to a production server.

Note

Note

The Build Web Site feature is not available in Visual Web Developer Express Edition.

Finally, you can take advantage of the built-in support for File Transfer Protocol (FTP). Using the FTP capabilities of Visual Web Developer, you can connect directly to the host computer and then create and edit files on the server.

Exploring Visual Web Developer

To learn more about creating dynamic Web sites with Visual Web Developer, see the following resources:

The guided tour, which introduces many of the features you will use frequently when creating ASP.NET Web sites. To start, see Guided Tour of Creating Web Sites in Visual Web Developer . Guided Tour of Creating Web Sites in Visual Web Developer.

The ASP.NET 2.0 Starter Kits for Visual Web Developer are complete Web sites that you can use with minor customization for your own site. These starter kits show you creative ways to use the features of Visual Web Developer to create professional, functional Web sites. To use a starter kit, create a new Web site and select the starter kit that you want. Visual Web Developer comes packaged with the Personal Web Site Starter Kit, which creates a Web site that includes your latest news, a photo album, and other features. For more information, see Visual Web Developer Starter Kits . Visual Web Developer Starter Kits.

If you need assistance while working with Visual Web Developer, you can refer to the online Help. The Help system can be extended to take advantage of online information resources as well.

See Also

Other Resources

Guided Tour of Creating Web Sites in Visual Web Developer

Visual Web Developer

What's New in Web Development for Visual Studio

Microsoft Visual Studio 2005 includes the Visual Web Developer Web development tool, which is a set of tools and utilities for creating ASP.NET version 2.0 Web sites. Visual Web Developer represents an evolutionary improvement in support for creating Web sites. Visual Web Developer continues to bring you the productivity benefits of the integrated development environment (IDE) while introducing a wide array of improvements.

The major improvements for this version of Visual Web Developer include the following:

ASP.NET 2.0 support.this version of Visual Web Developer include the following: Visual Web Developer supports new ASP.NET 2.0

Visual Web Developer supports new ASP.NET 2.0 features, including a host of new controls that are introduced in ASP.NET 2.0. In addition, Visual Web Developer adheres closely to native ASP.NET 2.0 features and does not add designer-specific features. For example, Visual Web Developer does not embed designer-specific tags in your ASP.NET 2.0 pages.

More flexible project and deployment options.not embed designer-specific tags in your ASP.NET 2.0 pages. Visual Web Developer allows you to create

Visual Web Developer allows you to create traditional Microsoft Internet Information Services (IIS) applications in the IIS root on local and remote computers and it also supports virtual roots, opening Web sites by using File Transfer Protocol (FTP), and using stand-alone files that reside outside a project. The end result is that it is substantially easier to create and deploy ASP.NET 2.0 applications.

Improved code-behind model.easier to create and deploy ASP.NET 2.0 applications. Visual Web Developer can create pages by using

Visual Web Developer can create pages by using either a new code-behind model or by including code in the ASP.NET page (the .aspx file).

Improved programming capabilities.or by including code in the ASP.NET page (the .aspx file). Many basic tasks have been

Many basic tasks have been greatly simplified. For example, you can create a data-bound page with no coding whatsoever. New ASP.NET 2.0 controls add substantial functionality that used to require you to write your own code. Microsoft IntelliSense and related technologies have been expanded to work virtually everywhere.

The following sections provide a high-level summary of the changes in Visual Web Developer.

Web Sitesa high-level summary of the changes in Visual Web Developer. Projects Dynamic Compilation Model Editing Programming

Projectssummary of the changes in Visual Web Developer. Web Sites Dynamic Compilation Model Editing Programming Improved

Dynamic Compilation Modelof the changes in Visual Web Developer. Web Sites Projects Editing Programming Improved Code-Behind Model Controls

EditingWeb Developer. Web Sites Projects Dynamic Compilation Model Programming Improved Code-Behind Model Controls Data

ProgrammingWeb Sites Projects Dynamic Compilation Model Editing Improved Code-Behind Model Controls Data Controls and Data

Improved Code-Behind ModelSites Projects Dynamic Compilation Model Editing Programming Controls Data Controls and Data Binding Converting Existing

ControlsModel Editing Programming Improved Code-Behind Model Data Controls and Data Binding Converting Existing Web Sites

Data Controls and Data BindingEditing Programming Improved Code-Behind Model Controls Converting Existing Web Sites Web Application Projects For

Converting Existing Web SitesCode-Behind Model Controls Data Controls and Data Binding Web Application Projects For information about new features

Web Application ProjectsData Controls and Data Binding Converting Existing Web Sites For information about new features in ASP.NET

For information about new features in ASP.NET 2.0, see What's New in ASP.NET.

Web Sites and Projects

Visual Web Developer features a flexible approach to creating Web sites (also called projects and Web applications in previous versions of Visual Web Developer and the Web page designer, respectively). Web sites in Visual Web Developer are not necessarily bound to Microsoft Internet Information Services (IIS) nor to physical folders on the IIS root.

You can now create the following types of Web sites:

File system.Information Services (IIS) nor to physical folders on the IIS root. You can now create the

You can keep all the files for a Web site in a simple folder. File-system Web sites do not depend on IIS. For details, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

Local IIS.Creating a Basic Web Page in Visual Web Developer . As in previous versions of Visual

As in previous versions of Visual Studio, you can create IIS applications that can reside either on the local IIS root or on a virtual directory. You can create virtual folders, as well. For details, see Walkthrough: Basic Data Access in Web Pages.

Remote.details, see Walkthrough: Basic Data Access in Web Pages . You can create applications residing on

You can create applications residing on remote servers that support FrontPage 2002 Server Extensions from Microsoft. This is the model that was used for previous versions of Visual Web Developer and continues to be supported in this version.

FTP.Web Developer and continues to be supported in this version. You can open Web sites across

You can open Web sites across FTP. For details, see Walkthrough: Editing Web Sites with FTP in Visual Web Developer.

ASP.NET Development Server

The Visual Web Developer Web development tool ships with a lightweight test application server, the ASP.NET Development Server, which you can use to test file system Web sites, without having to use IIS. For more information, see Web Servers in Visual Web Developer.

Projects

In the new version of Visual Web Developer, Web sites are not dependent on project and solution files. You can add files to a Web site either in Visual Web Developer or by using Microsoft Windows Explorer, and the files are automatically part of the Web site.

Visual Web Developer still creates project and solution files to store a small amount of project-specific information, such as your IDE settings. Much of the information that was previously stored in project files now either is stored in the Web.config file as standard ASP.NET 2.0 configuration settings or is no longer necessary. The project file stores no information that is required to run the application.

Working without a project model not only makes it possible to add, edit, and remove files outside of Visual Web Developer, it also makes it easier for more than one developer to work together to create a Web site. More than one developer can add or remove files from a Web site without requiring access to a centralized project file that needs to be updated with file information. In addition, it is easier to keep Web site files in a source-control system, such as the Microsoft Visual SourceSafe version control system, because developers do not have to exclusively check out a project file to add files to the Web site.

Dynamic Compilation Model

In Visual Web Developer, Web sites no longer use the compilation model that was used in previous versions, in which the executable code for the entire project was compiled into a single assembly. Instead, by default, the new version uses the dynamic compilation model that is native to ASP.NET 2.0.

Working with Web sites that do not produce an executable assembly as their output has a number of advantages:

You can test Web sites that contain pages still in development—pages that contain compilation errors do not prevent other pages in the Web site from running.assembly as their output has a number of advantages: For development on large Web sites, the

For development on large Web sites, the entire application does not need to be recompiled every time a change is made to a single page or component. When a developer changes a single page, only that page is recompiled when it is next requested.do not prevent other pages in the Web site from running. Different developers can make edits

Different developers can make edits to different pages at the same time without interfering with one another's changes, as could happen when compiling the project to a single assembly, as in Microsoft Visual Studio .NET 2003.only that page is recompiled when it is next requested. When you test a Web site,

When you test a Web site, the Web site is still compiled (built). However, the compilation step is used as verification that all the pages and their dependencies can be compiled; the output of the compilation process is not used as the basis for running the Web site. This build step is more comprehensive than it was in earlier versions because it validates not only that the code can be compiled but also finds errors in the markup syntax and Web.config file.

Publishing Web Sites

Because some developers do not want to deploy source code with their Web sites, the Visual Web Developer Web development tool provides the option to precompile and deploy a Web site by using the Build Web Site command. The Build Web Site command runs the compiler over the entire Web site (not just the code files) and produces a Web site layout that

you can deploy to a production server. The layout includes assemblies for individual pages, which include both the code and the markup for the page (that is, the .aspx files are compiled also).

Note

Note

This feature is not available in Visual Web Developer Express Edition.

The primary benefit of precompiling is that it allows you to deploy only executable code, thus bringing a measure of protection to your intellectual property. In addition, precompiling finds any compile-time errors in the pages or dependent code. Finally, precompiling improves performance and reduces the time it takes for pages in your Web site to render the first time.

Editing Pages

Visual Web Developer offers the following enhancements for creating and editing Web pages:

Support for new page features.following enhancements for creating and editing Web pages: The Visual Web Developer Web page designer features

The Visual Web Developer Web page designer features WYSIWYG support for new ASP.NET 2.0 page elements, such as master pages. For details, see ASP.NET Master Pages Overview and Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer.

Preservation of source code.and Using ASP.NET Master Pages in Visual Web Developer . Visual Web Developer maintains the HTML

Visual Web Developer maintains the HTML formatting of your page when you switch between Design and Source view and when you save files.

Enhanced HTML generation and validation.between Design and Source view and when you save files. Visual Web Developer provides more options

Visual Web Developer provides more options for generating and validating the HTML on your page. By default, the Web page designer creates markup that is XHTML 1.1 compatible and new schemas include support for several variations of XHTML. You can set options to determine how strictly Visual Web Developer validates the elements in your page and HTML is also validated more strictly. Additionally, Visual Web Developer provides error information in ToolTips.

Drag-and-drop functionality in Source view.Visual Web Developer provides error information in ToolTips. You can drag controls from the Toolbox while

You can drag controls from the Toolbox while in Source view.

For more information, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

Programming

Visual Web Developer includes a number of improvements to the code editor that help you code more productively, including the following:

Microsoft IntelliSense technology.help you code more productively, including the following: Statement completion is now virtually everywhere when you

Statement completion is now virtually everywhere when you edit Web pages. The IntelliSense technology helps you create code in both code-behind and single-file pages, markup tags, page directives, and so on.

Event drop-down lists.single-file pages, markup tags, page directives, and so on. You can create event-handlers in Source view

You can create event-handlers in Source view by using event drop-down lists, as you previously could do only in Code view. The Properties window now allows you to create event handlers for both Visual Basic and C#.

Single-file page support.you to create event handlers for both Visual Basic and C#. The code editor now provides

The code editor now provides equivalent support for code-behind and single-file ASP.NET 2.0 pages. (For information about changes to the code-behind model, see Improved Code-Behind Model.) Both code models support syntax coloration, IntelliSense technology, and so on.

Shared code.syntax coloration, IntelliSense technology, and so on. Classes for which the source code is in the

Classes for which the source code is in the App_Code folder for your Web application are automatically referenced; if you have compiled components, you can place them in the Bin folder to have Visual Web Developer reference them automatically. IntelliSense functionality picks up information about any components that are installed in the App_Code or Bin folder of your application. For details, see Walkthrough: Using Shared Code in Web Sites in Visual Web Developer.

Debugging.or Bin folder of your application. For details, see Walkthrough: Using Shared Code in Web Sites

You have full debugging facilities for local Web sites, including file system Web sites. Debugging is less complex and faster than in previous versions. For details, see Walkthrough: Debugging Web Pages in Visual Web Developer.

Improved Code-Behind Model

A significant difference between previous versions of Visual Web Developer and this release is in how code-behind pages work. In Microsoft Visual Studio .NET 2002, when you created a new Web Forms page, Visual Web Developer created an .aspx file with the markup and a separate .vb or .cs file (the code-behind file) for the page's code. The code-behind file defined a complete class that was derived from the Page class.

The Web page designer kept the .aspx file and the code-behind file in synchronization. For example, if you added a Web server control to the .aspx file, the Web page designer created a corresponding instance variable in the code-behind file for that control.

In this version, the code-behind model takes advantage of a new language feature known as partial classes. The code-behind file for a page is not a complete class definition. Instead, it includes only the application code that you need, such as event handlers. The code-behind partial class does not need to include instance variables; ASP.NET 2.0 infers the control instances from the markup at compile time. If you are coding in C#, you do not need to include explicit delegates for event binding, because ASP.NET 2.0 can deduce them from the event attributes (for example, onclick) in the control markup. In Visual Basic, you can add a Handles clause onto the declaration of an event method, as in the previous model, to bind the event to the handler.

The new code-behind model offers a number of advantages over the previous model, as follows:

True separation of code and markup.a number of advantages over the previous model, as follows: In previous versions, the markup and

In previous versions, the markup and code were stored in separate files. However, because previous versions needed to keep the files in synchronization by using instance variables and event delegates, it was not practical to work with the files separately. For example, it was not practical for a page developer to work on the layout of the page while another developer worked on the code. In this version, this is much more achievable.

Less complexity in referencing controls.on the code. In this version, this is much more achievable. As noted, the new code-behind

As noted, the new code-behind model does not require explicit instance variables in the code-behind page. Even though previous versions managed the instance variables, it did not do so for all controls—notably for user controls or for some HTML elements that were declared as controls. In this version, because no instance variables are required, all controls, including user controls, are referenced implicitly.

Less generated code.including user controls, are referenced implicitly. The new code-behind model contains virtually no generated

The new code-behind model contains virtually no generated code beyond the class definition itself. There are no reserved areas in the code-behind that the editor might overwrite.

Controls

Visual Web Developer supports new ASP.NET 2.0 controls, which offer new functionality, which results in significantly greater productivity. In addition to hosting new controls, the Web page designer includes improvements to help you work more easily with controls. Highlights include the following:

More consistent and powerful editing model.more easily with controls. Highlights include the following: The overall model for working with controls is

The overall model for working with controls is more consistent between controls and allows you to perform many more actions without having to use the Properties window or edit the declarative syntax of a control.

Visual display of controls.window or edit the declarative syntax of a control. The Web page designer has improved support

The Web page designer has improved support for rendering controls; for example, user controls are now rendered visually in Design view.

Task-based editing.user controls are now rendered visually in Design view. As you work with controls, they display

As you work with controls, they display a Smart Tag menu (a floating, shortcut menu of tasks) for the current control. Typical actions that are offered by task-based editing include editing templates and setting up data binding.

Template editing.include editing templates and setting up data binding. The Web page designer provides a simplified and

The Web page designer provides a simplified and more intuitive interface for creating and editing templates on complex controls, such as the DataList and GridView controls.

Table editing.It is now much easier to create and edit HTML tables in the Web page

It is now much easier to create and edit HTML tables in the Web page designer. For details, see Walkthrough: Editing HTML Tables in Visual Web Developer.

Control Extensibility

You can now extend controls in powerful new ways. As before, you can create user controls and custom controls. This release of the Visual Web Developer Web development tool provides improved support for user controls, including WYSIWYG rendering in Design view and Properties window support.

You can extend the run-time behavior of controls by creating adapters, which define the output of the control for a specific device or browser. At run time, ASP.NET 2.0 determines the type of device that generated the request and invokes a control adapter to render the appropriate output for that device for a given control. By creating an adapter for a control and a specific class of device, you can customize the output for that control for the device. Adapters are especially useful for creating custom rendering for new devices. For more information, see Developing Adapters for ASP.NET Server Controls.

If you develop custom controls, you now have improved support for hosting your control in a Web page designer, including the following:

Classes that allow you to add region-based editing to your controls at design time.control in a Web page designer, including the following: Support for task-based editing, so that you

Support for task-based editing, so that you can define verbs (tasks) that are exposed for your control by using a shortcut menu in the Web page designer.to add region-based editing to your controls at design time. Template-editing services that simplify adding support

Template-editing services that simplify adding support for templates in your controls.control by using a shortcut menu in the Web page designer. Controls can take advantage of

Controls can take advantage of tool-based services for improved interaction with their hosting environment. For example, controls have access to the page directive, the project system, and the current document.that simplify adding support for templates in your controls. Data Controls and Data Binding Working with

Data Controls and Data Binding

Working with data is an important part of many ASP.NET 2.0 Web pages, and Visual Web Developer includes many improvements to make data access easier to implement and manage. The overall goal for data binding in ASP.NET 2.0 is to be able to accomplish a wide variety of data-binding scenarios without having to write any code at all. This version supports this goal and extends it by providing wizards that help you configure data binding and create data components.

Data Binding with Data Source Controls

The model for binding controls on the page to data sources has been improved considerably. The data-binding model for Microsoft Visual Studio .NET 2002 required that you add data components, such as a connection and dataset objects, on the page. Then, you needed to write code to manage data binding to data controls, such as the DataList and DataGrid controls.

To simplify data binding, ASP.NET 2.0 introduces data source controls. Data source controls provide a single object in which you can declaratively define the following:

Connection information.object in which you can declaratively define the following: Queries (a SQL statement, stored parameter name,

Queries (a SQL statement, stored parameter name, or the names of methods to invoke on an object).declaratively define the following: Connection information. Parameters—you can define parameters declaratively and

Parameters—you can define parameters declaratively and specify that they get their values from a control on the page, from a query string, from session variables, or from other sources.name, or the names of methods to invoke on an object). Behavior options (depending on the

Behavior options (depending on the data source control), such as paging and caching.query string, from session variables, or from other sources. In general, you do not need to

In general, you do not need to work directly with the objects that are used to manage data access, such as datasets or data readers. Data source controls create data components under the covers. You do not work with those components, but you do need to be aware of them when you want to use a feature, such as paging, that depends on choosing between a dataset and a data reader.

ASP.NET 2.0 provides data source controls for different types of data stores, including SQL (for OLE DB and Open Database Connectivity [ODBC] databases), XML files, and business objects. All data source controls expose the same interface to data controls on the page, so that controls, such as the DataList and Repeater controls, and the new GridView control, can bind the same way to any data source control, regardless of the underlying data store that they represent, and then display data on the page. The result is that you can use the full array of ASP.NET 2.0 data controls to work with a wide variety of data sources.

To help you create and configure data source controls, the Visual Web Developer Web development tool includes wizards that help you to create connections, define queries or specify methods to call, and configure parameters.

Enhanced Data Controls

All data controls in ASP.NET 2.0 have been enhanced to work with data source controls. Instead of pointing a control at a dataset or data reader, you reference a data source control. The data control and data source control then work together to manage data binding automatically, so that in most cases you do not need to write code to perform data binding.

As a result, you can take advantage of automatic data binding in any data-bound control. In addition, ASP.NET 2.0 introduces new data controls that provide additional functionality. These include the following:

The GridView control, which is the successor to the DataGrid control. GridView control, which is the successor to the DataGrid control.

The GridView control automates many of the features of the DataGrid control, so that you do not need to write code for editing, sorting, or paging. For situations in which you want to customize the control's behavior, you can continue to use the object model that you are familiar with from the DataGrid control.

The DetailsView control displays one record at a time and allows you to edit, delete, and DetailsView control displays one record at a time and allows you to edit, delete, and insert records.

You can also page through multiple records.

The FormView control is similar to the DetailsView control, but allows you to define a free-form FormView control is similar to the DetailsView control, but allows you to define a free-form layout for each record.

The FormView control is like a DataList control for a single record.

You can continue to use the DataGrid control, although it is superseded by the GridView control. Existing pages that use the DataGrid control work as is. As with other data controls, the DataGrid control has been enhanced to interact with data source controls.

Two-Way Data Binding

The combination of data source controls, declarative parameters, and enhanced data controls provides the ability to create two-way data binding without having to write code. In data source controls, you can define queries or method names to use for updates. Data controls, such as the GridView, DetailsView, and FormView controls, support edit and delete modes (and for some controls, insert mode) that can automatically interact with the data source controls to write data to the data source.

Connection String Storage

To help make your Web sites more maintainable and more secure, you can keep connection strings in the Web.config file in a new section that has been designed specifically for connection string storage. When you use the Visual Web Developer Web development tool to create or configure data source controls, you can specify that the connection string be stored in the Web.config file. If you change data sources, you can easily change the connection string in one location rather than having to update all data components on all pages with a new connection string. For added security, you can encrypt the connection string section of the Web.config file. For details, see Encrypting Configuration Information Using Protected Configuration.

Two-Tier and Three-Tier Data Access

The earlier data binding model encouraged the creation of two-tier data solutions, in which the Web pages interacted directly with the database to fill a dataset and to bind controls to it. The new model continues to make it easy to work in a two-tier structure. For example, the SqlDataSource control connects directly to a database and executes SQL statements or stored procedures to read and write data.

The new data binding model also makes it much easier to create a three-tier structure in which data access is handled by a middle-tier business object. The ObjectDataSource control interacts with a business object by calling methods on the object to retrieve and update data. Data controls on the page can bind to the ObjectDataSource control as they do to other data source controls, such as the SqlDataSource control.

The Visual Web Developer Web development tool includes a data component wizard that helps you create a custom object that contains methods to read and update data. Alternatively, you can create your own middle-tier object that contains methods. As long as your custom object exposes methods with the appropriate signatures, you can reference it from an ObjectDataSource control. For details, see Walkthrough: Data Binding to a Custom Business Object.

Backward Compatibility for Data Access

The Visual Web Developer Web development tool continues to support pages that use the data binding model from previous versions. Pages that contain datasets and other components run as they did before, and you can open them and edit the pages in the Web page designer. Visual Web Developer does not remove the data components and does not convert the components to data source controls.

Data components, such as datasets and data connections, are not displayed in the Web page designer in Visual Web Develop er. Therefore, you can neither set nor examine their properties by using the Properties window. However, you can still edit th e code that is used to instantiate the data components and set their properties.

For more information, see Data Source Controls Overview and Walkthrough: Basic Data Access in Web Pages.

Converting Existing Web Sites

Visual Web Developer can automatically convert your existing projects to the new streamlined Web site layout. The conversion process preserves the functionality of your application and the project options that apply. Existing code-behind Web pages are converted to a new code-behind model that preserves the separation of HTML and code, but provides a simplified structure. For more information, see Web Project Conversion from Visual Studio .NET.

After conversion, you can use the Web page designer to work with pages and controls that were developed with previous versions of Visual Web Developer.

Web Application Projects

The new Web application project model provides the same Web project semantics as the Visual Studio .NET 2003 Web project model. This includes a structure based on project files and a build model based on compiling all the code for a project into a single assembly. In addition, the new project type supports many of the new features of Visual Studio 2005 (such as class diagrams, test development, and generics) and of ASP.NET 2.0 (such as master pages, data controls, membership and logon, role management, Web parts, personalization, site navigation, and themes).

For more information about Web application projects, see Web Application Projects Overview.

See Also

Concepts

What's New in Visual Studio 2005 Web Application Projects Overview

Other Resources

Guided Tour of Creating Web Sites in Visual Web Developer

Visual Web Developer

Community Resources for Visual Web Developer

Community is a vital part of working with Visual Web Developer. The ASP.NET and Visual Web Developer communities offer news, information, support, and tools that help you create Web sites of your own.

This topic lists community resources that can help you work effectively with Visual Web Developer.

Site

Description

The official ASP.NET site. Includes news, tutorials, support, starter kits, and many tools for download.

The MSDN site for ASP.NET development, a central location that brings together content from many different sources. Includes articles, downloads, and blog feeds.

The support forums on the ASP.NET site, visited every day by thousands of knowledgeabl e users. The site includes forums for many different aspects of ASP.NET and Visual Web Developer, and offer assistance to both new and experienced users.

See Also

Concepts

Introduction to Visual Web Developer

Visual Web Developer

Guided Tour of Creating Web Sites in Visual Web Developer

This section contains topics designed to give a guided tour of creating Web sites in Visual Studio.

In This Section

Creating Pages

Describes how to create new ASP.NET Web sites and add ASP.NET Web pages to them. Includes information on editing HTML, creating server code, and debugging.

Data-Driven Web Pages

Describes various ways to display and edit data in ASP.NET Web pages and explains how to optimize data access by using caching.

Additional Page Techniques

Describes how to create specific types of ASP.NET Web pages, including master pages, Web Parts pages, and wizards. Also includes information on creating reusable elements (user controls).

Customizing Web Pages

Describes how to add menus, define themes for consistent Web site appearance, create rotating advertisements, create pages for browsers on mobile devices, create and use an ASP.NET Web service, and create pages that can display text in different languages.

Building Professional Web Sites (Visual Studio), Building Professional Web Sites (Visual Web Developer Express Edition)

Describes how to use system diagnostics with ASP.NET Web pages and describes ways to deploy a Web site to a production Web server.

Visual Web Developer

Creating Pages

The topics in this section include step-by-step walkthroughs that illustrate how to create new ASP.NET Web sites and add ASP.NET Web pages to them. Additional walkthroughs illustrate how to edit HTML, create server code, and debug Web pages.

In This Section

Walkthrough: Creating a Basic Web Page in Visual Web Developer Walkthrough: Creating a Basic Web Page with Code Separation in Visual Web Developer Walkthrough: Basic HTML Editing in Visual Web Developer Walkthrough: Working with Cascading Style Sheet Styles in Visual Web Developer Walkthrough: Advanced HTML Editing in Visual Web Developer Walkthrough: Code Editing in Web Pages in Visual Web Developer Walkthrough: Debugging Web Pages in Visual Web Developer Walkthrough: Creating a Local IIS Web Site in Visual Web Developer Walkthrough: Editing Web Sites with FTP in Visual Web Developer Walkthrough: Using Shared Code in Web Sites in Visual Web Developer

Related Sections

Guided Tour of Creating Web Sites in Visual Web Developer

Introduces topics that give a guided tour of creating Web sites in Visual Web Developer.

Visual Web Developer

Walkthrough: Creating a Basic Web Page in Visual Web Developer

This walkthrough provides you with an introduction to Microsoft Visual Web Developer. It guides you through creating a simple page by using Visual Web Developer, illustrating the basic techniques of creating a new page, adding controls, and writing code.

Tasks illustrated in this walkthrough include:

Creating a file system Web site.writing code. Tasks illustrated in this walkthrough include: Familiarizing yourself with Visual Web Developer. Creating a

Familiarizing yourself with Visual Web Developer.this walkthrough include: Creating a file system Web site. Creating a single-file ASP.NET page in Visual

Creating a single-file ASP.NET page in Visual Web Developer.Web site. Familiarizing yourself with Visual Web Developer. Adding controls. Adding event handlers. Running pages with

Adding controls.Creating a single-file ASP.NET page in Visual Web Developer. Adding event handlers. Running pages with the

Adding event handlers.ASP.NET page in Visual Web Developer. Adding controls. Running pages with the Web Servers in Visual

Running pages with the Web Servers in Visual Web Developer . Web Servers in Visual Web Developer.

Prerequisites

In order to complete this walkthrough, you will need:

Visual Web DeveloperIn order to complete this walkthrough, you will need: The .NET Framework Creating a Web Site

The .NET Frameworkthis walkthrough, you will need: Visual Web Developer Creating a Web Site and Page In this

Creating a Web Site and Page

In this part of the walkthrough, you will create a Web site and add a new page to it. You will also add HTML text and run the page in your Web browser.

For this walkthrough, you will create a file system Web site that does not require that you work with Microsoft Internet Information Services (IIS). Instead, you will create and run your page in the local file system.

A file system Web site is one that stores pages and other files in a folder that you choose somewhere on your local computer.

Other Web site options include a local IIS Web site, which stores your files in a subfolder of the local IIS root (typically, \Inetpub\Wwwroot\). An FTP site stores files on a remote server that you gain access to across the Internet by using File Transfer Protocol (FTP). A remote site stores files on a remote server that you can access across a local network. For more information, see Walkthrough: Editing Web Sites with FTP in Visual Web Developer. Also, Web site files can be stored in a source control system such as Visual SourceSafe. For more information, see Introducing Source Control.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, click New Web Site.

The New Web Site dialog box appears, as shown in the following screen shot.

New Web Site dialog box

3. Under Visual Studio installed templates , click ASP.NET Web Site . When you create

3. Under Visual Studio installed templates, click ASP.NET Web Site.

When you create a Web site, you specify a template. Each template creates a Web application that contains different files and folders. In this walkthrough, you are creating a Web site based on the ASP.NET Web Site template, which creates some folders and a few default files.

4. In the Location box, select the File System box, and then enter the name of the folder where you want to keep the pages of your Web site.

For example, type the folder name C:\BasicWebSite.

5. In the Language list, click Visual Basic or Visual C#.

The programming language you choose will be the default for your Web site. However, you can use multiple languages in the same Web application by creating pages and components in different programming languages.

6. Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx. When a new page is created, by default Visual Web Developer displays the page in Source view, where you can see the page's HTML elements. The following screen shot shows the Source view of a default Web page.

Source view of default page

A Tour of Visual Web Developer Before you proceed with working on the page, it

A Tour of Visual Web Developer

Before you proceed with working on the page, it is useful to familiarize yourself with the Visual Web Developer development environment. The following illustration shows you the windows and tools that are available in Visual Web Developer.

Diagram of Visual Web Developer environment

Web Developer. Diagram of Visual Web Developer environment To familiarize yourself with the Web designer in

To familiarize yourself with the Web designer in Visual Web Developer

yourself with the Web designer in Visual Web Developer Examine the preceding illustration and match the

Examine the preceding illustration and match the text to the following list, which describes the most commonly used windows and tools. (Not all windows and tools that you see are listed here, only those marked in the preceding illustration.)

Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in Design view.here, only those marked in the preceding illustration.) Solution Explorer . Displays the files and folders

Solution Explorer . Displays the files and folders in your Web site. Solution Explorer. Displays the files and folders in your Web site.

Document window. Displays the documents you are working on in tabbed windows. You can switch between documents by clicking tabs.Explorer . Displays the files and folders in your Web site. Properties window. Allows you to

Properties window. Allows you to change settings for the page, HTML elements, controls, and other objects.windows. You can switch between documents by clicking tabs. View tabs. Present you with different views

View tabs. Present you with different views of the same document. Design view is a near-WYSIWYG editing surface. Source view is the HTML editor for the page. You will work with these views later in this walkthrough. If you prefer to open Web pages in Design view, on the Tools menu, click Options , select the HTML Designer node, and change the Start Pages Tools menu, click Options, select the HTML Designer node, and change the Start Pages In option.

Toolbox . Provides controls and HTML elements that you can drag onto your page. Toolbox Toolbox. Provides controls and HTML elements that you can drag onto your page. Toolbox elements are grouped

by common function. Server Explorer/Database Explorer . Displays database connections. If Server Explorer is not

by common function.

Server Explorer/Database Explorer. Displays database connections. If Server Explorer is not visible in Visual Web Developer, on the View menu, click Other Windows, and then click Server Explorer.

Note

Note

You can rearrange and resize the windows to suit your preferences. The View menu allows you to display addit ional windows.

Creating a New Web Forms Page

When you create a new Web site, Visual Web Developer adds an ASP.NET page (Web Forms page) named Default.aspx. You can use the Default.aspx page as the home page for your Web site. However, for this walkthrough, you will create and work with a new page.

To add a page to the Web site

1. Close the Default.aspx page. To do this, right-click the tab containing the file name and select Close.

2. In Solution Explorer, right-click the Web site (for example, C:\BasicWebSite), and then click Add New Item.

3. Under Visual Studio installed templates, click Web Form.

4. In the Name box, type FirstWebPage.

5. In the Language list, choose the programming language you prefer to use (Visual Basic, C#, or J#).

When you created the Web site, you specified a default language. However, each time you create a new page or component for your Web site, you can change the language from the default. You can use different programming languages in the same Web site.

6. Clear the Place code in separate file check box. The following screen shot shows the Add New Item dialog box.

Add New Item dialog box

shows the Add New Item dialog box. Add New Item dialog box In this walkthrough, you

In this walkthrough, you are creating a single-file page with the code and HTML in the same page. The code for ASP.NET pages can be located either in the page or in a separate class file. To learn more about keeping the code in a separate file, see Walkthrough: Creating a Basic Web Page with Code Separation in Visual Web Developer.

7. Click Add.

Visual Web Developer creates the new page and opens it in Source view.

Adding HTML to the Page

In this part of the walkthrough, you will add some static text to the page.

To add text to the page

1. At the bottom of the document window, click the Design tab to switch to Design view.

Design view displays the page that you are working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank.

2. On the page, type Welcome to Visual Web Developer.

The following screen shot shows the text you typed in Design view.

Welcome text as seen in Design view

typed in Design view. Welcome text as seen in Design view 3. Switch to Source view.

3. Switch to Source view.

You can see the HTML that you created by typing in Design view, as shown in the following screen shot.

Welcome text as seen in Source view

following screen shot. Welcome text as seen in Source view Running the Page Before you proceed

Running the Page

Before you proceed with adding controls to the page, you can try running it. To run a page, you need a Web server. In a production Web site, you use IIS as your Web server. However, to test a page, you can use the ASP.NET Development Server, which runs locally and does not require IIS. For file system Web sites, the default Web server in Visual Web Developer is the

ASP.NET Development Server.

To run the page

1. Press CTRL+F5 to run the page.

Visual Web Developer starts the ASP.NET Development Server. An icon appears on the toolbar to indicate that the Visual Web Developer Web server is running, as shown in the following screen shot.

Visual Web Developer Web server icon

following screen shot. Visual Web Developer Web server icon The page is displayed in the browser.

The page is displayed in the browser. Although the page you created has an extension of .aspx, it currently runs like any HTML page.

Note

Note

If

the browser displays a 502 error or an error indicating that the page cannot be displayed, you might need to configur

your browser to bypass proxy servers for local requests. For details, see How to: Bypass a Proxy Server for Local Web Requests.

e

2. Close the browser.

Adding and Programming Controls

In this part of the walkthrough, you will add a Button, a TextBox, and a Label control to the page and write code to handle the Click event for the Button control.

You will now add server controls to the page. Server controls, which include buttons, labels, text boxes, and other familiar controls, provide typical form-processing capabilities for your ASP.NET Web pages. However, you can program the controls with code that runs on the server, not the client.

To add controls to the page

1. Click the Design tab to switch to Design view.

2. Press SHIFT+ENTER a few times to make some room.

3. the Toolbox, from the Standard group, drag three controls onto the page: a TextBox control, a Button control, and a Label control.

4. Put the insertion point above the TextBox control, and then type Enter your name:.

This static HTML text is the caption for the TextBox control. You can mix static HTML and server controls on the same page. The following screen shot shows how the three controls appear in Design view.

In

Controls in Design View

screen shot shows how the three controls appear in Design view. In Controls in Design View

Setting Control Properties

Visual Web Developer offers you various ways to set the properties of controls on the page. In this part of the walkthrough, you will set properties in both Design view and Source view.

To set control properties

1. Select the Button control, and then in the Properties window, set Text to Display Name, as shown in the following screen shot.

Changed Button control text

in the following screen shot. Changed Button control text 2. Switch to Source view. Source view

2. Switch to Source view.

Source view displays the HTML for the page, including the elements that Visual Web Developer has created for the server controls. Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute runat="server".

Control properties are declared as attributes. For example, when you set the Text property for the Button control, in step

1, you were actually setting the Text attribute in the control's markup.

Note that all the controls are inside a <form> element, which also has the attribute runat="server". The runat="server" attribute and the asp: prefix for control tags mark the controls so that they are processed by ASP.NET on the server side when the page runs. Code outside of <form runat="server"> and <script runat="server"> elements is interpreted by the browser as client-side code, which is why the ASP.NET code must be inside.

3. Put the insertion point in a space within the <asp:label> tag, and then press SPACEBAR.

A drop-down list appears that displays the list of properties you can set for a Label control. This feature, referred to as IntelliSense, helps you in Source view with the syntax of server controls, HTML elements, and other items on the page. The following screen shot shows the IntelliSense drop-down list for the Label control.

IntelliSense for Label control

list for the Label control. IntelliSense for Label control 4. Select ForeColor and then type an

4. Select ForeColor and then type an equal sign (=). IntelliSense displays a list of colors.

Note

Note

You can display an IntelliSense drop-down list at any time by pressing CTRL+J.

5. Select a color for the Label control's text.

The ForeColor attribute is completed with the color that you have selected.

Programming the Button Control

For this walkthrough, you will write code that reads the name that the user enters into the text box and then displays the name in the Label control.

To add a default button event handler

1. Switch to Design view.

2. Double-click the Button control.

Visual Web Developer switches to Source view and creates a skeleton event handler for the Button control's default event, the Click event.

Note

Note

Double-clicking a control in Design view is just one of several ways you can create event handlers.

3. Inside the handler, type the following:

Label1.

Visual Web Developer displays a list of available members for the Label control, as shown in the following screen shot.

Available Label control members

the following screen shot. Available Label control members 4. Finish the Click event handler for the

4. Finish the Click event handler for the button so that it reads as shown in the following code example.

VB

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!" End Sub

C#

protected void Button1_Click(object sender, System.EventArgs e)

{

Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";

}

Event handler methods can have any name; the name you see is the default name created by Visual Web Developer. The important point is that the name used for the OnClick attribute must match the name of a method in the page.

Note

Note

If you are using Visual Basic with code separation, Visual Web Developer does not add an explicit OnClick attribute. Ins tead, the event is bound to the handler method using a Handles keyword on the handler declaration itself.

Running the Page

You can now test the server controls on the page.

To run the page

1. Press CTRL+F5 to run the page in the browser.

The page again runs using the ASP.NET Development Server.

2. Enter a name into the text box and click the button.

The name you entered is displayed in the Label control. Note that when you click the button, the page is posted to the Web server. ASP.NET then recreates the page, runs your code (in this case, the Button control's Click event handler runs), and then sends the new page to the browser. If you watch the status bar in the browser, you can see that the page is making a round trip to the Web server each time you click the button.

3. In the browser, view the source of the page you are running.

In the page source code, you see only ordinary HTML; you do not see the <asp:> elements that you were working with in Source view. When the page runs, ASP.NET processes the server controls and renders HTML elements to the page that perform the functions that represent the control. For example, the <asp:Button> control is rendered as the HTML element <input type="submit">.

4. Close the browser.

Working with Additional Controls

In this part of the walkthrough, you will work with the Calendar control, which displays dates a month at a time. The Calendar control is a more complex control than the button, text box, and label you have been working with and illustrates some further capabilities of server controls.

In this section, you will add a Calendar control to the page and format it.

To add a Calendar control

1. In Visual Web Developer, switch to Design view.

2. From the Standard section of the Toolbox, drag a Calendar control onto the page:

The calendar's smart tag panel is displayed. The panel displays commands that make it easy for you to perform the most common tasks for the selected control. The following screen shot shows the Calendar control as rendered in the Design view.

Calendar control in Design view

3. In the smart tag panel, choose Auto Format . The Auto Format dialog box

3. In the smart tag panel, choose Auto Format.

The Auto Format dialog box is displayed, which allows you to select a formatting scheme for the calendar. The following screen shot shows the Auto Format dialog box for the Calendar control.

Auto Format dialog box for the Calendar control

control. Auto Format dialog box for the Calendar control 4. From the Select a scheme list,

4. From the Select a scheme list, select Simple and then click OK.

5. Switch to Source view.

You can see the <asp:Calendar> element. This element is much longer than the elements for the simple controls you created earlier. It also includes subelements, such as <WeekEndDayStyle>, which represent various formatting settings. The following screen shot shows the Calendar control in Source view.

Calendar control in Source view

Programming the Calendar Control In this section, you will program the Calendar control to display

Programming the Calendar Control

In this section, you will program the Calendar control to display the currently selected date.

To program the Calendar control

1. From the left-hand drop-down list at the top of Source view, select Calendar1.

The drop-down list displays a list of all the objects you can write code for.

2. From the right-hand drop-down list, select SelectionChanged.

Visual Web Developer creates a skeleton event handler for the Calendar control's SelectionChanged event.

You have now seen two ways to create an event handler for a control. The first was to double-click the control in Design view. The second is to use the drop-down lists in Source view to select an object and the event to write code for.

3. Finish the SelectionChanged event handler with the following highlighted code.

VB

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.Eve ntArgs) Label1.Text = Calendar1.SelectedDate.ToString() End Sub

C#

protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)

{

Label1.Text = Calendar1.SelectedDate.ToString();

}

Running the Page

You can now test the calendar.

To run the page

1. Press CTRL+F5 to run the page in the browser.

2. Click a date in the calendar.

The date you clicked is displayed in the Label control.

3.

In the browser, view the source code for the page.

Note that the Calendar control has been rendered to the page as a table, with each day as a <td> element containing an <a> element.

4. Close the browser.

Next Steps

This walkthrough has illustrated the basic features of the Visual Web Developer page designer. Now that you understand how to create and edit a Web page in Visual Web Developer, you might want to explore other features. For example, you might want to:

Learn more about how to edit HTML in Visual Web Developer. For details, see Walkthrough: Basic HTML Editing in Visual Web Developer . Walkthrough: Basic HTML Editing in Visual Web Developer.

Add data access to Web pages. For details, see Walkthrough: Basic Data Access in Web Pages . Walkthrough: Basic Data Access in Web Pages.

Learn about the debugger for Web pages. For details, see Walkthrough: Debugging Web Pages in Visual Web Developer . Walkthrough: Debugging Web Pages in Visual Web Developer.

Create Web pages that are specifically designed for mobile phones and other devices. For details, see Walkthrough: Creating Web Pages for Mobile Devices . Walkthrough: Creating Web Pages for Mobile Devices.

Create a consistent site layout using master pages. For details, see Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer . Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer.

Add navigation to your site so users can easily move between pages. For details, see Walkthrough: Adding Site Navigation to a Web Site . Walkthrough: Adding Site Navigation to a Web Site.

See Also

Tasks

Walkthrough: Creating a Local IIS Web Site in Visual Web Developer Walkthrough: Editing Web Sites with FTP in Visual Web Developer

Concepts

Introduction to Visual Web Developer

Other Resources

Welcome

Visual Web Developer

Walkthrough: Creating a Basic Web Page with Code Separation in Visual Web Developer

When you create ASP.NET Web pages and write code in them, you can choose from two models for how to manage the visible elements (controls, text) and your programming code. In the single-file model, the visible elements and code are kept together in the same file. In the alternative model, called "code separation," the visible elements are in one file and the code is in another file, referred to as the "code-behind" file. This walkthrough introduces you to Web pages that use code separation.

The single-file model is introduced in Walkthrough: Creating a Basic Web Page in Visual Web Developer. The walkthrough you are reading now shows you how to create a Web page with the same functionality as the page in the single-file walkthrough, but with a focus on using code separation.

The choice between using single-file pages and pages with code separation is primarily one of convenience and personal preference. Working with both models in Microsoft Visual Web Developer is similar; both models have approximately equal support in the editor. Both models have equivalent performance when the page runs. The page with code separation makes it more practical to let a Web designer work on the layout of a page while a programmer creates the code for the page, because the two pages can be edited separately. For more information on the differences between these models, see ASP.NET Web Page Code Model.

Tasks illustrated in this walkthrough include:

Using Visual Web Developer to create an ASP.NET page with code separation.Code Model . Tasks illustrated in this walkthrough include: Adding controls. Adding event handlers. Running pages

Adding controls.Developer to create an ASP.NET page with code separation. Adding event handlers. Running pages with the

Adding event handlers.an ASP.NET page with code separation. Adding controls. Running pages with the ASP.NET Development Server.

Running pages with the ASP.NET Development Server.code separation. Adding controls. Adding event handlers. Prerequisites In order to complete this walkthrough, you

Prerequisites

In order to complete this walkthrough, you will need:

Visual Web Developer and the .NET Framework.In order to complete this walkthrough, you will need: Creating a Web Site and Page In

Creating a Web Site and Page

In this part of the walkthrough, you will create a Web site and add a new page to it. You will also add HTML text and run the page in your Web browser.

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and skip to "Creating a New Page" later in this walkthrough. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, click New Web Site.

The New Web Site dialog box appears.

3. Under Visual Studio installed templates, click ASP.NET Web Site.

4. In the Location box, select File System and enter the name of the folder where you want to keep the pages of your Web site.

For example, type the folder name C:\BasicWebSite.

5. In the Language list, click Visual Basic or Visual C#.

Note

Note

Visual Web Developer currently does not support creating code-behind pages in Visual J#.

The programming language you choose will be the default for your Web site, but you can set the programming language

for each page individually.

6. Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Creating a New Page

When you create a new Web site, Visual Web Developer adds a page named Default.aspx. By default, Visual Web Developer creates a page with code separation.

To add a page with code separation to the Web site

1. Close the Default.aspx page. To do this, right-click the tab with the file name in it and select Close.

2. In Solution Explorer, right-click the Web site (for example, C:\WebSites) and choose Add New Item.

3. Under Visual Studio installed templates, choose Web Form.

4. In the Name box, type WebPageSeparated.

5. From the Language list, choose the programming language you prefer to use (Visual Basic or C#).

6. Verify that the Place code in separate file check box is selected.

By default, this check box is selected.

7. Click Add.

Visual Web Developer creates two files. The first file, WebPageSeparated.aspx, will contain the page's text and controls, and is opened in the editor. A second file, WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs (depending on what programming language you selected), is the code file. You can see both files in Solution Explorer by clicking the plus sign (+) next to the WebPageSeparated.aspx file; the code file has been created but is not open. You will open it later in the walkthrough when you write code.

Adding HTML to the Page

In this part of the walkthrough, you will add some static HTML text to the WebPageSeparated.aspx page.

To add text to the page

1. Click the Design tab at the bottom of the document window to switch to Design view.

Design view displays the page you are working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank.

2. Type the words Welcome to Visual Web Developer Using Code Separation.

3. Switch to Source view.

You can see the HTML that you created by typing in Design view. At this stage, the page looks like an ordinary HTML page. The only difference is in the <%@ page %> directive at the top of the page.

Adding and Programming Controls

In this part of the walkthrough, you will add a button, text box, and label control to the page and write code to handle the button's Click event. Server controls, which include buttons, labels, text boxes, and other familiar controls, provide typical form- processing capabilities for your ASP.NET Web pages. However, you can program the controls with code that runs on the server, not the client.

To add controls to the page

1. Click the Design tab to switch to Design view.

2. Press ENTER a few times to make some room.

3. From the Standard group in the Toolbox, drag three controls onto the page: a TextBox control, a Button control, and a Label control.

This static HTML text is the caption for the TextBox control. You can mix static HTML and server controls on the same page.

Setting Control Properties

Visual Web Developer offers you various ways to set the properties of controls on the page. In this part of the walkthrough, you will work with properties in both Design view and Source view.

To set control properties

1. Select the Button control and, in the Properties window, set its Text property to Display Name.

2. Switch to Source view.

Source view displays the HTML for the page, including the elements that Visual Web Developer has created for the server controls. Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute runat="server".

Control properties are declared as attributes. For example, when you set the button's Text property in Step 1, you were actually setting the Text attribute in the control's markup.

Note that all the controls are inside a <form> element that also has the attribute runat="server". The runat="server" attribute and the asp: prefix for control tags mark the controls so that they are processed by ASP.NET when the page runs.

Programming the Button Control

For this walkthrough, you will write code that reads the name that the user enters in the text box and then displays it in the Label control.

To add a default button event handler

1. Switch to Design view

2. Double-click the Button control.

Visual Web Developer opens the WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs file in a separate window in the editor. The file contains a skeleton Click event handler for the button.

3. Complete the Click event handler by adding the following highlighted code.

VB

Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"

End Sub

C#

protected void Button1_Click(object sender, System.EventArgs e)

{

Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";

}

Notice that as you type, IntelliSense helps you with context-sensitive choices. This is identical to the behavior when you are coding in a single-file page.

Examining the Page and Code File

You now have two files that make up the complete WebPageSeparated page: WebPageSeparated.aspx and WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs. In this section of the walkthrough, you will examine how these files are structured and how they relate to each other.

To examine the page and code file

2.

Switch to Source view.

At the top of the page is an @ page directive that binds this page to the code file. The directive looks like the following

code.

VB

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inh erits="WebPageSeparated" %>

C#

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inhe rits="WebPageSeparated" %>

(The line does not wrap in the editor, and the language attribute and file name extensions will match the programming language you selected.)

When the page runs, ASP.NET dynamically creates an instance of a class representing the page. The Inherits attribute identifies the class defined in the code-behind file from which the .aspx page is derived. By default, Visual Web Developer uses the page name as the basis for the class name in the code-behind file.

The CodeFile attribute identifies the code file for this page. In simple terms, the code-behind file contains the event- handling code for your page.

3. Click the WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs tab to switch to the code file.

The code file contains code that is similar to a class definition. However, it is not a complete class definition; instead, it is a "partial class" that contains only a portion of the complete class that will make up the page. Specifically, the partial class defined in the code file contains the event handlers and other custom code that you write. At run time, ASP.NET generates another partial class containing your user code. This complete class is then used as the base class that is used

to render the page. For more information, see ASP.NET Page Class Overview.

Note

Note

If

you are familiar with the code-behind model used in Microsoft Visual Studio .NET 2003, you will notice that in the ne

w

model, the code-behind class does not contain any generated code beyond the class definition itself. For example, th

e

class does not contain instance variables for controls on the page. This type of generated code is no longer required.

Running the Page

You can now test the page.

To run the page

1.

Press CTRL+F5 to run the page in the browser.

The page runs using the ASP.NET Development Server.

Note

Note

If

the browser displays a 502 error or an error indicating that the page cannot be displayed, you might need to configur

your browser to bypass proxy servers for local requests. For details, see How to: Bypass a Proxy Server for Local Web Requests.

e

2.

Enter a name in the text box and click the button.

The name you entered is displayed in the Label control.

3.

In

the browser, view the source of the page you are running.

4.

Close the browser.

The page works exactly the same as it would if it were a single-file page. (If you followed the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer to create a single-file page, you can compare the two

pages to see that they are the same when running.)

Next Steps

This walkthrough has illustrated how to create and edit a Web page that uses code separation. From the perspective of creating and running the page, there is not a significant difference between a single-file page and a page with code separation.

You might want to explore other features. For example, you might want to:

Create different types of Web sites. In addition to creating a file-system Web site as you did in this walkthrough, you can work with Web sites using Microsoft Internet Information Services (IIS), SharePoint, and FTP. For details, see Types of Web Sites in Visual Web Developer . Types of Web Sites in Visual Web Developer.

Learn more about how to edit HTML in Visual Web Developer. For details, see Walkthrough: Basic HTML Editing in Visual Web Developer . Walkthrough: Basic HTML Editing in Visual Web Developer.

Add data access to Web pages. For details, see Walkthrough: Basic Data Access in Web Pages . Walkthrough: Basic Data Access in Web Pages.

Learn about the debugger for Web pages. For details, see Walkthrough: Debugging Web Pages in Visual Web Developer . Walkthrough: Debugging Web Pages in Visual Web Developer.

Create a consistent site layout using master pages. For details, see Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer . Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer.

See Also

Tasks

Walkthrough: Creating a Basic Web Page in Visual Web Developer

Concepts

Types of Web Sites in Visual Web Developer

Visual Web Developer

Walkthrough: Basic HTML Editing in Visual Web Developer

The Microsoft Visual Web Developer Web development tool provides a rich HTML editing experience that lets you work in WYSIWYG mode for visualizing Web pages and also lets you work directly with HTML markup for finer control. This walkthrough introduces you to the HTML editing features of Visual Web Developer.

Tasks illustrated in this walkthrough include the following:

Creating and editing HTML in Design view.Tasks illustrated in this walkthrough include the following: Creating and editing HTML in Source view. Using

Creating and editing HTML in Source view.the following: Creating and editing HTML in Design view. Using navigation tools to move quickly through

Using navigation tools to move quickly through your HTML tags.in Design view. Creating and editing HTML in Source view. Prerequisites In order to complete this

Prerequisites

In order to complete this walkthrough, you will need the following:

A general understanding of Visual Web Developer.to complete this walkthrough, you will need the following: For an introduction to creating Web pages

For an introduction to creating Web pages in Visual Web Developer, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

In this walkthrough, you will work with a Web site and a single ASP.NET Web page that is similar to the one that is created in Walkthrough: Creating a Basic Web Page in Visual Web Developer. If you have completed that walkthrough, you can use that Web site and page.

Creating the Web Site and Page

If you have already created a Web site in Visual Web Developer (for example, by completing Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, click New Web Site.

The New Web Site dialog box appears.

3. Under Visual Studio installed templates, click ASP.NET Web Site.

4. In the Location box, enter the name of the folder where you want to keep the pages of the Web site.

For example, type the folder name C:\WebSites.

5. In the Language list, click the programming language that you prefer to work in.

6. Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Working in Design View

In this part of the walkthrough, you will learn how to work in Design view, which provides a WYSIWYG-like view of the page. You can add text by typing, as you would in a word processing program. You can format text directly with formatting commands or by creating in-line styles.

Design view displays your page in a way that is similar to how it will appear in a browser, with some differences. The first difference is that in Design view, the text and elements are editable. The second difference is that to help you edit your pages, Design view displays some elements and controls that will not appear in the browser. Additionally, some elements, such as HTML tables, have a special Design view rendering that adds additional space for the editor. Overall, Design view helps you visualize your page, but it is not an exact representation of how the page will render in a browser.

To add and format static HTML in Design view

2.

At the top of the page, type ASP.NET Web Page.

3.

Highlight the text to format to select it, and then on the Format toolbar, in the left-most list, click Heading 1.

4.

Position the insertion pointer below ASP.NET Web Page, and then type This page is powered by ASP.NET.

5.

Right-click This page is powered by ASP.NET., and then click Style.

The Style Builder dialog box appears.

6.

Click Font, and then in Family, click the ellipsis (…) button.

The Font Picker dialog box appears.

7.

Under Installed fonts, click Verdana, and then click the add (>>) button.

8.

Click OK to close the Font Picker dialog box.

9.

Click Text, and then in the Horizontal list, click Centered.

10.

Click OK.

Viewing Tag Information

When you are working in Design view, you might find it useful to see the design surface tags, such as div and span, and others that do not have a visual rendering.

To see HTML design surface tags in Design view

rendering. To see HTML design surface tags in Design view On the View menu, click Details

On the View menu, click Details.

The designer displays symbols for paragraphs, line breaks, and other tags that do not render text.

Adding Controls and Elements

In Design view, you can drag controls from the Toolbox onto the page. You can add some elements, such as HTML tables, using a dialog box. In this section, you will add some controls and a table so that you have elements to work with later in the walkthrough.

To add controls and a table

1. Position the insertion pointer to the right of the closing paragraph mark for This page is powered by ASP.NET., and then press ENTER.

2. From the Standard group in the Toolbox, drag a TextBox control onto the page.

Note

Note

You can also add a control by double-clicking it.

3. Drag a Button control onto the page.

The TextBox and Button controls are ASP.NET Web server controls, not HTML elements.

4. On the Layout menu, click Insert Table.

The Insert Table dialog box appears.

5. Click OK.

The Insert Table dialog box provides options for configuring the table that you are creating. However, for this walkthrough, you can use a default table layout.

Creating Hyperlinks

Design view provides builders and other tools to help you create HTML elements that require property settings.

To create a hyperlink

2.

On the Format menu, click Convert to Hyperlink.

The Hyperlink dialog box appears.

3. In the URL box, type http://www.asp.net.

4. Click OK.

Setting Properties in the Properties Window

You can change the look and behavior of the elements on the page by setting values in Properties.

To set properties by using the Properties window

1. Click the Button control that you added in "Adding Controls and Elements," earlier in this walkthrough.

2. In Properties, set Text to Click Here, ForeColor to a different color, and Bold to true.

3. Place the insertion point in the ASP.NET hyperlink that you created in the preceding section.

Notice that in Properties, the HRef property for the a element is set to the URL that you provided for the hyperlink.

Testing the Page

You can see the results of your editing by viewing the page in the browser.

To start the page in the browser externally

Right-click the page, and then click View in Browser . View in Browser.

Right-click the page, and then click View in Browser . If you are prompted to save

If you are prompted to save your changes, click Yes.

Visual Web Developer starts the Visual Web Developer Web server, which is a local Web server that you can use to test pages without using IIS.

Changing the Default View

By default, Visual Web Developer opens new pages in Source view.

To change the default page view to Design view

1. On the Tools menu, click Options

2. In the Options dialog box, click HTML Designer, and then under Start Pages in, click Design view.

Note

Note

You can run pages in several ways. If you press CTRL+F5, Visual Web Developer performs the start action that is configured on the property page for Start Options. The default start option for CTRL+F5 is to run the current page; that is, the page that is currently active in Source or Design view. You can also run pages in the debugger. For more information, see Walkthrough: Debugging Web Pages in Visual Web Developer.

Walkthrough: Debugging Web Pages in Visual Web Developer . Working in Source View Source view lets

Working in Source View

Source view lets you edit the markup of the page directly. The Source view editor gives you many features that help you as you create HTML and ASP.NET controls. You can use the Toolbox in Source view just as you do in Design view to add new elements to the page.

To add elements in Source view

1. Switch to Source view by clicking Source, which is located at the lower left of the window.

The controls that you have added are created as <asp:> elements. For example, the Button control is the <asp:button> element. The property settings that you made are preserved as attribute settings in the <asp:button> tag.

The editor also helps you when you type markup manually. For example, the editor provides context sensitive choices finishing HTML tags and attributes as you type. The editor also provides error and warning information on markup by underlining questionable markup with a wavy line. The error or warning information is available by positioning the mouse over the markup text.

To edit HTML in Source view

1. Position the insertion point above the closing </form> tag, and then type a left angle bracket (<).

Notice that the editor offers you a list of tags that are appropriate in the current context.

2. Highlight a to select it, and then press the SPACEBAR.

The editor displays a list of attributes that are appropriate for an anchor tag.

3. In the list, click href, and then type an equal sign and a double quotation mark (=").

The editor offers you a list of currently available pages to link to and an option to open the Homepicker dialog box.

4. In file list, double-click Default.aspx, press the SPACEBAR, and then type a right angle bracket (>) to close the tag.

The editor inserts a closing </a> tag.

5. Finish the anchor element so that it links to the Default.aspx page using the link text Home and reads as follows:

<a href="Default.aspx">Home</a>

6. Position the insertion point in the a tag.

Notice that Properties displays the attributes for the tag.

7. In Properties, for the HRef property, click the ellipsis (…) button.

The Select Project Item dialog box appears.

Now, you can select a page in the current Web site as the target page. If you do not have other pages in the Web site to choose from, close the Select Project Item dialog box and type a favorite URL into the Href box of the Properties window.

8. Position the insertion point just above the closing </form> tag, and then type <invalid>.

The editor underlines the tag with a wavy line, indicating that the tag is not a recognized HTML tag.

9. Remove the tag that you created in the preceding step.

Examining HTML Formatting

An important feature of the page designer is that it preserves the HTML formatting that you apply to the page unless you explicitly specify that the editor reformat the document.

To examine HTML formatting

1. Reformat the attributes for the Button control by aligning the attributes so that the declarative syntax looks like the following:

<asp:Button

id="Button1"

runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here" />

Notice that after you indent the first attribute, if you press ENTER in the tag, subsequent lines are indented to match.

2. Switch to Design view.

4.

Position the insertion point below the new Button control, right-click, and then click Paste.

This creates a button with the ID of Button2.

5.

From the Standard group in the Toolbox, drag a third Button control onto the page, which creates <Button3>.

6.

Switch to Source view.

Notice that <Button2> is formatted exactly the way that you formatted <Button1>. On the other hand, <Button3> is formatted using the default formatting for asp:button elements.

Note

Note

For more information on how to customize the formatting of individual elements, see Walkthrough: Advanced HTML Editing in Visual Web Developer.

7.

Edit the document so that <Button1> and <Button2> are on the same line without a space between them:

 

<asp:Button ID="Button1" runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>

The elements can wrap, but the end of <Button1> (that is, />) must be followed immediately by the beginning of

<Button2> (that is <asp:Button ID=).

8.

Switch to Design view.

Notice that <Button1> and <Button2> are right next to each other without a space between them.

9.

Switch to Source view

10.

On the Edit menu, point to Advanced, and then click Format Document.

The document is reformatted, but <Button1> and <Button2> remain on the same line. If the editor were to separate the buttons, it would introduce a space during rendering. Therefore, the editor does not change the formatting that you have created.

Navigating Between Elements

As pages become larger and more complex, it is useful to be able to find tags quickly and to reduce the clutter in the page. Visual Web Developer provides the following tools to help you with these tasks when you are working in Source view:

Document Outline, which provides a complete view of the document.you with these tasks when you are working in Source view: Tag navigator, which provides information

Tag navigator, which provides information about the currently selected tag and where it is in the page hierarchy.Outline, which provides a complete view of the document. To start, add more elements to the

To start, add more elements to the page so that you will be able to examine navigation features.

To add elements

1. Switch to Design view.

2. From the HTML group in the Toolbox, drag a Table control into a cell of the table that you created in "Working in Source View," earlier in this walkthrough.

3. From the Standard group in the Toolbox, drag a Button control into the middle cell of the nested table.

With several nested elements on the page, you can see how Document Outline provides quick navigation to any tag in the page.

To navigate with Document Outline

1. Switch to Source view.

2. On the View menu, point to Other Windows, and then click Document Outline.

In the editor, the <Button4> control that you added in the preceding procedure is selected.

4. Right-click the <table> tag of the outer table, and then click Synchronize Document Outline.

The selection in Document Outline is moved to the outer table tag.

The tag navigator provides information about the currently selected tag and where it is in the page hierarchy.

To navigate with tag navigator

1. Position the insertion point in the <asp:button> tag.

Notice the tag navigator at the bottom of the window, which shows the <asp:button> tag and its parent tags. The tag navigator includes the ID of the element, if any, so that you can identify which element is being displayed. The tag navigator also displays the assigned cascading style sheet, if any, that was set with the Class attribute.

2. In the tag navigator, click the <table> tag that is closest to the <asp:button#Button4> tag.

The tag navigator moves to the inner <table> element and selects it.

3. In the tag navigator, click the <td> tag to the left of the selected <table>.

The whole cell that contains the nested table is selected.

Note

Note

You can click to select either the tag or its contents by using the drop-down list in the tag navigator tag. By default, click ing a tag in the tag navigator selects the tag and its contents.

You can also use the tag navigator to help you move or copy elements.

To move or copy elements using the tag navigator

1. Using the tag navigator, select the <tr> tag that contains <Button4>.

2. Press CTRL+C to copy the tag.

3. Use the tag navigator to move to the outer table.

4. In Source view, place the insertion pointer between the <table> tag and the first <tr> tag.

5. Press CTRL+V to paste the copied row into the table.

6. Switch to Design view.

Notice that the new row has been added, including a Button control.

Formatting Text

The Formatting toolbar applies inline styles for most settings. Bold and italic formatting is applied by Formatting toolbar applies inline styles for most settings. Bold and italic formatting is applied by using the b and i tags. Paragraph formatting is applied a block tag, such as p (for normal), pre (for formatted), and so on. Paragraph alignment is applied by using inline styles to conform with XHTML 1.1 standards.

The designer also lets you create a style block and a link to a cascading style sheet. For more information, see Walkthrough: style block and a link to a cascading style sheet. For more information, see Walkthrough: Working with Cascading Style Sheet Styles in Visual Web Developer.

By default, the editor creates markup that is compatible with the XHTML 1.1 standard and converts all HTML tag names to lowercase, even if you type them in uppercase. The editor also encloses attribute (property) values in quotation marks. For more information, see Walkthrough: Advanced HTML Editing in Visual Web Developer . Walkthrough: Advanced HTML Editing in Visual Web Developer.

To change the default markup validation

1. In Source view, right-click the page, and then click Formatting and Validation.

2. In the Options dialog box, expand Text Editor, expand HTML, and then click Validation.

Next Steps

This walkthrough has given you an overview of the HTML capabilities of the Web page editor. This includes how to create HTML in Design view and Source view, basic formatting, and navigation. You might want to learn more about the editing facilities in Visual Web Developer. For example, you might want to do the following:

Learn about the additional capabilities of the HTML editor, including custom formatting options, outlining, and HTML validation. For more information, see Walkthrough: Advanced HTML Editing in Visual Web Developer . Walkthrough: Advanced HTML Editing in Visual Web Developer.

Learn how to work with cascading style sheet styles. For more information, see Walkthrough: Working with Cascading Style Sheet Styles in Visual Web Developer . Walkthrough: Working with Cascading Style Sheet Styles in Visual Web Developer .

See Also

Tasks

Walkthrough: Advanced HTML Editing in Visual Web Developer

Reference

Source View

Concepts

Design View

Visual Web Developer

Walkthrough: Working with Cascading Style Sheet Styles in Visual Web Developer

The Visual Web Developer Web development tool gives you complete support for creating and applying styles to the text, elements, and controls on Web pages.

Tasks illustrated in this walkthrough include the following:

Setting inline styles for individual elements.Tasks illustrated in this walkthrough include the following: Creating a style block for a page. Creating

Creating a style block for a page. style block for a page.

Creating a cascading style sheet (.css file), and then applying the .css file to one or more pages in your site.individual elements. Creating a style block for a page. Changing style sheet references programmatically. Note

Changing style sheet references programmatically.applying the .css file to one or more pages in your site. Note In addition to

Note

Note

In addition to explicitly setting styles and style sheet references in a page, you can use ASP.NET themes to set the overal l appearance of the pages in your site. For more information, see ASP.NET Themes and Skins Overview.

Prerequisites

In order to complete this walkthrough, you will need the following:

Visual Web Developer and the .NET Framework.to complete this walkthrough, you will need the following: A general understanding of working in Microsoft

A general understanding of working in Microsoft Visual Studio.the following: Visual Web Developer and the .NET Framework. For an introduction to Visual Studio, see

For an introduction to Visual Studio, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

Creating the Web Site and Page

In the first part of the walkthrough, you will create a Web site and a page where you can work with styles.

If you have already created a Web site in Visual Studio by completing Walkthrough: Creating a Basic Web Page in Visual Web Developer, you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, click New Web Site.

The New Web Site dialog box appears.

3. In the Language list, click the programming language that you prefer to work in.

The programming language that you choose will be the default for the Web site, but you can set the programming language for each page individually.

4. Under Visual Studio installed templates, click ASP.NET Web Site.

5. In the right-most Location box, type the name of the folder where you want to keep the pages of the Web site.

For example, type the folder name C:\WebSites.

6. Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Adding Controls

The next step is to add some controls to the page. The code will be simple, but enough to let you add breakpoints later.

To add controls

1.

Switch to Design view.

2. From the Standard group in the Toolbox, drag the following controls onto the page and set their properties as shown.

 

a. Control

a. Properties

 

Label

ID: CaptionLabel

 

Text: (empty)

TextBox

ID: NumberTextbox

Text: (empty)

Button

ID: SquareButton

Text: Square

 

Label

ID: ResultLabel

 

Text: (empty)

Note

Note

For this walkthrough, the layout of the page is not important.

Setting Inline Styles

You set inline styles when you want to apply formatting to a single element on the page. Visual Web Developer gives you a rich editor for editing inline styles for elements on the page. In this section of the walkthrough, you will set styles in both Design view and Source view.

To set inline styles in Design view

1. Switch to Design view.

2. Right-click CaptionLabel, and then click Style.

The Style Builder dialog box appears.

The Style Builder helps you set style information by organizing style information into logical categories and offering you appropriate values and options for each style setting.

3. Click Font, click Family, and then click the ellipsis (

)

that is located to the right of the text box.

The Font Picker dialog box appears.

Under Installed fonts, click Arial, and then click add (>>).

Arial appears under Selected fonts.

4. Repeat the preceding step to add Times New Roman and Verdana to the list of selected fonts, and then click OK.

When you return to the Style Builder dialog box, the three font names are in the Family box. You have created the list of fonts that will be used to render the contents of the Label control in order of preference.

5. Under Size, click Specific, in the box, type 1.2, and then in the list, enter em.

By setting the size to 1.2 ems, you are indicating that the text will appear 1.2 times larger than the current font size setting in the user's browser. At the bottom of the dialog box, you can see a preview of what the text will look similar to.

6. Click Background, click the ellipsis () that is located to the right of the Color box, and in the Color Picker dialog box, click a color.

7. Click OK to close the Style Builder dialog box.

The text in the label now reflects the style settings that you made.

From these few steps, you can see that the Style Builder lets you set any inline style for any element without requiring that you know the syntax.

If you prefer working directly with HTML, you can also set styles in Source view.

To set inline styles in Source view

1. Switch to Source view.

The <asp:label> element for the CaptionLabel control now has a style attribute that reflects the settings that you made in the Style Builder.

2. Position the insertion pointer on a space in the <asp:button> element, and then type style=.

Note

Note

The editor always puts quotation marks around the style attribute, regardless of the formatting options that you have s et. For more information, see Walkthrough: Advanced HTML Editing in Visual Web Developer.

3. Double-click background-color, and then type a colon (:).

Microsoft IntelliSense functionality displays a list of color names. A ToolTip displays the syntax for the background- color style setting.

4. Double-click Blue, type a semicolon (;), which is the delimiter between style settings, and then press SPACEBAR to display IntelliSense functionality.

5. Double-click color, type a colon (:), and then double-click a contrasting color, such as Yellow or White.

6. To see the effect of your choices, switch to Design view.

Creating and Applying a CSS Style Sheet

Besides setting inline styles for individual elements, you can also create and apply cascading style sheet (CSS) files. A cascading style sheet lets you define styles that can be applied to multiple controls and pages without having to edit elements individually.

In this section of the walkthrough, you will create a style sheet, which lets you use the same tools that you used to set inline styles. You will then apply the style sheet to the page that you have been editing.

To create a style sheet

1. In Solution Explorer, right-click the name of the Web site (for example, C:\WebSites), and then click Add New Item.

2. Under Visual Studio installed templates, click Style Sheet.

3. In the Name box, type dark.css, and then click Add.

The editor opens with a new style sheet that contains a body style element.

4. Position the insertion pointer between the opening and closing braces ({ }), and then on the Styles menu, click Build Style.

The Style Builder - body dialog box appears.

5. Click Font, under Font Attributes, click the ellipsis (…) that is located to the right Color box, in the Color Picker dialog box, click a light color, and then click OK.

Note

Note

Be sure to select a color that is different from the default color of the pages in the Web site.

6. Click Background, click a dark color, such as Maroon, that contrasts with the font color you selected in the preceding step, and then click OK to close the Style Builder- body dialog box.

7. Position the insertion pointer after the closing brace of the body element, right-click, and then click Add Style Rule.

The Add Style Rule dialog box appears.

The Add Style Rule dialog box lets you create new styles that are bound to a particular HTML element type, to a style class name, or to a specific element.

8.

Click Class name, and then in the box, type reverse.

This will create a new style class named reverse. You will be able to apply the style settings that you defined for the reverse class to any element on your page. You could optionally create the class so that it applies to only specific types of elements (anchors, buttons, and so on), but in this walkthrough you will create a simple style class.

9.

Click OK to close the Add Style Rule dialog box.

10.

Use the style builder or IntelliSense functionality to set the colors for the reverse style to the opposite of the styles for the body. The element will look similar to the following:

.reverse

{

background-color:white;

color:maroon;

}

Now that you have a style sheet, you can reference it in the page you have been editing.

To reference the style sheet on the Web page

1. Open Default.aspx page and switch to Design view.

2. From Solution Explorer, drag the dark.css file onto the page.

The page is updated, displaying the effect of the style sheet.

3. Click ResultLabel, and then in Properties, set CssClass reverse.

This applies the reverse style to ResultLabel.

4. Switch to Source view.

In the <head> element, you can see that the editor has added a <link> element that references the style sheet. You can also see that the cssclass attribute of the second <asp:label> element has been set to reverse.

5. Right-click the page, and then click View in Browser.

The page appears in the browser with the style sheet applied.

Changing Style Sheets Programmatically

Sometimes, you might want to be able to dynamically change the style sheet that is referenced by a page. In this part of the walkthrough, you will create a second style sheet, and then in your page, write several lines of code that switch style sheets programmatically.

To create a new style sheet

1. In Solution Explorer, right-click the Web site name, and then click Add New Item.

2. Under Visual Studio installed templates, click Style Sheet, in the Name box, type light.css, and then click Add.

3. In the new style sheet, use the Style Builder or IntelliSense functionality to create the following styles:

body

{

background-color:white;

color:Black;

}

.reverse

{

background-color:Black;

color:White;

}

4. Save the new style sheet.

In your original page, you can now add the ability to switch style sheets. You will add two radio buttons that let the user select between a dark look and a light look.

To let users change style sheets

1. Open the Default.aspx page and switch to Source view.

2. In the <link> element, which is in the <head> element, add the attribute ID="stylesheet".

The tag will look similar to the following:

<link href="dark.css" type="text/css" rel="stylesheet" id="stylesheet" />

Adding these two attributes makes the <link> element a server control that you can program using server-based code.

3. Switch to Design view, and then from the Standard group in the Toolbox, drag two RadioButton controls onto the page.

Note

Note

The layout of the RadioButton controls is not important for this walkthrough.

4. Set the following properties for the RadioButton controls.

a. Control

a. Properties

RadioButton1

ID: radioDark

AutoPostBack: true

Checked: true

GroupName: grpSelectStylesheet

Text: Dark

RadioButton2

ID: radioLight

AutoPostBack: true

Checked: false

GroupName: grpSelectStylesheet

Text: Light

5. Click radioDark and on the Properties toolbar, click the events icon to display available events.

6. In the CheckedChanged box, type SwitchStylesheets, and then press ENTER.

The editor creates a handler for the CheckedChanged event of the radioDark control.

7. Type or copy the following code, which switches the Href attribute of the <link>.

VB

Protected Sub SwitchStylesheets(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles radioDark.CheckedChanged If radioDark.Checked Then stylesheet.Href = "dark.css" ElseIf radioLight.Checked Then

stylesheet.Href = "light.css" End If End Sub

C#

protected void SwitchStylesheets(Object sender, EventArgs e)

{

if (radioDark.Checked) stylesheet.Href = "dark.css"; if (radioLight.Checked) stylesheet.Href = "light.css";

}

The code determines which option button is selected and sets the Href attribute of the <link> element, which you named stylesheet, appropriately.

8.

Switch to Design view.

9.

Click radioLight, and in Properties, click the events icon.

10.

In the CheckedChanged box, click SwitchStylesheets.

This binds the CheckedChanged event of the radioLight control to the handler that you have already written to switch style sheets. Both radio buttons will call the same handler when they are clicked.

You can now test your page.

To test the page

1. Press Ctrl+F5 to run the page.

2. Click Light.

The appearance of the page changes.

3. Click Dark to make sure that both option buttons work.

Next Steps

This walkthrough has illustrated the basic techniques for working with CSS styles in your ASP.NET Web pages. You might also want to explore the following ways you can control the appearance of the Web pages:

Setting style information programmatically for HTML elements.ways you can control the appearance of the Web pages: For more information, see How to:

For more information, see How to: Set HTML Server Control Properties Programmatically.

Creating styles programmatically and applying the styles to ASP.NET server controls.to: Set HTML Server Control Properties Programmatically . Creating themes and skins, which let you specify

Creating themes and skins, which let you specify not only CSS styles, but virtually any property of an ASP.NET control.programmatically and applying the styles to ASP.NET server controls. For details, see ASP.NET Themes and Skins

For details, see ASP.NET Themes and Skins Overview.

Visual Web Developer

Walkthrough: Advanced HTML Editing in Visual Web Developer

The Microsoft Visual Web Developer Web development tool provides a rich HTML editing experience for creating Web pages. This walkthrough introduces some of the more advanced HTML editing features of Visual Web Developer.

Note

Note

For an introduction to HTML editing, see Walkthrough: Basic HTML Editing in Visual Web Developer.

Tasks illustrated in this walkthrough include the following:

Specifying options for how the HTML editor formats elements in the page.Tasks illustrated in this walkthrough include the following: Selecting options so that the HTML editor that

Selecting options so that the HTML editor that you create is compatible with specific browsers.for how the HTML editor formats elements in the page. Outlining your page — that is,

Outlining your page — that is, creating collapsible regions in the editor to reduce clutter.editor that you create is compatible with specific browsers. Prerequisites In order to complete this walkthrough,

Prerequisites

In order to complete this walkthrough, you will need:

A general understanding of working in Visual Web Developer.In order to complete this walkthrough, you will need: For an introduction to Visual Web Developer,

For an introduction to Visual Web Developer, see Walkthrough: Basic HTML Editing in Visual Web Developer.

Creating the Web Site and Page

If you have already created a Web site in Visual Web Developer (by completing Walkthrough: Basic HTML Editing in Visual Web Developer), go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, click New Web Site.

The New Web Site dialog box appears.

3. Under Visual Studio installed templates, click ASP.NET Web Site.

4. In the Location box, enter the name of the folder where you want to keep the pages of the Web site.

For example, type the folder name C:\WebSites.

5. In the Language list, click the programming language that you prefer to work in.

6. Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Note

Note

By default, Visual Web Developer creates ASP.NET Web pages using the code-behind model. For more information, see ASP.NET Web Page Code Model. In this walkthrough, you will not be using the code-behind page.

Formatting Markup

The HTML editor provides a variety of options to help you format the markup in your pages according to your own preferences. Formatting options include the following:

Whether tag and attribute names are in uppercase or lowercase letters. You can specify options separately for HTML tags and ASP.NET Web server controls.to help you format the markup in your pages according to your own preferences. Formatting options

Whether attributes are added by enclosing them in quotation marks.Whether elements are closed automatically by the editor. Choices include creating self-closing tags (for example,

Whether elements are closed automatically by the editor. Choices include creating self-closing tags (for example, <br /> ), creating opening and closing tags ( <p></p> ), and automatically inserting closing <br />), creating opening and closing tags (<p></p>), and automatically inserting closing tags.

How child elements of a tag are indented.), and automatically inserting closing tags. Where line breaks are positioned around tags. Regardless of

Where line breaks are positioned around tags.closing tags. How child elements of a tag are indented. Regardless of what formatting options you

Regardless of what formatting options you set, an important feature of HTML formatting is that you have ultimate control over the layout and appearance of the markup in the page. You can format elements manually (for example, by indenting them), and the editor leaves your formatting as is unless you explicitly make a request to have the markup reformatted.

In this part of the walkthrough, you will explore different formatting options and see the effect of different settings. You will also learn how to apply formatting to the whole page or to a selection within the page.

Note

Note

This walkthrough reviews only the formatting features that are unique to working with HTML. As a Visual Web Developer tex t editor, the HTML editor also supports various options that apply to all text editing, such as setting tab size and line wrap. For information about general text editing options, see Editing Text, Code, and Markup.

In this part of the walkthrough, you will add some simple HTML to the page, change formatting options, and then add more HTML. This illustrates how changing the settings affects how the HTML is formatted.

To add HTML elements that have default formatting options

1. Switch to Design view.

2. On the Layout menu, click Insert Table, and then click OK.

Do not change any one of the default settings in the dialog box.

The designer creates an HTML table with three columns and three rows.

3. Below the table, click the page.

4. Press ENTER several times to create some blank space, and then from the HTML group in the Toolbox, drag an Image control onto the page.

5. Switch to Source view.

You will see that the <table> and <img> elements have been inserted in the page.

By default, the designer creates elements in which the tag and attribute names are lowercase and attributes are enclosed in quotation marks.

You can now change the formatting options.

To change formatting and validation options

1. On the Tools menu, click Options.

2. Click Validation, and then in the Target list, click Internet Explorer 6.0.

3. Click Format.

You can set some options separately for server tags (ASP.NET server controls) and client tags (HTML elements).

4. In the Client tag list, click Uppercase.

5. Clear the Insert attribute value quotes when formatting and Insert attribute value quotes when typing check boxes.

6. Click OK to return the editor.

Notice that although you changed formatting options, the existing markup in the page does not change.

You can now add new elements.

To add HTML elements using the new formatting options

1.

Scroll to the bottom of the page.

2.

From the HTML group in the Toolbox, drag a Table control onto the page and position it above the </form> tag.

This time, the tags in the <TABLE> element are in uppercase letters.

3.

Below the table that you just created, position the insertion point, and then type a right angle bracket (<) to start a new tag.

list appears in which all the tag names are offered in uppercase, because that is the option that you have set for formatting.

A

4.

In

the list, double-click IMG, and then press the SPACEBAR.

list of attributes for the <img> tag appears. The attributes are in lowercase, because when you set formatting options, you left Client attributes as the default setting for Lowercase.

A

5.

Properties, set Src to graphic.gif, which is an invented graphic file name, and make sure that the tag now looks similar to the following:

In

<IMG src=graphic.gif

Because you disable the Insert attribute value quotes when typing option in the preceding procedure, the editor does not automatically enclose the attribute in quotation marks.

Note

Note

 

The editor inserts quotation marks, regardless of the options setting, if the attribute requires them, such as when an att ribute value contains a space.

6.

Type a slash mark (/) and a right angle bracket (>) to close the <img> tag.

As noted earlier in this section, the formatting options that you set were not applied to existing markup in the page. However, if you want, you can apply formatting settings to the page or to individual elements in the page.

To apply formatting to existing elements

1.

In

Source view, highlight to select the first table that you created.

2.

On the Edit menu, click Format Selection.

The tag names are changed to uppercase.

Note

Note

The editor does not remove quotation marks, even if you change the option setting. Similarly, the editor does not chan ge the termination of existing tags, even if you change the option for how to close tags.

You can see from this example how formatting works in the HTML editor. When you use editing tools, such as Toolbox or Properties, to edit elements, the editor uses the current set of formatting options to generate the markup. However, the editor does not change any existing markup. If you want to apply new formatting options to existing markup, you can apply it manually by using the Edit menu commands.

Setting Tag Formatting Options

The formatting options that you have worked with up to this point apply to all elements in the page. If you want, you can specify formatting options for individual tags also. This is useful if you frequently use certain tags and want to use non-default formatting for those tags. Per-tag formatting lets you set the following formatting options:

How the tags are closed—that is, not closed, self-terminated, or with a separate closing tag.formatting lets you set the following formatting options: How line breaks are used around and within

How line breaks are used around and within tags.closed—that is, not closed, self-terminated, or with a separate closing tag. How child elements of a

How child elements of a tag are indented.is, not closed, self-terminated, or with a separate closing tag. How line breaks are used around

Note

Note

Tag-specific formatting rules that you specify can be overridden by the rule that the HTML editor will not change the re ndering of tags. If a tag formatting rule would change the way a tag is rendered, the rule is ignored.

In this part of the walkthrough, you will set several tag formatting options and see how the editor works with them. Up to this point, you have worked with HTML elements, such as the <table> element. Now, you will work with some ASP.NET server controls, so that you can see that formatting options apply equally to controls and elements.

You will start by setting some options that apply to all tags of a certain type. You can set options for the following types of elements:

HTML elements that do not have content, such as br and input . br and input.

HTML elements that can have content, such as table and span . table and span.

Server elements (asp: ) that cannot have content, such as asp:image . asp:) that cannot have content, such as asp:image.

Server elements that can have content, such as asp:textbox . asp:textbox.

Security Note

Security Note

A TextBox control accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate that user in put does not include script or HTML elements. For more information, see Script Exploits Overview.

For the first part of this section, you will add an HTML table. You will then change the tag formatting rules for table elements and reformat the document to see the effect of changing the formatting rule.

To set tag-formatting rules for an HTML table

1.

In

Source view, in a blank part of the window, right-click, and then click Formatting and Validation.

The Options dialog box appears with the options for formatting that you set in the preceding section.

2.

In

the Client Tag list, click Lowercase to reset the formatting for client tags.

3.

Click OK to close the Options dialog box.

4.

From the HTML group in the Toolbox, drag a Table control onto the page.

The editor creates a <table> element that has three rows (<tr> elements) and three cells (<td> elements) in each row. Each tag is on a separate line:

 

<table>

<tr>

<td>

</td>

</tr>

5.

In

a blank part of the window, right-click, and then click Formatting and Validation.