This series is based on one of three sample applications that I write whenever I engage a new technology. You will find that the logic in this application is stripped down from being “production ready”, but the user interface will be stretched to make as much use of the tools as possible. Additionally, I will be adding a bit more polish to the project than I normally would, for you the reader to be able to better understand the benefits this amazing toolset has for you.
This specific sample project is a simple web-based application that facilitates the management of reservations at a hotel. You could also alter the business objects and re-use the application to manage room allocations at a conference, or a number of other resource management purposes. This application shall be built in a way that ensures that it is accessible to all users, works on all devices, and could easily be modified to be consumed by users of all cultures.
This application will use a simple WebForms application structure that you will be able to open in any edition of Visual Studio 2012. We will use a SQL Server compact database and Entity Framework 5 in order to minimize the amount of database interactions we need to write by hand. Let’s get started with our RoomScheduler project.
For this project, I’m not going to use any of the default content in the Microsoft delivered application templates. I’ll start with a RadControls Web Application and enable only the following configuration options:
To define a common look and feel throughout the application, I’m going to add a MasterPage, a css file and a small generic text logo image that I generated from http://cooltext.com With a little bit of magic from the gradient-editor at http://www.colorzilla.com/gradient-editor/ and some layout HTML such as the following:
>Hotel Room Scheduler</
<!-- Menu goes here -->
I now have a base layout to begin adding functionality to. My simple header looks like the following:
Now for the navigation. I highly recommend that you use a Telerik RadMenu control to centralize your application navigation and for the sweet effects that are available. This control can be bound to a datasource, or you can hardcode the items into your menu. Since we chose to use the MetroTouch theme for our controls, this menu will be optimized for a touch experience.
The RadMenu shall be added where indicated with a comment in the sample code above. While in source view of the master page, I dragged the RadMenu control from the toolbox to the location indicated and named my menu control “siteMenu”. After changing the id of the control, when I mouse over the source code and click the blue smart tag that appears (its blue in my environment, your mileage may vary) the following popup appears:
Please notice that there is no shortcut to quickly add the RadScriptManager or the RadAjaxManager. These are items that would normally appear if this menu were added to a normal webform, and not to a MasterPage. I’ll add these two required control helpers by hand, placing the RadScriptManager and RadAjaxManager just inside the opening <form> tag.
Please notice that I have explicitly configured the RadScriptManager with the “EnableScriptCombine” property set to “true”. This attribute configuration will force all common referenced scripts to be combined into a single script. When scripts are combined, it ensures that the browser will not be waiting for a number of individual script files to be downloaded, improving perceived performance of your application. This setting is the default and does not need to be explicitly set. I have done so to in this sample for illustrative purposes only.
Additionally, I have chosen the “LoadScriptsBeforeUI” setting of “false”. By configuring the ScriptManager in this way, the resultant HTML script references will be placed at the end of the HTML. This technique ensures the HTML graphical components will be rendered in the browser before all script is done being downloaded. Again, this configuration is done to optimize the perceived client-side performance of the application.
Returning to the smart-tag, I am going to hard-code my menu items, so I click the “Edit Items” option and I’m presented with a Telerik-branded popup window. In this window, I can add and define all of the cool properties for my menus.
By default, the RadMenu will be configured with a horizontal layout, which suits my needs. There are templates that I can define for the items in the menu, allowing me to configure more graphical or expanded text for the menu items. I don’t need these advanced features for my simple application, but what I really want to show you is the animations you can choose for how the control exposes each layer of submenus. There are many animations available, and for this project I’m going to configure my menus to use the “InOutBounce” animation. I encourage you to check out the other animations to understand the neat “bounce” types of effects that are available to you.
With this configuration completed, our layout now looks something like this:
The final piece we shall add to our layout is a breadcrumb navigation hint. This is a small block of text, near the top of the content area that will show where we are in the application. I shall first allocate a DIV to house the breadcrumbs, and then drag a RadSiteMap control into the DIV. My markup will look something like the following:
sender, EventArgs e)
// Identify our location in the RadMenu
var currentItem = siteMenu.FindItemByUrl(Request.Url.PathAndQuery);
// Configure the breadcrumbs
// Walk up the hierarchy of the menu to create a map of our current location
var path =
currentItem = currentItem.Owner
// Bind our hierarchy to the RadSiteMap
breadCrumbSiteMap.DataSource = path;
The top level menu item is listed first, separated by a hyphen character “-“ and then the second level menu item is listed.
We have defined our application and added a simple layout for our application. With a few controls and a dozen or so lines of c-sharp code, we have quickly made it very easy for our end-users to navigate our entire application. We could easily update the menu in our MasterPage and our breadcrumbs functionality will consume the new information with no additional changes.
Download our first sample source code here: ASP.Net AJAX GetStarted Source Code - Step 1
In the next post in this series, we’ll add some data objects to the project and prepare to put together some data visualizations in a dashboard presentation.
Jeffrey T. Fritz is a Microsoft MVP in ASP.Net and an ASPInsider with more than a decade of experience writing and delivering large scale multi-tenant web applications. After building applications with ASP, ASP.NET and now ASP.NET MVC, he is crazy about building web sites for all sizes on any device. You can read more from Jeffrey on his personal blog or on Twitter at @csharpfritz. Google Profile CodeProject