Your SlideShare is downloading. ×
  • Like
  • Save
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application


This is a talk I gave at the spring 2013 AngleBrackets/DevIntersection conference in Las Vegas. …

This is a talk I gave at the spring 2013 AngleBrackets/DevIntersection conference in Las Vegas.

HTML5 is all the rage these days but where do you look to find robust examples of using it along with jQuery, client-side templates, Ajax calls, data access technologies, and more? In this session, Dan Wahlin will walk through an application that demonstrates how key HTML5 technologies can be integrated and used to present data to users in different ways. Topics covered include exposing data to the client using RESTful services created using the new ASP.NET Web API, using Handlebars templates to render data, JavaScript techniques for structuring code, the role of HTML5 semantic tags, as well as how technologies such as the canvas, SVG, and video can be used. If you want to learn server-side as well as client-side techniques and strategies then this session is for you.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • Uses standards-based CSS
  • ASP.NET Web API provides a framework for buildingRESTful services that can cater to a variety of clients. You can think of it as a gateway into your business rules and data access classes that can serve up different data formats ranging from JSON to XML to custom formats.Standard ASP.NET MVC returns HTML from views on the server. With ASP.NET Web API, JSON data (and other types of data) can be returned to Ajax clients. By using it you can easily serialize model objects to JSON with a minimal amount of code. In this section you'll learn more about the ASP.NET Web API and how it is used in the Account at a Glance application.
  • Although templates can be embedded directly in a webpage, the Account at a Glance application stores the majority of the templates in separate HTML template files on the server and downloads them dynamically to minimize the initial size of the homepage. A script named scene.tile.binder.js is responsible for downloading templates, compiling them, and binding data into them.


  • 1. Building an End-to-EndHTML5 App with ASP.NET MVC 4, Entity Framework and jQuery Dan Wahlin
  • 2. This presentation is based on anonline training course available at
  • 3. 
  • 4. 
  • 5. 
  • 6. Server-side andClient-side
  • 7. DataModel Classes Repository Classes
  • 8. 
  • 9.   
  • 10. 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}
  • 11. public class SecurityRepository : RepositoryBase<AccountAtAGlance>, ISecurityRepository{ public Security GetSecurity(string symbol) {...} public List<TickerQuote> GetSecurityTickerQuotes() {...} public OperationStatus UpdateSecurities() {...} public OperationStatus InsertSecurityData() {...}}
  • 12. public class AccountRepository : RepositoryBase<AccountAtAGlance>, IAccountRepository{ public Customer GetCustomer(string custId) { using (var context = DataContext) { return context.Customers .Include("BrokerageAccounts") .Where(c => c.CustomerCode == custId).SingleOrDefault(); } }}
  • 13. 
  • 14. 
  • 15. HTML (Razor) JSON ASP.NET MVC ASP.NET Web API Entity Framework SQL Server
  • 16. public class DataServiceController : ApiController{ [HttpGet] public BrokerageAccount Account(string acctNumber) { } [HttpGet] public Security Quote(string symbol) { } [HttpGet] public MarketQuotes MarketIndices() { } [HttpGet] public MarketsAndNews TickerQuotes() { }}
  • 17. 
  • 18. 
  • 19. <script id="AccountDetailsTemplate_Small" type="text/x-handlebars-template"> <div class="content"> <header> <span>ACCOUNT TOTAL</span> </header> <section> <span class="Currency Positive" style="font-size: 20pt">{{Total}}</span> </section> </div></script>
  • 20. tmpl = function (tileName, data) { var templateHtml = $(# + tileName).html(); if (data != null) { var compiledTemplate = Handlebars.compile(templateHtml); return compiledTemplate(data); } else { return templateHtml; }}
  • 21. 
  • 22.      
  • 23. $.plot(canvasDiv, [{ color: color, shadowSize: 4, label: Simulated Data, data: quoteData }], chartOptions);
  • 24. raphael(AccountPositionsSVG, 500, 420) .pieChart(scene.width / 2, scene.height / 4 + 10, 66, values, labels, "#fff");
  • 25. 
  • 26. <video id="VideoPlayer" controls preload="auto" poster="/content/images/video-poster.jpg"> <source type="video/mp4" src="http://.../markets_320k.mp4" /></video>
  • 27. <video id="video" height="323" width="600" controls poster="Images/poster.jpg"> <source src="Video/test.webm" /> <source src="Video/test.ogv" /> <source src="Video/test.mp4" /> </video>
  • 28.   
  • 29. More Information: