Chapter 9

Adding Functionality with ASP.NET and AJAX

This page serves as the companion web page for Chapter 9 of Expression Web 4 Step by Step.

Together, Microsoft Expression Web and ASP.NET make a great combination. Expression Web has solid support for ASP.NET files. Using that support, you can, for example, insert some rather advanced controls into your pages without writing any programming code.

After completing this chapter, you will be able to:

  • Use Expression Web’s ASP.NET Tools
  • Convert a DWT to a Master Page
  • Use Site-Navigation Controls
  • Use the AdRotator Control
  • Link to Data Sources and Use Data Controls
  • Use ASP.NET Ajax Features

Using Expression Web's ASP.NET Tools

Although Microsoft ASP.NET might be new to some users, the first beta release was in late 2000. It’s a platform that was developed by Microsoft, and it’s a huge source of capability. What can you do with ASP.NET? Literally, anything that can be done!

The ASP.NET segment of the Toolbox The ASP.NET segment of the Toolbox task pane is divided into the following seven groups, each of which contains controls that you can use in your pages:

ASP.NET Controls, Toolbox, Expression Web 4
Standard ASP.NET controls such as radio buttons, image controls, content placeholders, and other standard controls that are common on web pages.
Controls that allow you to easily connect to data sources and insert data that the controls gather from those data source into a web page.
Controls that support validation of data entered into ASP.NET forms.
Controls designed to help create navigation systems without having to write any programming code.
Controls that support implementing a user interface for membership systems in an ASP.NET site.
Controls for creating customizable web sites in which end users can modify the content, appearance, and behavior of web pages directly from a browser.
Controls for creating rich client behavior with little or no client script, such as asynchronous partial-page updating (dynamically refreshing selected parts of the page without reloading the entire page). Asynchronous partial-page updates avoid the visible "blink” that happens when a browser reloads an entire page.

Dedicated programmers have spent countless hours putting together great tutorials just to help users who are new to ASP.NET to get a start with the platform. Some of the best tutorials can be found at the following locations

Some people learn best by downloading an application, opening it within Expression Web 2, and experimenting with it. If you’d like to try that method, the following are good applications to get started with:

  • Microsoft Expression Starter Kits
    • These kits provide you with complete, pre-built assets. You can use them as is, or use them as a learning resource to help you build your own.
  • Open Source Projects and Starter Kits
    • Open Source Projects and Starter Kits: The Official Microsoft ASP.NET Site
    • Comersus .NET Cart is an open source shopping cart application written in ASP.NET 2.0. It runs against an Access database, and if you open it with Expression Web 2, it runs in the ASP.NET Development Server just as it would on a public Web server. Provides a good selection of applications that you can download and explore.

Convert a DWT to a Master Page

While you created an ASP.NET Master Page/ Content Page arrangement in Chapter 3 "Capitalizing on Expression Web 4’s Template Options”, the ability to quickly convert a Dynamic Web Template to an ASP.NET Master Page is useful, because there are many more templates available based on the DWT file than the MASTER file, so a quick conversion is often quite handy, plus the skill set is identical to making use of the most commonly available HTML templates.

When you complete this segment you will be able to convert a Dynamic Web Template into an ASP.NET Master Page

Convert a DWT to an ASP.NET Master Page with Expression Web 4
  • Open Source Web Designs
    • This is one of my favorite sources of templates and ideas.  Lots of open source templates to pick from and they're usually high quality CSS/XHTML templates that are easy to customize.
  • CSS Template Heaven
    • This is one of my favorite designers.  His templates, while not specifically for Expression Web are some of the cleanest and best laid-out CSS creations I've ever seen
  • Template Monster
    • This site warrants mention simply because of it's size.  Thousands upon thousands of templates here.  I have found that the most important part of these templates is the graphics file, since most of them are done by artists and not layout people, figure for some extra time to re-slice and layout the graphics into a proper page template.
  • Ruthsarian Layouts
    • A great source for CSS layouts that you can create your own graphics for.

Use Site-Navigation Controls

ASP.NET Controls segment of the Toolbox panel contains a group named Navigation, which contains three types of site-navigation controls: Menu, SiteMapPath, and TreeView. All these controls draw their navigational information from an XML file named Web.sitemap, which is saved in the root of your site.

Add an ASP.NET Navigation control

ASP.NET Navigation Control

Use the AdRotator Control

Now that you have had a chance to explore master pages and site-navigation controls, you will learn about another control from the Standard group in the Toolbox task pane: the AdRotator control. This control uses the information in an XML file to display advertising banners in a page.

Insert an ASP.NET AdRotator control and modify the XML file that provides the information to display the ads

ASP.NET AdRotator in Expression Web

Link to Data Sources and Use Data Controls

The ability to draw information from a database and display it on a Web page has previously been a fairly complicated task. Not so with Expression Web’s ASP.NET tools.

ASP.NET can work with Microsoft Office Access databases, Microsoft SQL Server databases, XML files, Microsoft Office Excel files, and even Oracle, IBM DB2, and MySQL databases.

Display information from a Microsoft Office Access database using GridView and ListView controls

Link to an Access Database in Expression Web 4

Using ASP.NET Ajax Features

The ASP.NET AJAX controls enable you to create client-side functionality such as partial-page updating. Partial-page rendering eliminates the need for the whole page to be reloaded in the browser. Instead, only individual regions of the page that have changed are updated. In many ways AJAX is similar to jQuery, with AJAX’s particular specialty being exchanging data with a server and then updating parts of a web page, without reloading the whole page.

When you complete this exercise, you will be able to use ASP.NET AJAX to automatically cycle through the items in the AdRotator without refreshing the whole page

ASP.NET AJAX in Expression Web

Key Points

  • The Expression Web ASP.NET tools enable complex functionality with minimal coding.
  • The Toolbox panel contains a group of commonly used ASP.NET controls.
  • You can quickly convert a DWT to a master page.
  • Site Navigation controls enable you to create server-side navigation for your pages.
  • The AdRotator Control uses an XML file to load a different ad each time a page loads.
  • ASP.NET data controls enable designers to easily work with Data Sources.
  • ASP.NET AJAX tools make it easy for a designer to create partial page updates.

You can easily make this a point to YOUR company OR hide it all together.