Build a jQuery HTML5 Web Application: The Account at a Glance App

As web technologies continue to evolve, developers have to learn new technologies so that they can build successful web-based applications that stand above the crowd. This can be a challenging proposition, especially for developers moving from desktop or Rich Internet Application (RIA) development frameworks. To help developers learn the latest HTML5, Cascading Style Sheets Level 3 (CSS3), and JavaScript technologies, several developer colleagues and I built a sample application for demonstration at Microsoft's MIX 11 conference. The application, called Account at a Glance, takes advantage of key web technologies and uses them to display brokerage account information to consumers. (See the end of this article for the code-download URL.)

The application was built in Q1 2011 by Dan Wahlin (client-side and server-side coding); Corey Schuman (design and client-side coding); Jarod Ferguson (client-side coding); and John Papa (Entity Framework Code First coding). John Papa, Giorgio Sardo, and Scott Guthrie also provided feedback and offered several key suggestions and ideas that were incorporated into the application. Figure 1a shows the Account at a Glance application as it was first conceived on a whiteboard, and Figure 1b shows how it ended up after the project was completed.

Figure 1A: The Account at a Glance application as originally conceived

Figure 1B: The Account at a Glance application screen—final version

We built the Account at a Glance application to demonstrate how cutting-edge web technologies can be used together to build a dynamic application capable of displaying account information, video news, quotes and charts, market news, and more without the use of plug-ins. The app loads data dynamically, using AJAX technologies, into tiles that are displayed within the application. As tiles are dragged and dropped to different locations in the interface, data is re-rendered, depending upon the size of the tile that is targeted, as shown in Figures 2a and 2b (small, medium, and large tile sizes exist). This allows data to be displayed in several different ways and provides a means for customers to customize how account information is displayed by moving tiles around.

Figure 2A: Dragging a tile to a different area of the screen

Figure 2B: Automatic resizing of tiles on screen, via jQuery templates

The Account at a Glance application uses these technologies:

This article provides an overview of the Account at a Glance application. Part 2 will provide details about the client-side technologies used, including HTML5 features such as jQuery templates, SVG, Canvas, and video.

The Account at a Glance Solution

The Account at a Glance application is comprised of a single solution with two projects. The first project is named AccountAtAGlance and uses the ASP.NET MVC 3 project template. The second project is named AccountAtAGlance.Model and is a Class Library project. Figure 3 shows the solution and project structure.

Figure 3: The Account at a Glance solution

The AccountAtAGlance project follows the standard ASP.NET MVC 3 folder structure. The Controllers folder contains the controller classes used in the application; the views are located in the Views folder. The Account at a Glance application relies heavily on client-side technologies such as jQuery, and the scripts used in the application can be found in the Scripts folder. Several jQuery plug-ins were used to create the application: jQuery UI, Flot (Canvas rendering), Raphael (SVG rendering), and DataTables. JSON data is exchanged between the client browser and server using ASP.NET MVC actions and rendered using jQuery Templates that are dynamically loaded from the server. CSS is used heavily throughout the application. The .css files are located in the Content folder.

The AccountAtAGlance.Model project contains the application's data-access functionality. The project contains the Code First classes that define the structure of model classes used throughout the application and also a DbContext class named AccountAtAGlance.cs. The Repository folder contains data-access classes that perform Create, Read, Update, and Delete (CRUD) operations on behalf of the application. LINQ technologies are used in the application to simplify the data-access code and provide filtering and sorting functionality. The application makes RESTful service calls to ASP.NET MVC 3 actions that expose data and objects defined in the AccountAtAGlance.Model project. It also calls out to a Google financial service to retrieve stock quotes and simulates random market index quotes on a timed basis.

The next sections provide details on the data-access technologies and web framework used in the application.

Code First and the Repository Pattern

When we started building the Account at a Glance application, we used Entity Framework 4.0's Model First option. However, Entity Framework Code First was about to be released, so we converted to that technology in the middle of the project (thanks to Scott Guthrie for the suggestion to go with Code First and John Papa for doing the conversion from Model First). If you're new to Code First, Entity Framework 4.1 provides a Code First approach that shifts the focus to working with Plain Old CLR Objects (POCO), which keeps your data model classes nice and clean. To use Code First, install NuGet, then go to View, Other Windows, Package Manager Console and type the following command at the prompt, as shown in Figure 4:

Install-Package EntityFramework

Figure 4: Using the NuGet Package Manager Console to install Entity Framework 4.1 and Code First

POCOs are used to define entities used in the application. Figure 5 shows an example of the BrokerageAccount POCO class, which defines several different properties as well as three navigation properties.

