Course 484:
Building an HTML5 End-to-End Web Application with
ASP.NET MVC 4, Entity Framework Code First, and jQuery

(5 days)


Course Description

This course provides an end-to-end look at building an HTML5 application using different technologies such as Entity Framework Code First, ASP.NET MVC, and jQuery. Throughout the course, you’ll see how different server-side and client-side technologies can be integrated to create a robust application that provides flexible data display options to end users.

Topics covered include data access with Entity Framework Code First, serving up HTML5 and JSON content using ASP.NET MVC and the ASP.NET Web API, jQuery DOM manipulation and event handling, HTML5 Boilerplate integration, the role of object literals in JavaScript, jQuery UI features, applying patterns to structure JavaScript code and make it more maintainable, as well as several HTML5 technologies including SVG, canvas, video, and more. You’ll also learn unit testing fundamentals and how to use testing functionality built into Visual Studio, as well as client-side testing practices that can be used to test JavaScript code using qUnit. If you’re looking for an “end-to-end” course that shows how different technologies can integrate, then this is the course for you. An example of the application that’s built is shown below.

484 outline

Learning Objectives

  • How to create reusable projects in Visual Studio
  • How to integrate NuGet packages into projects
  • Unit testing fundamentals
  • How to create a fakes assembly in Visual Studio
  • How JSON data can be served to clients using the ASP.NET Web API
  • Database generation techniques with Entity Framework Code First
  • The role of code first migrations for handling changes to models and tables
  • The role of Fluent Mappings in the DbContext class
  • Benefits of the Repository Pattern for data access
  • How HTML5 Boilerplate can be integrated into ASP.NET MVC layout pages
  • Key JavaScript patterns that can be used to structure code
  • jQuery Ajax features and how promises can be used to detect success or failure
  • jQuery UI drag/drop features
  • How JSON data can be bound to Handlebars templates to generate HTML on the client
  • JavaScript unit testing with qUnit
  • HTML5 technologies such as canvas and SVG
  • Much more…


  • This class is geared toward developers with existing experience building dynamic Web applications.
  • One or more years of experience working with Web technologies including JavaScript, CSS, and HTML.
  • One or more years of experience working with the C# language. To get the most out of this class, students should feel comfortable writing C# code.

Course Outline

1. Introduction to the Application Technologies

  • Introducing the Account at a Glance Application
  • Application Technology Overview
  • Project Structure
  • Using NuGet
  • Data Technologies
  • Lab: Creating the Application Projects

2. Unit Testing Fundamentals

  • Testing Terminology and Concepts
  • Introduction to Unit Testing
  • Creating Unit Test Projects
  • Writing Unit Tests
  • Running Unit Tests
  • Lab: Creating Unit Tests

3. Creating Model Classes

  • Creating Model Classes
  • Adding Validation Attributes
  • Schema Mapping Attributes
  • Lab: Creating Model Classes and Testing Validation

4. Creating the DbContext

  • The Role of DbContext
  • Creating a DbContext Class
  • Extending DbContext Functionality
  • Creating a Seed Class
  • Modifying a Database
  • Lab: Creating the DbContext Class

5. Creating Repository Classes

  • Repository Pattern Fundamentals
  • The Base Repository Interface and Class
  • Creating Repository Interfaces and Classes
  • Querying with LINQ and Lambdas
  • Querying with Repository Classes
  • Lab: Creating Repository Classes

6. Retrieving and Storing Distributed Data

  • Parsing XML Data with LINQ to XML
  • Creating a StockEngine Class
  • Calling Stored Procedures with EF Code First
  • Adding Repository Methods
  • Lab: Creating a StockEngine Class and Repository Methods

7. Creating ASP.NET MVC Controllers

  • Server-Side Technology Overview
  • Application Controllers
  • Customizing Routes
  • The ASP.NET Web API
  • Lab: Creating Controllers and Actions

8. Creating ASP.NET MVC Views

  • HTML5 Boilerplate and _Layout.cshtml
  • Working with ASP.NET MVC Views
  • Bundling CSS and JavaScript Files
  • Lab: Creating Views and Working with Bundles

9. Working with Dependency Injection

  • Dependency Injection Overview
  • Introduction to Unity
  • The ModelContainer Class
  • Using ASP.NET MVC’s Dependency Resolver
  • Refactoring the DataService Controller
  • Lab: Working with Dependency Injection

10. Client-Side Technologies

  • Client-Side Technology Overview
  • jQuery Fundamentals
  • Introduction to qUnit
  • Understanding JSON and Object Literals
  • JavaScript Patterns for Structuring Code
  • Lab: Using JavaScript Patterns, jQuery, and qUnit

11. Client-Side Templates

  • Application Scripts
  • Defining Tiles in scene.layoutservice.js
  • Creating Tiles in scene.statemanager.js
  • Creating Client-Side Templates
  • Rendering HTML into Tiles
  • Lab: Creating Tile Scripts and Templates

12. Retrieving JSON Data from the Server

  • jQuery Ajax Functions
  • Creating a Client-Side Data Service
  • Using Promises
  • Rendering JSON Data using Templates
  • Lab: Retrieving JSON Data and Rendering Tiles

13. HTML5 Technologies

  • Integrating HTML5 Video
  • Drawing with the HTML5 Canvas
  • Drawing with SVG
  • Lab: Integrating HTML5 Technologies

Please Contact Your ROI Representative to Discuss Course Tailoring!