A basic practice in software development of all types is to use mechanisms that allow us to write and maintain code in a single place no matter how many difference places that code is used throughout our entire application.
When we’re building web sites, and more specifically web pages, the reuse of UI code can be especially challenging as the nature of web applications are stateless and in most models there is a 1-to-1 relationship between endpoints and “files”.
In ASP.NET WebForms we have master pages.
In Microsoft WebMatrix we have Layout Templates.
I’ll use WebMatrix for the example.
Given a WebMatrix site created using the default “Starter” template the following Home Page and About Page can be displayed when the project is run.
Note that only the text inside the white area of the pages is different in the Default.cshtml and About.cshtml pages.
The Default.cshtml page contains only the following.
- Lines #1 & #4 are code delimiters.
- Line #2 specifies a cshtml layout page to use.
- Line #3 sets the value of a global variable to be used inside the _SiteLayout.cshtml template.
- Lines #5 thru #7 are standard html markup.
The _SiteLayout.cshtml page contains all the markup that will be common across the multiple pages that will use this layout.
- Lines #5 & #33 where the Page.Title variable set in the Default.cshtml page is used by the template.
- Line #34 – the call to RenderBoby() where the content of the page that uses the template is inserted.
This is a very simple and useful construct for code reuse, but does requires some special considerations when context specific presentation is required such as when a navigation menu is included in the site template.
For example, given the User Interface Design below:
Note the top page menu.
The items in the menu are static for all pages but the STATE of the menu items is specific to the site’s navigational “context”.
Note the image above is of the “Home” page (Default.cshtml) and the “Home” menu item is highlighted or “active”.
The template itself contains all the menu items, but each page will be required to set it’s corresponding menu item to an active state when the page is loaded.
Our layout template defines the page menu as follows.
The CSS of the navigation container is as follows. (See the nav.css file)
And the actual items as follows.
The “hover” and “active” states are implemented in the following CSS definition.
Enter a tiny bit of jQuery code.
You will notice that the _SiteLayout.cshtml page contains the following line to pull the jQuery library into our pages.
Note that I’m pulling the jQuery library in from a static location. This is fine for development but in production you may benefit greatly from using the Microsoft CDN [ Read more HERE. ]
If you have never used jQuery before I suggest you have a look at this quick introduction [ See HERE ]
Note that our _SiteLayout.cshtml page has an <li> item named “Home”. This is the “Home” Menu Item.
Then this call…..
… “selects” the DOM element who’s id = “Home”, and the .addClass method applies the “active” css class to the “Home” element.
We then add a similar bit of code to each .cshtml page that needs to set it’s corresponding menu item to active (in the Layout Template.)
I hope someone finds this useful.
Stay tuned, more WebMatrix and jQuery UI / ASP.NET work coming.