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.

1. Building an End-to-End
HTML5 App with ASP.NET MVC 4,
Entity Framework and jQuery
Dan Wahlin

3. This presentation is based on an
online training course available at
http://www.pluralsight.com

5. 







8. 




10. 







11. Server-side
and
Client-side

12. Data
Model Classes Repository
Classes

13. 







14. 





16. 
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
}

17. 
public class SecurityRepository :
RepositoryBase<AccountAtAGlance>, ISecurityRepository
{
public Security GetSecurity(string symbol) {...}
public List<TickerQuote> GetSecurityTickerQuotes() {...}
public OperationStatus UpdateSecurities() {...}
public OperationStatus InsertSecurityData() {...}
}

18. 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();
}
}
}

19. 







20. 



21. HTML (Razor) JSON
ASP.NET MVC ASP.NET Web API
Entity Framework
SQL Server

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

23. 







26. 



27. <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>

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

29. 







30. 







31. 
$.plot(canvasDiv, [{
color: color,
shadowSize: 4,
label: 'Simulated Data',
data: quoteData
}], chartOptions);

32. 

raphael('AccountPositionsSVG', 500, 420)
.pieChart(scene.width / 2,
scene.height / 4 + 10,
66, values, labels, "#fff");

33. 







34. <video id="VideoPlayer" controls preload="auto"
poster="/content/images/video-poster.jpg">
<source type="video/mp4"
src="http://.../markets_320k.mp4" />
</video>

35. 

<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>

36. 





37. More Information:
http://tinyurl.com/AAGApp2012