You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: HOL/AspNetApiSpa/README.md
+16-16
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
-
<aname="HOLTop" />
1
+
<aname="HOLTop"></a>
2
2
# ASP.NET MVC 6 and Single-Page Applications (SPAs) #
3
3
4
4
---
5
5
6
-
<aname="Overview" />
6
+
<aname="Overview"></a>
7
7
## Overview ##
8
8
9
9
In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. In subsequent interactions with the page (e.g. the user navigates to a link or submits a form with data) a new request is sent to the server, and the flow starts again: the server processes the request and sends a new page to the browser in response to the new action requested by the client.
@@ -15,7 +15,7 @@ The architecture of a SPA involves certain challenges that are not present in tr
15
15
In this hand-on lab, you will take advantage of those technologies to implement Geek Quiz, a trivia website based on the SPA concept. You will first implement the service layer with ASP.NET Web API to expose the required endpoints to retrieve the quiz questions and store the answers. Then, you will build a rich and responsive UI using AngularJS 2 and CSS3 transformation effects.
16
16
17
17
18
-
<aname="Objectives" />
18
+
<aname="Objectives"></a>
19
19
### Objectives ###
20
20
In this hands-on lab, you will learn how to:
21
21
@@ -34,7 +34,7 @@ The following is required to complete this hands-on lab:
34
34
35
35
> **Note:** You can take advantage of the [Visual Studio Dev Essentials](https://www.visualstudio.com/en-us/products/visual-studio-dev-essentials-vs.aspx) subscription in order to get everything you need to build and deploy your app on any platform.
36
36
37
-
<aname="Setup" />
37
+
<aname="Setup"></a>
38
38
### Setup ###
39
39
In order to run the exercises in this hands-on lab, you will need to set up your environment first.
40
40
@@ -44,7 +44,7 @@ In order to run the exercises in this hands-on lab, you will need to set up your
44
44
45
45
> **Note:** Make sure you have checked all the dependencies for this lab before running the setup.
46
46
47
-
<aname="CodeSnippets" />
47
+
<aname="CodeSnippets"></a>
48
48
### Using the Code Snippets ###
49
49
50
50
Throughout the lab document, you will be instructed to insert code blocks. For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2015 to avoid having to add it manually.
@@ -53,7 +53,7 @@ Throughout the lab document, you will be instructed to insert code blocks. For y
53
53
54
54
---
55
55
56
-
<aname="Exercises" />
56
+
<aname="Exercises"></a>
57
57
## Exercises ##
58
58
This hands-on lab includes the following exercises:
59
59
@@ -67,14 +67,14 @@ Estimated time to complete this lab: **60 minutes**
67
67
>**Note:** ASP.NET Core 1.0 was previously called ASP.NET 5. The product rename occurred on January 19, 2016; additional details explaining why this was done are in [this blog post](http://www.hanselman.com/blog/ASPNET5IsDeadIntroducingASPNETCore10AndNETCore10.aspx) by Scott Hanselman with additional detail in [this post](https://blogs.msdn.microsoft.com/webdev/2016/02/01/an-update-on-asp-net-core-and-net-core/) on the Web Dev team blog.
68
68
>This change will be reflected in the Visual Studio 2015 project templates in the RC2 release. Until then, you'll still see reference to "ASP.NET 5" in the Visual Studio dialogs, new project readme content, and home page content.
69
69
70
-
<aname="Exercise1" />
70
+
<aname="Exercise1"></a>
71
71
### Exercise 1: Creating an API ###
72
72
73
73
One of the key parts of a SPA is the service layer. It is responsible for processing the Ajax calls sent by the UI and returning data in response to that call. The data retrieved should be presented in a machine-readable format in order to be parsed and consumed by the client.
74
74
75
75
The Web API framework is part of the ASP.NET Stack and is designed to make it easy to implement HTTP services, generally sending and receiving JSON- or XML-formatted data through a RESTful API. In this exercise you will create the Web site to host the Geek Quiz application and then implement the back-end service to expose and persist the quiz data using ASP.NET Web API.
76
76
77
-
<aname="Ex1Task1" />
77
+
<aname="Ex1Task1"></a>
78
78
#### Task 1 - Creating the Initial Project for Geek Quiz ####
79
79
80
80
In this task you will start creating a new ASP.NET MVC project with support for ASP.NET Web API based on the **One ASP.NET** project type that comes with Visual Studio. **One ASP.NET** unifies all ASP.NET technologies and gives you the option to mix and match them as desired. You will then add the Entity Framework's model classes and the database initializator to insert the quiz questions.
@@ -214,7 +214,7 @@ In this task you will start creating a new ASP.NET MVC project with support for
214
214
</div>
215
215
````
216
216
217
-
<aname="Ex1Task2" />
217
+
<aname="Ex1Task2"></a>
218
218
#### Task 2 - Creating the TriviaController API ####
219
219
220
220
In the previous task, you created the initial structure of the Geek Quiz web application. You will now build a simple API service that interacts with the quiz data model and exposes the following actions:
@@ -431,7 +431,7 @@ You will use the ASP.NET Scaffolding tools provided by Visual Studio to create t
431
431
// ...
432
432
````
433
433
434
-
<aname="Ex1Task3" />
434
+
<aname="Ex1Task3"></a>
435
435
#### Task 3 - Running the Solution ####
436
436
437
437
In this task you will verify that the API service you built in the previous task is working as expected. You will use the Microsoft Edge **F12 Developer Tools** to capture the network traffic and inspect the full response from the API service.
@@ -496,12 +496,12 @@ In this task you will verify that the API service you built in the previous task
496
496
497
497
1. Go back to Visual Studio and press **SHIFT + F5** to stop debugging.
498
498
499
-
<aname="Exercise2" />
499
+
<aname="Exercise2"></a>
500
500
### Exercise 2: Creating the SPA Interface ###
501
501
502
502
In this exercise you will first build the web front-end portion of Geek Quiz, focusing on the Single-Page Application interaction using **AngularJS 2**. You will then enhance the user experience with CSS3 to perform rich animations and provide a visual effect of context switching when transitioning from one question to the next.
503
503
504
-
<aname="Ex2Task1" />
504
+
<aname="Ex2Task1"></a>
505
505
#### Task 1 - Creating the SPA Interface Using AngularJS 2 ####
506
506
507
507
In this task you will use **AngularJS 2** to implement the client side of the Geek Quiz application. **AngularJS 2** is an open-source JavaScript framework that augments browser-based applications with _Model-View-Controller_ (MVC) capability, facilitating both development and testing.
@@ -790,7 +790,7 @@ You will start by adding AngularJS 2 references. Then, you will create the contr
790
790
}
791
791
````
792
792
793
-
<aname="Ex2Task2" />
793
+
<aname="Ex2Task2"></a>
794
794
#### Task 2 - Running the Solution ####
795
795
796
796
In this task you will execute the solution using the new user interface you built with AngularJS 2 to answer some of the quiz questions.
@@ -821,7 +821,7 @@ In this task you will execute the solution using the new user interface you buil
821
821
822
822
1. Go back to Visual Studio and press **SHIFT + F5** to stop debugging.
823
823
824
-
<aname="Ex2Task3" />
824
+
<aname="Ex2Task3"></a>
825
825
#### Task 3 - Creating a Flip Animation Using CSS3 ####
826
826
827
827
In this task you will use CSS3 properties to perform rich animations by adding a flip effect when a question is answered and when the next question is retrieved.
@@ -935,7 +935,7 @@ In this task you will use CSS3 properties to perform rich animations by adding a
935
935
936
936
---
937
937
938
-
<aname="Summary" />
938
+
<aname="Summary"></a>
939
939
## Summary ##
940
940
941
941
By completing this hands-on lab you have learned how to:
@@ -950,4 +950,4 @@ By completing this hands-on lab you have learned how to:
950
950
951
951
- Use CSS3 transitions to perform animation effects
952
952
953
-
> **Note:** You can take advantage of the [Visual Studio Dev Essentials](https://www.visualstudio.com/en-us/products/visual-studio-dev-essentials-vs.aspx) subscription in order to get everything you need to build and deploy your app on any platform.
953
+
> **Note:** You can take advantage of the [Visual Studio Dev Essentials](https://www.visualstudio.com/en-us/products/visual-studio-dev-essentials-vs.aspx) subscription in order to get everything you need to build and deploy your app on any platform.
0 commit comments