Design site navigation

An easily navigable web site is half of the battle. I wouldn’t write about the revolutionary navigation designs and ideas here, let the web designers struggle with that. In this post, only cool and standard developer navigation will be considered. So let’s begin!

Our syllabus states the following on this objective: when to extend site map provider, treeview menu vs. site map path, programmatically manipulating site map nodes, overriding menu rendering by controls adapters, filtering site map nodes based on user roles. A nice collection.

The foundation of ASP.NET site navigation is the SiteMap. Now there are some classes with this name, so let’s lay out a terminology. The SiteMap is the XML document from where the data originates. It populates the SiteMapDataSource data source object, which looks for the web.sitemap file to get its data. It also populates the SiteMapPath control, which is a graphical representation of the sitemap, and is also known as breadcrumbs. I never understand why do they call it that way, but I have no English background.

So what’s the big deal with the epic battle between SiteMapPath and TreeView? The secret is that TreeView actually uses the SiteMapDataSource control to gain its data, so it reflects any changes made in the SiteMapDataSource. However, SiteMapPath queries the underlying web.sitemap file, without the intervention of a datasource object, so changes made in the SiteMapDataSource won’t affect it.

A little info about web.sitemap: it must be placed  in the root directory, must have a root element, but you can define sub sitemaps inside elements. So the following XML is valid:
Continue reading “Design site navigation”

Plan Web Sites to Support Globalization

This post will be about the globalization and localization techniques ASP.NET provides us. There are two types of resources which you can use in an ASP.NET page: global, which means they are accessible from all pages, and local, for each given page. First let’s see how to use global resources.

To enable them, add a special folder named App_GlobalResources. In this folder, you can insert whatever resource you’d like to use. Let’s insert a .resx file, this will be the default culture you’d use. Let’s call it GlobResx.resx. Add a key-value pair, for example HeaderText = Hello World. Now on a random .aspx page, define a Label control, and set its text property to <%$ Resources: GlobResx, HeaderText %>. Now you are done, when you run your site, you’ll see Hello World as the label’s text.

Now let’s take a further step. Create a file named GlobResx.en.resx into the App_GlobalResources folder. Add the same HeaderText entry, but now use the value: Hello for the English-speaking World! If your browser is set up to use the English culture, you’d see your label shows the new text.

Continue reading “Plan Web Sites to Support Globalization”

Design Complex Layout with Master Pages

Master pages are a very powerful feature to provide a consistent look and feel for your site. They also help you focus on the content of each individual page, rather than re-implementing for example the navigation of your page each time.

However, sometimes you need to access the master page from one of your content pages (the other way around makes less sense). A cool thing to do is to create strongly-typed master pages. This is achieved by only a single directive, called MasterType. It looks like this:

<% @MasterType virtualPath=”~/MasterPage.master” %>
Continue reading “Design Complex Layout with Master Pages”

Design a Brandable User Interface by Using Themes

Themes allow you to build sites with a consistent layout. You can set them up by adding an App_Themes directory for your application, and fill it up with folders. Each folder in the App_Themes directory represents a theme. You can assign them in a number of ways, in each case using the folder name to identify the theme.

There are five levels of applying themes:

  1. @Page Theme
  2. Web.config <pages Theme=””>
  3. Local control attributes
  4. @Page StyleSheetTheme
  5. Web.config <pages StyleSheetTheme=””>

A level at the beginning of the list overrides one at the end. So when you set a theme in the Page directive, it will override all the other style settings.
Continue reading “Design a Brandable User Interface by Using Themes”