namespace AccountAtAGlance.Model{    public class BrokerageAccount    {    public BrokerageAccount()    {        Positions = new HashSet();        Orders = new HashSet();    }      // Primitive properties    public int Id { get; set; }    public string AccountNumber { get; set; }    public string AccountTitle { get; set; }    public decimal Total { get; set; }    public decimal MarginBalance { get; set; }    public bool IsRetirement { get; set; }    public int CustomerId { get; set; }    public decimal CashTotal { get; set; }    public decimal PositionsTotal { get; set; }    public int WatchListId { get; set; }      // Navigation properties    public ICollection Positions { get; set; }    public ICollection Orders { get; set; }    public WatchList WatchList { get; set; }

POCO classes defined in the application are used to automatically generate the database that the application uses. A class named AccountAtAGlance that derives from DbContext is used to query the database, as shown in Figure 6. This class is located in the AccountAtAGlance.Model project's Repository folder.

using System.Data.Entity;namespace AccountAtAGlance.Model.Repository{    public class AccountAtAGlance : DbContext    {    public AccountAtAGlance() : base("name=AccountAtAGlance") { }    public DbSet BrokerageAccounts { get; set; }    public DbSet Customers { get; set; }    public DbSet Exchanges { get; set; }    public DbSet MarketIndexes { get; set; }    public DbSet Orders { get; set; }    public DbSet OrderTypes { get; set; }    public DbSet Positions { get; set; }    public DbSet Securities { get; set; }    public DbSet MutualFunds { get; set; }    public DbSet Stocks { get; set; }    public DbSet WatchLists { get; set; }    public int DeleteAccounts()    {        //return base.Database.SqlCommand("DeleteAccounts");        return base.Database.ExecuteSqlCommand("DeleteAccounts");    }    public int DeleteSecuritiesAndExchanges()    {        return base.Database.         ExecuteSqlCommand("DeleteSecuritiesAndExchanges");    }    protected override void OnModelCreating(DbModelBuilder modelBuilder)    {        // base.OnModelCreating(modelBuilder);            // inherited table types        // Map these class names to the table names in the DB        modelBuilder.Entity().ToTable("Securities");        modelBuilder.Entity().ToTable("Securities_Stock");        modelBuilder.Entity().ToTable("Securities_MutualFund");    // Many to many resolver        // Map the WatchList and Securities navigation property using         // the WatchListSecurity Many-to-Many table.        // To avoid a Cycle condition, WatchList has Securities,         // but Security does not have WatchLists.        modelBuilder.Entity().HasMany(w =>        w.Securities).WithMany()             .Map(map => map.ToTable("WatchListSecurity")            .MapRightKey("SecurityId")            .MapLeftKey("WatchListId"));    }    }}

The AccountAtAGlance class relies on the new fluent API to map some POCO classes to database tables, such as mapping Security to Securities and Stock to Securities_Stock. This is accomplished by overriding the OnModelCreating() method and defining the necessary mappings.

Classes that follow the Repository Pattern are located in the Repository folder of the AccountAtAGlance.Model project. Several different classes are provided to handle various query functionality. Figure 7 shows a section of the AccountRepository class that handles querying customer account information. It uses the AccountAtAGlance DbContext class to perform the query.

namespace AccountAtAGlance.Model.Repository{    public class AccountRepository : RepositoryBase,   IAccountRepository    {    public Customer GetCustomer(string custId)    {        using (var context = DataContext)        {        return context.Customers            .Include("BrokerageAccounts")            .Where(c => c.CustomerCode == custId).SingleOrDefault();        }    }    }}

JSON and MVC Actions

I'm a big fan of ASP.NET MVC because it provides complete control over the HTML returned from the server, provides a solid architecture and well-defined conventions, and allows JSON objects to be returned from the server easily with minimal code (to name just a few of MVC's great features). Most of the Account at a Glance application's functionality occurs on the client side with JavaScript, but the application still needs to get data from the server. We initially planned on using Windows Communication Foundation (WCF) REST features to serve up JSON, but because we were using ASP.NET MVC as the application framework, we decided to use controller actions instead.

Using controller actions provides a simple way to return custom JSON objects back to the client where they can be manipulated using jQuery templates. jQuery APIs such as getJSON() are used to call the ASP.NET MVC actions. (I'll provide additional details in the next article.) Figure 8 shows an example of actions that return account details and security quotes.

public ActionResult GetAccount(string acctNumber){    return  Json(_AccountRepository.GetAccount(acctNumber),    JsonRequestBehavior.AllowGet);}public ActionResult GetQuote(string symbol){    return  Json(_SecurityRepository.GetSecurity(symbol),    JsonRequestBehavior.AllowGet);}

Each action calls into the appropriate repository class, which handles retrieval of data from the database. Once the data is retrieved and mapped to model objects, the objects are serialized to JSON using the built-in Json() method in ASP.NET MVC controllers and passed back to the client for processing.

An Integrated Approach

The Account at a Glance application provides a robust example of how different technologies can integrate together from server side to client side. In this first article you've seen how the application solution is structured and the different technologies that were used on the server side, including Entity Framework Code First and ASP.NET MVC. In "How to Build a jQuery HTML5 Web Application with Client-Side Coding," I'll provide more details about the client-side coding and scripts that were used, including patterns that the team used to structure JavaScript code. You can download the application code at the URL below if you'd like to explore it in more detail.

Download the Account at a Glance application.