Telerik blogs
In order to introduce ASP.Net developers who may have spent more time with MVC or have not used the ASP.Net AJAX controls from Telerik, we are going to document the creation of a sample project for developers, by developers. This blog series will have significant code content, lots of downloadable code samples, and we will be looking for your feedback and contributions.

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.

File – New 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:

  • Theme: MetroTouch
  • Enable CompressionModule
  • Copy RadSpellDictionaries
  • Use Ajaxified Templates
  • Use jQuery Support
  • Max Request Length: 4096 kB
  • Execution Timeout: 110 seconds

Master Page Layout

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:

<head runat="server">
    <title>Hotel Room Scheduler</title>
    <link href="/css/style.css" rel="stylesheet" />
    <asp:ContentPlaceHolder id="head" runat="server" />
</head>
<body>
 
    <form id="theForm" runat="server">
 
    <div id="header" runat="server">
 
        <div id="logo"></div>
 
    </div>
    <!-- Menu goes here -->
 
    <div>
        <asp:ContentPlaceHolder id="body" runat="server">
        </asp:ContentPlaceHolder>
    </div>
 
    </form>
 
 </body>
</html>

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.

<form id="theForm" runat="server">
 
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="true" LoadScriptsBeforeUI="false">
    <Scripts>
        <telerik:RadScriptReference Path="~/scripts/jquery-1.8.3.min.js" />
        <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>
 
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

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.

    <ExpandAnimation Type="InOutBounce" />
    <CollapseAnimation Type="InOutBounce" />
 
</telerik:RadMenu>

With this configuration completed, our layout now looks something like this:


Breadcrumbs – Where am I now?

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:

</telerik:RadMenu>
 
<div class="breadcrumb">
    <telerik:RadSiteMap ID="breadCrumbSiteMap" runat="server" DataTextField="Text" DataNavigateUrlField="NavigateUrl">
        <DefaultLevelSettings ListLayout-RepeatDirection="Horizontal" SeparatorText="-" Layout="Flow" />
    </telerik:RadSiteMap>
</div>

In this model, I have configured some options to allow the RadSiteMap to be populated from content collected out of the menu that I constructed previously.  The presentation that I am attempting to demonstrate is the user’s location when they access a page.  Once again, I could directly bind this RadSiteMap to a database that could be pruned for us based on security permissions.  For this simple project I have an alternate approach that will re-consume the hardcoded RadMenu items that I defined previously.  To accomplish this, we need to write some c-sharp code that will facillitate the location capability for our master page.  I will add the following c-sharp code to the MasterPage.cs file:
protected void Page_Load(object sender, EventArgs e)
{
 
    // Identify our location in the RadMenu
    var currentItem = siteMenu.FindItemByUrl(Request.Url.PathAndQuery);
    if (currentItem != null)
    {
        // Configure the breadcrumbs
        DataBindBreadCrumbSiteMap(currentItem);
    }
}
 
private void DataBindBreadCrumbSiteMap(Telerik.Web.UI.RadMenuItem currentItem)
{
    // Walk up the hierarchy of the menu to create a map of our current location
    var path = new List<RadMenuItem>();
    while (currentItem != null)
    {
        path.Insert(0, currentItem);
        currentItem = currentItem.Owner as RadMenuItem;
    }
 
    // Bind our hierarchy to the RadSiteMap
    breadCrumbSiteMap.DataSource = path;
    breadCrumbSiteMap.DataBind();
}

With this snippet of code in place, I can add an empty page for the “Reserve a Room” menu item’s NavigateURL and I’ll see the following representation in our breadcrumbs:

The top level menu item is listed first, separated by a hyphen character “-“ and then the second level menu item is listed.

Conclusion

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.



About the Author

Jeffrey T. Fritz

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


Comments

Comments are disabled in preview mode.