Single-Page Application with ASP.NET & jQuery Hands-On
4.5 (445 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,120 students enrolled

Single-Page Application with ASP.NET & jQuery Hands-On

Learn how to build a single-page application from start to finish with ASP.NET Web API 2, Entity Framework and jQuery.
4.5 (445 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,120 students enrolled
Created by Patrick God
Last updated 8/2017
English [Auto]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Building a basic single-page application
  • Front end development with HTML, CSS and jQuery
  • Back end development with Web API 2, Entity Framework and SQL Server
  • Building a restful web service with Web API 2
  • Calling a restful web service with jQuery and Ajax
  • Entity Framework Code First Migrations
  • Saving data persistently with Entity Framework and SQL Server
  • Publishing your single-page application with Internet Information Services (IIS) on a Windows Server
Course content
Expand all 50 lectures 03:28:13
+ Introduction, Theory & Tools
3 lectures 10:30

Welcome to the course! Here's an overview of all the contents you will find during the lectures.

Preview 03:30

In this lecture you will learn the structure of a single-page application. What is the essence of a SPA and how do front end and back end work together?

Preview 05:32

A short overview of the necessary tools for this course. Every product is available for free.

Preview 01:28
+ Building the front end - HTML, CSS & jQuery
12 lectures 01:05:53

We start the front end by creating a new web application project in Visual Studio.

Preview 02:59

In this lecture we will start with the first view of the single-page application.

Preview 03:51

It's time for the second view and making the HTML and CSS code for our entrance complete.

Some more HTML & CSS

We have to add jQuery to our project before we start with the JavaScript code.

Let’s write some JavaScript code with jQuery

It's time to create a new shopping list with JavaScript.

Preview 10:20

Let's have a deeper look at the DOM elements of our single-page application.

DOM inspection
Add items to the list
Checking and deleting items

Adding the ID of a shopping list into the address bar should load it. We'll cover that in this lecture.

Load a list on startup by ID

After this lecture, you don't have to use your mouse to create lists and add items. We will make the user's life easier.

Improving usability
+ Adding the Web Service - ASP.NET Web API
20 lectures 01:07:31

A single-page application uses the Model-View-Controller pattern. In this lecture you will learn what this actually means.

Model-View-Controller pattern

We create our C# classes for shopping lists and the corresponding items.

Adding the models

The shopping list controller will be added in this lecture.

Controllers & CRUD

We write our first HTTP GET method.

Preview 04:15

It's time to communicate with the back end. We implement the HTTP request in the front end.

HTTP GET - The AJAX call

Before the communication works, we have to make a little change in the Web API configuration.

JSON serialization
Error handling & testing
HTTP POST - Create a new shopping list
HTTP POST - The client part

Let's have a deeper look underneath. What happens after an HTTP request and why does Web API know what method it should use?

Networking & routing

It's time for the shopping list items.

Add item controller
Add items to a list - another POST request
Add items to a list - The client part
HTTP PUT - Check items off
HTTP PUT - The client part (1)
HTTP PUT - The client part (2)
HTTP DELETE - Remove items from a list
HTTP DELETE - The client part

A short quiz to test your knowledge about the web service.

Web Service Quiz
5 questions
+ Persistence with Entity Framework
10 lectures 47:48

We add the new controllers with actions using Entity Framework.

Preview 04:34

With code first migration our models will be mapped to database tables. You learn the necessary steps in this lecture.

Code first migration
HTTP GET - Receive a shopping list from the database
HTTP POST - Create a shopping list

So far we could not use the back button of our browser if we wanted to create another shopping list. It's time to change that.

Manipulating the browser history
HTTP POST - Add items to a list
HTTP PUT - Check items off
HTTP DELETE - Remove items from a list
+ Publish
5 lectures 16:31
Introduction & preparation

In this lecture we create a new user and a new database for the single-page application.

Create a new database with SQL Server Management Studio

With the help of IIS Manager we will prepare our single-page application for web deployment.

Web Deploy with Internet Information Services (IIS)

It's finally time to publish our single-page application to the web.

Publish with Visual Studio

You made it! Congratulations! Have a look at all the things you have accomplished.

  • Visual Studio 2017 Community Edition (free!)
  • SQL Server Express Edition (also free!)
  • Other versions of Visual Studio also work, but might be slightly different
  • You should have a little experience in building web applications in .NET
  • You should have a little experience in C#, HTML and CSS
  • Experience with JavaScript and jQuery might help but is not absolutely necessary
  • If you want to publish your single-page application, you need a Windows Server system (a virtual machine is sufficient)

Single-page applications are the way to go if you want to build state-of-the-art web applications. But if you look around, there are so many big frameworks out there that just seem to take ages to learn. Guess what, you don’t need a framework like Angular to build single-page apps. Plain JavaScript and jQuery do the trick and more importantly, you have to build a fast and reliable back end. And that’s what you will learn in this course.

The single-page app you will build in this course is a shopping list application that uses every CRUD operation with HTTP requests, calling a RESTful web service - using ASP.NET Web API 2 - which saves your data persistently in a SQL Server database.

Make yourself ready to learn some jQuery, HTML and CSS for the front end. And for the back end you will use Microsoft's ASP.NET Web API 2 for the RESTful web service and Entity Framework with Code First Migrations to communicate with the database.

On top of that you will learn how to publish your single-page app to Internet Information Services (IIS) so that everyone can access your new single-page application.

Patrick, the author of this course, has built several web applications professionally as freelancer and employee and over the years he learned many things that you just don’t have to do to succeed in building a single-page application. This course will save you time, because you will learn the crucial and most important parts quick, so that you can get your single-page app out there in no time!

Sound’s good? Let’s get started!

What kind of single-page application will be built?

During this course you will learn how to build a complete single-page application by building a simple shopping list web application - an app that comes in quite handy for almost everybody. In this web application the user will start by creating a new shopping list. After that she will be able to add items to her list, check them off and delete them. If the user wants to access a certain shopping list, she can do so by adding the id of the list in the URL - which will be delivered by your web app, of course. That way the user is able to create the list at her computer and open it afterwards with her smartphone when she is actually in the grocery store.

What technology is used for the front end?

There are so many frameworks out there that you simply don't need or are just too big to start learning how to build single-page applications. In this course you will learn the basics that you will also need to know when you want to understand how frameworks like Angular work. Because when you start with Angular for example, you might get results sooner or later, but maybe you won't know what actually happens under the hood

In this hands-on course you will learn and understand the essence of single-page applications by using the following technologies:

  • HTML - You will build the application like any other website with plain old HTML.

  • CSS - To change the appearance of the application you will use a little cascading style sheets.

  • JavaScript - The foundation of every single-page application framework is JavaScript. You won't learn the whole language, of course, but you will know how to use JavaScript for your web application.

  • jQuery - To make things a bit easier and quicker, you will use the most famous JavaScript library jQuery.

  • Ajax - With the help of jQuery and Ajax you will make the actual calls to the web service which returns data from the database.

What technology is used for the back end?

The back end or server side will be implemented with .NET technologies. You will need a RESTful web service you will call from the front end, a framework that maps your C# models or classes to database tables and of course a database. The following technologies will be used for that matter:

  • ASP.NET Web API 2 - It's the state-of-the-art framework that helps you build HTTP services easily. With Web API 2 you will build a RESTful web service that enables the front end (or any other client you want to reach in the future) to make all CRUD (create, read, update, delete) operations by using GET, POST, PUT and DELETE HTTP requests.

  • Entity Framework - An object-relational mapping (ORM) framework that allows you to map your C# models with actual database tables. This part is crucial to save your data persistently.

  • SQL Server - At first the database you will use in this course is a file that will be generated by Visual Studio. But later on, especially when you want to publish your app to IIS and make it available to the world, you will use a SQL Server database.

So far for the server-side. Don't worry, every technology is available for free!

What tools do I need?

The entire course uses the Microsoft stack to develop the single-page application - apart from the browser, which is Google Chrome. The following tools will be used and are totally free:

  • Visual Studio 2017 Community Edition - Most of the time you will develop the application in Visual Studio. It might help if you already know this IDE. Older versions of Visual Studio also work.

  • SQL Server Express Edition - This will be your database. The Express Edition is available for free and absolutely suits your needs.

  • SQL Server Management Studio - This application is perfect to manage your database. Don't worry, you will learn how to use it step by step in this course.

  • Google Chrome - As mentioned above, during this course Google Chrome and its developer tools will be used to access the web application. But any other browser with developer tools available will also do the trick. This means you can also use Firefox, of course. Even Internet Explorer would work... but honestly, it's not recommended.

  • Internet Information Services (IIS) - Not really a tool for developing the application but for publishing it. If you have no access to IIS you can still follow the steps of publishing and use the results later on with a Microsoft Hyper-V Server for free! Everything is taught in the lectures.

Why should I pay for this course although there are so many free tutorials available?

A good question! Indeed there are lots and lots of tutorials available online that might get you the information you are looking for. The advantage of this course is that you will get this one big package out-of-the-box. You will see every single step from start to finish on how to build your single-page application. Starting from the front end, then building the perfectly fitting solution for the back end and even publishing it on a server. You can't miss anything, because you're able to watch the whole development process. And if something is still unclear, you can always ask a question in the forums. And if you are still not happy you can get your money back - no questions asked.

Who this course is for:
  • Students who want to learn how a basic single-page application works
  • Students who want to learn how the front end of a single-page application can be built with HTML, CSS and jQuery
  • Students who want to learn how the back end of a single-page application can be built with Web API 2 and Entity Framework
  • Students who want to save data of a single-page application persistently with Entity Framework and SQL Server
  • Students who want to publish their web applications with Internet Information Services (IIS)