HTML5 Line of Business Apps with Bootstrap, MVC4 and Web API

In this course you’ll learn to build a HTML5 line-of-business offline application using Entity Framework Code First, ASP.NET MVC 4, Web API, Bootstrap, Knockout.js and Underscore.js.
Course info
Rating
(727)
Level
Intermediate
Updated
Jun 13, 2013
Duration
4h 32m
Table of contents
Introduction
Creating Models and the Data Layer
Adding Membership Support
Building and Customizing the UI Layer
Building the Homes API Controller and Client-Side Data Service
Building the Homes List
Building the Add/Edit View
Implementing Offline Features
Handling Exceptions
Description
Course info
Rating
(727)
Level
Intermediate
Updated
Jun 13, 2013
Duration
4h 32m
Description

In this course you’ll learn to build a HTML5 line-of-business application that allows users to add data to the system even while the application is working in an offline context. You’ll see how to begin from scratch and use Entity Framework Code First to create a database based off model objects as well as maintain tables for the ASP.NET WebPages Simple Membership API. You’ll learn to build a Web API layer to expose the application’s data and secure aspects of the API using authentication and authorization rules. Further you’ll learn to build views using Bootstrap, Knockout.js, Underscore.js and HTML5 offline apps and validation APIs. Finally, you’ll see how to add ELMAH to the application in order to log exceptions and keep you informed of the health of your application.

About the author
About the author

Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.

More from the author
HTML5 Fundamentals
Beginner
3h 47m
Mar 3, 2017
jQuery: Getting Started
Beginner
1h 40m
Jun 3, 2015
More courses by Craig Shoemaker
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hello and welcome to Pluralsight's HTML5 Line-of-Business Apps with Bootstrap, MVC 4, and Web API. This is Craig Shoemaker and I'm glad you're here to join me to this end-to-end discussion of building an application that uses some of the latest HTML5 and Asp. Net APIs. In addition to the latest and greatest I'll also cover some of the cross-cutting concerns found in many line- of-business applications like authentication, authorization, client and server validation, exception management, and utility screens. Along the way I'll also point out some of the gotchas that are sure to help you speed up your development of HTML5 line-of-business applications. Well now seems like as good of time of any to take you through the application we'll be building so I'd like to introduce you to CodedHomes.

Building the Add/Edit View
In this module you'll learn to build the add-edit view, which is responsible for adding new homes into the system. This view will save data to the server using AJAX calls to the Web API and also uses Knockout to keep the view updated at all times. Also, you'll learn how to create a simple validation module, which uses the HTML5 validation API in conjunction with Bootstrap popovers to create a pleasant validation experience that is effective not only in desktop, but also mobile contexts as well. So the add-edit view is the next screen that we'll implement within CodedHomes. This view allows you to edit existing records, as well as add new items into the system. So here you will notice it is the same view, it is just now set up to create new home records. Now the validation is all hooked up in here. You notice when I tell the form to validate, it shows me all of required fields and even gives me a validation error message for the first field in the list that doesn't fulfill its validation rules. I'll go ahead and add a new home to the system (typing). And I can even upload a new image at this point. Now when I save changes, the new image is shown and the data is saved to the server. Now there are a lot of moving parts to building this screen so I want to start off just by focusing in on the validation utility module.

Handling Exceptions
It's an inevitability that things will go wrong during the life cycle of your application. In this module you'll learn how to include an external library called Elmah, which will trap exceptions and log all of that detailed information into SQL Server. But before I show you how to install Elmah within CodedHomes, first let me show you the types of admin screens that are available to you when the library is included within your application. Starting off with the home page, I'll come up to the root of the site and go to a path called Elmah. Now as I try to navigate to that path you'll notice that it's been secured. I have it set up so that only users that are in the admin role are able to have access to the Elmah route. So as I log in it'll take me over to the Elmah page and you can see that I have a detailed set of information on all the errors that I've encountered within the application. Now this is the same database that I've been running for quite a while do during development I've had a lot of errors, so this gives you an opportunity to see what it looks like in kind of a real-world scenario. As I drill in to one of the individual items, you get a reproduction of the error page that you might see during development time, giving you a full stacked trace and a trace of a number of different variables. There is a lot of information here and beyond just working with the database; I'll show you how you can log exceptions to XML files, automatically send that exception message to your inbox, and also trap errors that happen on the client so that you can send them to the server and manually log them with Elmah. So now I'll show you how to install Elmah within CodedHomes and set up SQL Server so that this information can be written in to its own independent database.