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

                        Dan Wahlin
This presentation is based on an
online training course available at
    http://www.pluralsight.com


















Server-side
    and
Client-side
Data
Model Classes   Repository
                 Classes











    




    


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


public class SecurityRepository :
  RepositoryBase<AccountAtAGlance>, ISecurityRepository
{
   public Security GetSecurity(string symbol) {...}
   public List<TickerQuote> GetSecurityTickerQuotes() {...}
   public OperationStatus UpdateSecurities() {...}
   public OperationStatus InsertSecurityData() {...}
}
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();
          }
     }
}












HTML (Razor)                   JSON

 ASP.NET MVC                ASP.NET Web API




                            Entity Framework



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




<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>
tmpl = function (tileName, data) {
    var templateHtml = $('#' + tileName).html();
    if (data != null) {
        var compiledTemplate =
           Handlebars.compile(templateHtml);
        return compiledTemplate(data);
    }
    else {
        return templateHtml;
    }
}











    

    

    

    

    



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



raphael('AccountPositionsSVG', 500, 420)
  .pieChart(scene.width / 2,
            scene.height / 4 + 10,
            66, values, labels, "#fff");







<video id="VideoPlayer" controls preload="auto"
       poster="/content/images/video-poster.jpg">
    <source type="video/mp4"
      src="http://.../markets_320k.mp4" />
</video>



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








    




    
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

Editor's Notes

  • #7 Uses standards-based CSS
  • #8 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.
  • #9 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.