Building an End-to-EndHTML5 App with ASP.NET MVC 4,   Entity Framework and jQuery                        Dan Wahlin
This presentation is based on anonline training course available at    http://www.pluralsight.com



Server-side    andClient-side
DataModel Classes   Repository                 Classes

        
public class Stock   : Security{    public decimal   DayHigh { get; set; }    public decimal   DayLow { get; set; }    pu...
public class SecurityRepository :  RepositoryBase<AccountAtAGlance>, ISecurityRepository{   public Security GetSecurity(s...
public class AccountRepository :  RepositoryBase<AccountAtAGlance>, IAccountRepository{     public Customer GetCustomer(st...


HTML (Razor)                   JSON ASP.NET MVC                ASP.NET Web API                            Entity Framework...
public class DataServiceController : ApiController{    [HttpGet]    public BrokerageAccount Account(string acctNumber) { }...


<script id="AccountDetailsTemplate_Small"   type="text/x-handlebars-template">     <div class="content">        <header>  ...
tmpl = function (tileName, data) {    var templateHtml = $(# + tileName).html();    if (data != null) {        var compile...

                    
$.plot(canvasDiv, [{       color: color,       shadowSize: 4,       label: Simulated Data,       data: quoteData   }], ch...
raphael(AccountPositionsSVG, 500, 420)  .pieChart(scene.width / 2,            scene.height / 4 + 10,            66, valu...

<video id="VideoPlayer" controls preload="auto"       poster="/content/images/video-poster.jpg">    <source type="video/mp...
<video id="video" height="323" width="600"    controls poster="Images/poster.jpg">    <source src="Video/test.webm" />  ...
        
More Information:http://tinyurl.com/AAGApp2012
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application
Upcoming SlideShare
Loading in …5
×

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

78,948 views
78,721 views

Published on

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
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
78,948
On SlideShare
0
From Embeds
0
Number of Embeds
5,186
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

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&apos;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.
  • Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application

    1. 1. Building an End-to-EndHTML5 App with ASP.NET MVC 4, Entity Framework and jQuery Dan Wahlin
    2. 2. This presentation is based on anonline training course available at http://www.pluralsight.com
    3. 3. 
    4. 4. 
    5. 5. 
    6. 6. Server-side andClient-side
    7. 7. DataModel Classes Repository Classes
    8. 8. 
    9. 9.   
    10. 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. 11. public class SecurityRepository : RepositoryBase<AccountAtAGlance>, ISecurityRepository{ public Security GetSecurity(string symbol) {...} public List<TickerQuote> GetSecurityTickerQuotes() {...} public OperationStatus UpdateSecurities() {...} public OperationStatus InsertSecurityData() {...}}
    12. 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. 13. 
    14. 14. 
    15. 15. HTML (Razor) JSON ASP.NET MVC ASP.NET Web API Entity Framework SQL Server
    16. 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. 17. 
    18. 18. 
    19. 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. 20. tmpl = function (tileName, data) { var templateHtml = $(# + tileName).html(); if (data != null) { var compiledTemplate = Handlebars.compile(templateHtml); return compiledTemplate(data); } else { return templateHtml; }}
    21. 21. 
    22. 22.      
    23. 23. $.plot(canvasDiv, [{ color: color, shadowSize: 4, label: Simulated Data, data: quoteData }], chartOptions);
    24. 24. raphael(AccountPositionsSVG, 500, 420) .pieChart(scene.width / 2, scene.height / 4 + 10, 66, values, labels, "#fff");
    25. 25. 
    26. 26. <video id="VideoPlayer" controls preload="auto" poster="/content/images/video-poster.jpg"> <source type="video/mp4" src="http://.../markets_320k.mp4" /></video>
    27. 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. 28.   
    29. 29. More Information:http://tinyurl.com/AAGApp2012

    ×