Web Development

Putting the CSS Friendly Control Adapters to work

The CSS Friendly Control Adapters 1.0 download provides a new way to deliver a subset of the ASP.NET Web controls. This new delivery approach offers standards-based HTML that leans on CSS for styling, as opposed to the older HTML TABLE-based approach normally used by the controls.

The CSS Friendly Control Adapters 1.0 override the default HTML generated by the ASP.NET Web controls to provide a more standards-based approach to presentation via CSS. I will show you how to use the Menu control in your ASP.NET applications. I begin with an examination of setting up the environment for using the CSS Friendly Control Adapters in your applications.

The environment

Last week, I outlined two approaches to using the CSS Friendly Control Adapters in your code: downloading the assembly or full source code. This week, I focus on using the full source code. Once you download and install the source code on your system, you should follow these steps to use the features of the CSS Friendly Control Adapters in your application:

  1. Create these subfolders in your application's root folder if they do not exist: App_Browsers, App_Code, App_Themes, CSS, and JavaScript.
  2. Copy the file named CSSFriendlyAdapters.browser from the App_Browsers folder in the CSS Friendly Control Adapters download to your Web application's App_Browsers folder. This file tells the system to use the control adapters as opposed to the default Web controls. Normally, you wouldn't edit this file since its current settings will work for your Web application, but you can edit it if you need to code for specific browsers. Also, you can remove the browser file to see your site without the CSS Friendly Control Adapters.
  3. Copy the entire Adapters folder from the App_Code folder in CSS Friendly Control Adapters download to your Web application's App_Code folder.
  4. Copy the entire JavaScript folder from the CSS Friendly Control Adapters download to your Web application.
  5. Copy the entire CSS folder (including the BrowserSpecific subfolder) in the CSS Friendly Control Adapters download to your Web application. The following markup must be present in your page's <head>. It imports a set of style sheets with rules that are independent of your page's theme. Conditional comments are used to add a special style sheet used only for previous versions of Internet Explorer.

<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />

<!--[if lt IE 7]>

<link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">

<![endif]-->

  1. The sample application included with the CSS Friendly Control Adapters download includes a lot of code that you may reuse. For example, you may want to reuse the themes or image files in an application that may be found in the basic theme folder of the sample application.

Note: These are the only ASP.NET Web controls that are supported with the CSS Friendly Control Adapters download: GridView, DetailsView, ChangePassword, DataList, Login, LoginStatus, Menu, PasswordRecovery, and TreeView.

With the environment set up, let's take a closer look at using some of the available controls within the CSS Friendly Control Adapters download in custom Web applications.

CSS Friendly Control Adapters in action

One of my favorite ASP.NET controls is the Menu control; it allows you to provide a powerful navigational element with minimal code. Now, using the Menu control as delivered via the CSS Friendly Control Adapters download allows you to deliver a navigational interface that takes advantage of a more standardized approach to building Web-based menus.

The base ASP.NET Menu control delivers the menu interface using one or more HTML TABLE elements. Using the CSS Friendly Control Adapters delivers a menu using an HTML unordered list (UL element) and styled via CSS. As an example, the following menu is created using a site map.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Menu Example</title>

<link rel="stylesheet" href="~/WalkThru/SimpleMenu.css" mce_href="~/WalkThru/SimpleMenu.css" type="text/css" />

<link runat="server" rel="stylesheet" href="~/CSS/Import.css" mce_href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />

<!--[if lt IE 7]>

<link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" mce_href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />

<![endif]-->

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Menu ID="TestMenu" runat="server" Orientation="Horizontal" CssSelectorClass="SimpleEntertainmentMenu" DataSourceID="SiteMapDataSource1">

</asp:Menu></div></form>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

</body></html>

Notice that two stylesheets are imported into the page; both are included with the CSS Friendly Control Adapters 1.0 download. The import.css file is a simple CSS file that includes import statements that bring in stylesheets for all controls available in the download. There is a stylesheet for each control: ChangePassword.css, CreateUserWizard.css, DataList.css, DetailsView.css, FormView.css, GridView.css, Login.css, LoginStatus.css, Menu.css, PasswordRecovery.css, and TreeView.css.

I could directly import the Menu.css file since it is the only control I am using, and it's overkill to import all stylesheets. Also, the SimpleMenu.css is imported -- it is included with the download as well. It provides an example of how to style the menu with the SimpleEntertainmentMenu CSS class defined in it. I could easily change the stylesheet to format the menu as desired.

You should also notice that the code for the Menu control is not much different than normally using the control. The one difference is the use of the CSSSelectorClass, which points the control to CSS class defined in the SimpleMenu.css file.

The following listing shows the contents of the site map used as the data source for the menu:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="test1.aspx" title="Test 1"  description="Test 1"> <siteMapNode url="test3.aspx" title="Test 3"  description="Test 3" /> <siteMapNode url="test4.aspx" title="Test 4"  description="Test 4" /> <siteMapNode url="test2.aspx" title="Test 2"  description="Test 2"> <siteMapNode url="test5.aspx" title="Test 5"  description="Test 5" />

</siteMapNode>

</siteMapNode>

</siteMap>

The CSS Friendly Control Adapters 1.0 download includes more example code to get you up and running with all of the available controls.

Improve the Web interface

The CSS Friendly Control Adapters 1.0 download provides a new way to deliver a subset of the ASP.NET Web controls. This new delivery approach offers standards-based HTML that leans on CSS for styling, as opposed to the older HTML TABLE-based approach normally used by the controls. Everything necessary to use this new way is available in the CSS Friendly Control Adapters 1.0 download (the source code used in this article). The code included with the download provides a starting point for customizing the controls for your own applications.

Do you use Web standards in your Web interfaces? Are you interested in combining these Web standards with Microsoft technologies? Share your thoughts in the article discussion.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

4 comments
Clara James
Clara James

Really nice Post! I always prefer such posts which has some informative things to share. I am a basic learner of css and really need such information to enhance my knowledge inthe field of html and css. http://www.csswebstyles.com/

dhunter
dhunter

Great article. I downloaded the entire .zip like the article requested. The only installation problem I had was in step "3)Copy the entire Adapters folder from the App_Code folder in CSS Friendly Control Adapters download to your Web application?s App_Code folder." The downloaded zip did not appear to have and "Adapters" directory in the App_Code directory. Any help on this?

wearerocks
wearerocks

Yes, not only do we need clarification on the 'Adapters' folder's whereabouts, but also take note that the source code is written in C#. This is important and may impact the user's decision as to whether to download the source files or merely to download the assembly itself, depending upon the user's familiarity with C#.

Editor's Picks