Single Page Application (SPA) with ASP.NETのHands On Labでつまったところ

夏休みの宿題で以下のサイトを参考にASP.NETのSingle Page Application(SPA)の勉強をしました。
その時、サイト情報のままだと動かない箇所が何点かありました。どのように修正したかのメモです。
AngularJSは今回はじめて触りました。

#勉強の参考にしたサイト
[Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js](https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs)

####実施した環境
Visual Studio Enterprise 2017

####必要なコードの入手

http://aka.ms/webcamps-training-kit.

上記サイトの以下exeを取得

![image.png](https://qiita-image-store.s3.amazonaws.com/0/232585/773382c6-1ca1-1879-5147-39239d74fb22.png)

exeをダウンロードして実行するとソースなどが一式展開される。
ソースは以下のフォルダにある。
\HOL\AspNetApiSpa

####Setup
「Setup」を実施してみるが、実行に失敗する。
とりあえず無視して先に進む。

#Excercises
以下2つを順番に実施
1. Creating a Web API
1. Creating a SPA Interface

サイトの記載から変更したところ、つまったところのみを記載しています。

##1.Creating a Web API

1.プロジェクトの作成
.Net Framewrokを選択する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/232585/639dbf61-793f-af41-c00d-554908148340.png)

MVCを選択し、Web APIにチェック、認証は「個別のユーザアカウント」を選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/232585/85a0e11f-3c94-b69e-48ab-a8e41ae0d75f.png)

最後まで実施して、プロジェクトを実行する。
「api/trivia」をURLの後に追加してAPIの呼び出しを行う。
APIからの戻り値がおかしいようでエラーが発生した。
TriviaController.csを変更することで動くようになった。

```c#

        [ResponseType(typeof(TriviaQuestion))]
        public async Task<IHttpActionResult> Get()
        {
            var userId = User.Identity.Name;

            TriviaQuestion nextQuestion = await this.NextQuestionAsync(userId);

            if (nextQuestion == null)
            {
                return this.NotFound();
            }

            //return this.Ok(nextQuestion);//変更前
            return Json(nextQuestion);//変更後
        }
```
##2.Creating the SPA Interface

アニメーションの手前（Step 10）まで一通り実施し、プロジェクトを実行すると
「loading question..」だけが表示され、サイトのような画面は表示されない。
quiz-controller.jsの`$http.get`を以下に修正することでQuestionは表示されるようになった。
修正ポイントは以下2つ。

- `$http.get("/api/trivia").success`のsuccessでExceptionが発生していた。
　もう使用されていないらしい。successを`.then`に変更。
　[参考にしたサイト](https://www.w3schools.com/angular/angular_http.asp)

- 変数名を大文字に修正

```js
$http.get("/api/trivia").then(function (response) {

     $scope.options = response.data.Options; //大文字に変更
     $scope.title = response.data.Title; //大文字に変更
     $scope.answered = false;
     $scope.working = false;
});
````
Questionだけ表示された状態。Answerの選択肢が表示されていない。。。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/232585/dd72663a-2187-5e77-7016-9a61a7cada43.png)

Answerのオプションが表示されないのも大文字、小文字問題だった。
以下のように`option.title`を`option.Title`index.cshtmlを修正すると、回答オプションも表示されるようになった。

```html
<button class="btn btn-info btn-lg option" ng-repeat="option in options" ng-click="sendAnswer(option)" ng-disabled="working">{{option.Title}}</button>
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/232585/354491fa-1bef-ad1c-40a0-c26e134feb52.png)

Answerを選択後、結果と次のQuestionが表示されない。
quiz-controller.jsの`$http.post`を以下に修正することで正常に動作するようになった。
修正ポイントは`$http.get`の時と同様。

```js
$http.post("/api/trivia", { 'QuestionId': option.QuestionId, 'OptionId': option.Id}).then(function mySuccess(response) {

 $scope.correctAnswer = (response.data === true);
 $scope.working = false;

}, function myError(response) {

 $scope.title = "Oops... something went wrong";
 $scope.working = false;
});
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/232585/188d7663-2bd8-124c-cb0a-7236e084c40f.png)

##補足

プロジェクトを実行すると自動的にDBが作成される。
DBは[表示]→[SQL Serverオブジェクトエクスプローラー]を開くと確認できる。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.amazonaws.com/0/232585/a0c894a2-c481-b4a3-9384-3d7e65e34f30.png">

![image.png](https://qiita-image-store.s3.amazonaws.com/0/232585/073a8c95-e1ad-2de9-b624-d1b491e9339f.png)