Building an End-to-End HTML5 App with ASP.NET MVC, EF and jQuery Dan Wahlin

Blog

Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Processing Data Canvas, SVG, and Video

The Account at a Glance Application

Quick Glance View

Key Application Features Multiple data views Drag and drop tiles Context-aware tiles AJAX-enabled

Application Technologies Client-Side Technologies HTML5 Modernizr Handlebars HTML5 Boilerplate jQuery Canvas SVG CSS3 JavaScript Patterns Server-Side Technologies JSON and Ajax ASP.NET MVC ASP.NET Web API Entity Framework Code First Repository Pattern C# Unity IoC Container SQL Server Nuget

Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

Web Project Structure Server-side and Client-side

Model/Repository Project Structure Data Repository Classes Model Classes

Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

Data Retrieval Financial data retrieved from Google REST service Data processed and stored in SQL Server Data operations performed using EF Code First –Model classes used to hold account and financial data –Repository pattern used for data retrieval classes

Data Patterns are Key!

Model Classes  Plain Old CLR Objects (POCOs) used to hold data: public class Stock : Security { public decimal DayHigh { get; set; } public decimal DayLow { get; set; } public decimal Dividend { get; set; } public decimal Open { get; set; } public decimal Volume { get; set; } //Code removed for brevity }

Repository Pattern  Repository classes created to handle CRUD operations: public class SecurityRepository : RepositoryBase, ISecurityRepository { public Security GetSecurity(string symbol) {...} public List GetSecurityTickerQuotes() {...} public OperationStatus UpdateSecurities() {...} public OperationStatus InsertSecurityData() {...} }

Repository Class Example 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(); }

Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

Serving Up JSON Data Data served to client using ASP.NET Web API Web API actions call repository objects Model objects converted to JSON and returned to client

How is ASP.NET Web API Used? ASP.NET MVC ASP.NET Web API SQL Server Entity Framework HTML (Razor) JSON

JSON Action Example public class DataServiceController : ApiController { [HttpGet] public BrokerageAccount Account(string acctNumber) { } [HttpGet] public Security Quote(string symbol) { } [HttpGet] public MarketQuotes MarketIndices() { } [HttpGet] public MarketsAndNews TickerQuotes() { } }

Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

JavaScript Patterns are Key!

Client-Side Scripts Script Purpose scene.layoutservice.js Defines tile "scenes" scene.statemanager.js Creates tiles dynamically at runtime scene.dataservice.js Handles performing AJAX calls to the server scene.tile.binder.js Handles converting JSON data into HTML for each tile’s size (small, medium and large) scene.tile.renderer.js Renders different tile sizes based on position scene.tile.formatter.js Custom formatting functionality for tiles

Account at a Glance Templates Application templates are stored on the server in the Templates folder Templates are downloaded dynamically to the client by scene.tile.binder.js Handlebars.js used to convert JSON to HTML

Tile Template Example ACCOUNT TOTAL {{Total}}

Converting JSON to HTML tmpl = function (tileName, data) { var templateHtml = $('#' + tileName).html(); if (data != null) { var compiledTemplate = Handlebars.compile(templateHtml); return compiledTemplate(data); } else { return templateHtml; }

Agenda The Account at a Glance Application Project Structure Data Retrieval Serving Up JSON Data Rendering Data on the Client Canvas, SVG, and Video

HTML5 Canvas HTML5 canvas provides a way to render pixels using JavaScript functions Plugins can simplify working with the canvas: –EaselJS –Fabric –Flot –Gury –JCanvaScript

Canvas in Account at a Glance  Account at a Glance uses Flot to render stock quote graphs using the canvas: $.plot(canvasDiv, [{ color: color, shadowSize: 4, label: 'Simulated Data', data: quoteData }], chartOptions);

Scalable Vector Graphics  SVG provides a way to render vector graphics using script or elements  Application uses the Raphael SVG plugin: raphael('AccountPositionsSVG', 500, 420).pieChart(scene.width / 2, scene.height / , 66, values, labels, "#fff");

Displaying Video

Multiple Video Sources  Video element supports multiple sources  Free conversion tool:

Summary Account at a Glance demonstrates integrating several HTML5 technologies Plugins used to convert JSON to HTML, generate canvas charts, SVG, and more Lessons learned: –Pick a pattern for structuring JavaScript code to keep it organized! –Leverage plugins for productivity – but test, test, test!

Thank weblogs.asp.net/dwahlin Code:

This presentation is based on an online training course available at