Get Started with ASP.Net AJAX Controls: An AJAX Dashboard

Welcome back to our series on getting started with the ASP.Net AJAX Controls.  In this series, I’m demonstrating the creation of a simple web application called “Room Scheduler” that allows a fictional hotel to manage guests and their reservations.  Our previous articles in this series demonstrated the following topics:

• Project Introduction and Navigation – We created a Telerik RadControls Web Application, added a Web Site Layout in a MasterPage, and configured navigation for the application with a RadMenu control.
• Gauging the Data Configuration – We defined the database configuration with Entity Framework 5 and Sql Server Compact and added some sample data.  We also verified data was loading properly by adding a RadGauge to the start of our application dashboard.

AJAX dashboard for the hotel staff

In this article, I am going to show you how to complete a dashboard for the hotel staff.  With this simple dashboard, a user can easily see the current guest list and review any of those guests complete reservation details with a single click.  You can follow along by downloading the source code from the previous article in the series.  You will also need to have Visual Studio 2012 and the Telerik AJAX controls installed.  A trial copy of the Ajax controls is available here.

Adding a List of the Current Guests

For this dashboard, we are adding a current guest list underneath of the gauge control added in the prior article.  This allows our users to see who is currently staying in the hotel and select one to review in the right side of the dashboard.  To ensure the user sees a graceful animation when the dashboard content is loading, I’m adding a RadAjaxLoadingPanel as well.  My left panel now looks similar to the following:

Code Listing 1 - Current Guests Grid Placement

To present this collection of guests I have chosen to use one of the most useful controls – Telerik's ASP.Net AJAX Grid, called the RadGrid.  In this scenario, I want to add the grid so that it lists a guest’s name along with the room number that they are occupying.  Additionally, I would like users to be able to sort the list of guests.  Finally, the user should be able to click anywhere in the row to select the guest they would like to know more about.

To deliver these requirements, I have added a RadGrid where indicated with the comment in Code Listing 1.  I configured most of this functionality through the smart tag that displays after I add the control to the page.  For this grid, I marked the checkboxes in the smart tag to enable sorting, scrolling, and client-side row selection:

I am choosing to access the data source for this grid in the code-behind.  In the RadGrid, there is an event called NeedDataSource the grid control calls when performing an action that requires data.  I will attach my data handling code to this event.  

 

There are some interesting things to notice about this block of code.  First, and this is my preference, I do not perform data access directly in the event handler.  I separate this into a different method to allow for re-use and refactoring later.  Second, the NeedDataSource event does not actually call DataBind on the currentGuestsGrid.  This is because the grid handles applying any sorting and filtering behind the scenes after the event-handler executes, saving you from having to identify and create filtering and sorting modifiers.

 

Finally, to complete the configuration of this grid, I want to define a ke3y for each row.  In my data returned, I returned the key for this dataset in the ResId property.  To configure the RadGrid to be aware of this unique identifier, I will need to add a MasterTableView declaration in the source view with ClientDataKeyNames property configured.  Don't confuse this with the DataKeyNames property that will deliver to your server-side code the same values.  The results of this configuration, including some style adjustments to the columns appears below:

Adding the Reservation Details Panel Layout

On the right side of the screen, we want to show the details of the selected reservation.   I’m not going to focus on how the data will be loaded into these fields yet, I just want to get a layout on the screen and will wire-up the data sources later.  To format this layout, I have added an asp:Panel with a simple collection of fields:

Code Listing 4 - The Reservation Details Panel Layout

The content of this panel is a collection of standard ASP.Net controls and layout with a few RadTextBoxes thrown in to make things interesting.  The more interesting parts start with the grid of room charges we will place in the middle of the panel.  I will place a standard RadGrid here and configure two columns, one for the charge description and one for the value associated with the charge.  With the minimal amount of configuration that I am doing for this grid, I will write this code by hand in the source editor:

Code Listing 5 - The Room Charges Grid

In Code Listing 5, notice how I formatted the Value column with a datafield called Value and a HeaderText of “Charged”.  You are never bound to use the name of the data field as your column header, a helpful concept when you need to localize your webpages.  Additionally, I have added a DataFormatString to this column to make it appear in American currency.

To complete this panel’s layout, I will add an AccessibleRadEditor to the bottom as indicated in Code Listing 6.  I don’t need to configure anything special about this control, as the default configuration meets my immediate needs.

Code Listing 6 - The Notes Editor in place

Making the Magic – Loading Data on an AJAX click event

Finally, to load the data into the reservation details panel we need to connect a client-side event to a series of server side methods that will fetch and paint the data in the appropriate controls.  The first method I wrote is a short show/hide method to display the “No Reservation Selected” or the controls in the reservation details grid:


I have placed an initial call to this method in an override of the CreateChildControls method of this WebForm.  Also in this method, I shall connect the AjaxManager to our Reservation Details Panel for AJAX updates:

Please also note the declaration for the AjaxRequest event handler.  This connection tells the AjaxManager what method triggers when an AjaxRequest is submitted.  The final line of this listing is the glue that tells the AjaxManager to update the HTML in the reservation details panel when the AjaxManager triggers the AjaxRequest.

In order for the current guests grid to trigger the AjaxManager to send an AjaxRequest, I need to specify some client-side script for the ClientEvent “OnRowClick”.  The RadGrid defines the client-side event for handling a row-click with this short snippet of code in the ClientEvents tag of the currentGuestsGrid:



I will now add a small block of JavaScript to the bottom of the page to trigger the AjaxRequest in the AjaxManager when the OnRowClick event is fired:

Code Listing 10 - JavaScript to execute an AjaxRequest on the AjaxManager

Several things are happening here, let’s discuss them briefly.  First, we fetch the value stored in the DataKey (remember we configured this in Code Listing 3).  Next we identify the client-side implementation of the AjaxManager with the $find() method and trigger the AjaxRequest method.  By submitting this key as the argument to that method, we will have the value available in the server-side code.