Web API 2 入門——使用ASP.NET Web API和Angular.js構建單頁應用程序（SPA）（谷歌翻譯）

時間  2019-11-09
標籤 web api 入門 使用 asp.net asp angular.js angular 構建 單頁 應用 程序 spa 谷歌 翻譯 欄目 HTML 简体版
原文   原文鏈接

在這篇文章中

  1. 概觀
  2. 演習
  3. 概要

由網絡營javascript

下載網絡營訓練包css

在傳統的Web應用程序中，客戶機（瀏覽器）經過請求頁面啓動與服務器的通訊。而後，服務器處理請求，並將頁面的HTML發送給客戶端。在與頁面的後續交互中，用戶導航到連接或提交帶有數據的表單 - 新的請求將發送到服務器，流程將再次啓動：服務器處理請求並將新頁面發送到瀏覽器迴應客戶要求的新動做。html

在單頁面應用程序（SPA）中，整個頁面在初始請求以後加載到瀏覽器中，但後續的交互經過Ajax請求進行。這意味着瀏覽器必須僅更新已更改的頁面部分; 沒有必要從新加載整個頁面。SPA方法減小了應用程序響應用戶操做所花費的時間，從而致使更流暢的體驗。前端

SPA的架構涉及傳統Web應用程序中不存在的某些挑戰。然而，像ASP.NET Web API這樣的新興技術，像AngularJS這樣的JavaScript框架和CSS3提供的新的樣式功能使得設計和構建SPA變得很是簡單。java

在這個動手實驗室，您將利用這些技術來實施基於SPA概念的雜事網站Geek Quiz。您將首先使用ASP.NET Web API實現服務層，以公開所需的端點，以檢索測驗問題並存儲答案。而後，您將使用AngularJS和CSS3轉換效果構建一個豐富和響應的UI。css3

全部示例代碼和代碼段都包含在Web Camps Training Kit中，可從http://aka.ms/webcamps-trainingkit獲取。git

概觀

 

目標

在這個動手實驗中，您將學習如何：angularjs

  • 建立一個ASP.NET Web API服務來發送和接收JSON數據
  • 使用AngularJS建立響應式UI
  • 經過CSS3轉換加強UI體驗

 

先決條件

完成此動手實驗室須要如下內容：github

 

創建

爲了在這個動手實驗室中運行練習，你須要首先設置你的環境。web

  1. 打開Windows資源管理器並瀏覽實驗室的「 源」文件夾。
  2. 右鍵單擊Setup.cmd，而後選擇以管理員身份運行，啓動安裝過程，該過程將配置您的環境並安裝本實驗的Visual Studio代碼片斷。
  3. 若是顯示「用戶賬戶控制」對話框，請確認該操做繼續。
注意

在運行安裝程序以前，請確保已經檢查了該實驗室的全部依賴項。

 

使用代碼片斷

在整個實驗室文檔中，將指示您插入代碼塊。爲方便起見，這些代碼大部分做爲Visual Studio代碼片斷提供，您能夠從Visual Studio 2013中訪問，以免手動添加。

注意

每一個練習都附有一個起始解決方案，位於練習的Begin文件夾中，可讓您獨立於其餘練習進行每項練習。請注意，在這些開始的解決方案中缺乏在練習期間添加的代碼段，而且在完成練習以前可能沒法正常工做。在練習的源代碼中，您還將找到一個包含Visual Studio解決方案的End文件夾，其中包含完成相應練習中的步驟所產生的代碼。您可使用這些解決方案做爲指導，若是您須要額外的幫助，當您經過這個動手實驗室。

 

演習

這個動手實驗室包括如下練習：

  1. 建立Web API
  2. 建立SPA界面

預計完成本實驗的時間：60分鐘

注意

當您第一次啓動Visual Studio時，您必須選擇一個預約義的設置集合。每一個預約義的集合都被設計爲匹配特定的開發風格，並肯定窗口布局，編輯器行爲，智能感知代碼片斷和對話框選項。本實驗中的過程描述了在使用「 常規開發設置」集合時在Visual Studio中完成給定任務所需的操做。若是您爲開發環境選擇不一樣的設置集合，那麼您應該考慮的步驟可能會有所不一樣。

 

練習1：建立Web API

SPA的關鍵部分之一是服務層。它負責處理由UI發送的Ajax調用，並響應於該調用返回數據。檢索的數據應以機器可讀格式呈現，以便客戶端進行解析和使用。

Web API框架是ASP.NET堆棧的一部分，旨在使HTTP服務變得容易，一般經過RESTful API發送和接收JSON或XML格式的數據。在本練習中，您將建立Web站點來託管Geek Quiz應用程序，而後實施後端服務，以使用ASP.NET Web API公開並保留測驗數據。

 

任務1 - 建立Geek測驗的初始項目

在此任務中，您將開始建立一個新的ASP.NET MVC項目，並支持基於Visual Studio附帶的一個ASP.NET項目類型的ASP.NET Web API 。一個ASP.NET統一了全部的ASP.NET技術，並提供了根據須要進行混合和匹配的選項。而後，您將添加實體框架的模型類和數據庫初始化器以插入測驗問題。

  1. 打開Visual Studio Express 2013 for Web，而後選擇File | 新項目...開始一個新的解決方案。

    建立新項目

    建立新項目

  2. 在「 新建項目」對話框中，在Visual C＃|下選擇ASP.NET Web應用程序 網頁標籤。確保選擇了.NET Framework 4.5，將其命名爲GeekQuiz，選擇位置，而後單擊肯定。

    建立一個新的ASP.NET Web應用程序項目

    建立一個新的ASP.NET Web應用程序項目

  3. 在「 新建ASP.NET項目」對話框中，選擇MVC模板並選擇Web API選項。此外，請確保「 身份驗證」選項設置爲「 我的用戶賬戶」。單擊肯定繼續。

    使用MVC模板建立一個新項目，包括Web API組件

    使用MVC模板建立一個新項目，包括Web API組件

  4. 在解決方案資源管理器中，右鍵單擊GeekQuiz項目的Models文件夾，而後選擇Add | 現有項...。

    添加現有項目

    添加現有項目

  5. 在「 添加現有項目」對話框中，導航到「 源/資產/模型」文件夾，而後選擇全部文件。單擊添加。

    添加模型資產

    添加模型資產

    注意

    經過添加這些文件，您將添加數據模型，Entity Framework的數據庫上下文和Geek Quiz應用程序的數據庫初始化程序。

    實體框架（EF）是一種對象關係映射器（ORM），它使您可以經過使用概念應用程序模型編程建立數據訪問應用程序，而不是直接使用關係存儲架構進行編程。您能夠在這裏瞭解有關實體框架的更多信息。

    如下是剛剛添加的類的描述：

    • TriviaOption：表示與測驗問題相關聯的單個選項
    • TriviaQuestion：表示一個測驗問題，並經過Options屬性公開相關選項
    • TriviaAnswer：表示用戶響應測驗問題選擇的選項
    • TriviaContext：表明實體框架的Geek Quiz應用程序的數據庫環境。該類派生自DContext，並公開表示上述實體的集合的DbSet屬性。
    • TriviaDatabaseInitializer：實現了繼承自CreateDatabaseIfNotExists的TriviaContext類的Entity Framework初始化器。此類的默認行爲是僅在不存在的狀況下建立數據庫，才能插入「 種子」方法中指定的實體。

  6. 打開Global.asax.cs文件並添加如下using語句。

    C＃ 
    using GeekQuiz.Models;

  7. 在Application_Start方法的開頭添加如下代碼，將TriviaDatabaseInitializer設置爲數據庫初始化程序。

    C＃ 
    public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { System.Data.Entity.Database.SetInitializer(new TriviaDatabaseInitializer()); AreaRegistration.RegisterAllAreas(); GlobalConfiguration.Configure(WebApiConfig.Register); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } }

  8. 修改Home控制器以限制對通過身份驗證的用戶的訪問。爲此，請打開Controllers文件夾中的HomeController.cs文件，並將Authorize屬性添加到HomeController類定義。

    C＃ 
    namespace GeekQuiz.Controllers { [Authorize] public class HomeController : Controller { public ActionResult Index() { return View(); } ... } }
    注意

    該受權過濾器檢查，看是否該用戶進行身份驗證。若是用戶未經過身份驗證，則返回HTTP狀態碼401（未經受權），而不調用該操做。您能夠在全局，控制器級別或單個操做級別應用過濾器。

  9. 您如今將自定義網頁的佈局和品牌。爲此，請在Views |中打開_Layout.cshtml文件 經過使用Geek Quiz替換My ASP.NET應用程序來共享文件夾並更新<title>元素的內容。

    CSHTML 
    <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - Geek Quiz</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head>

  10. 在同一個文件中，經過刪除關於和聯繫人連接並將主頁連接重命名爲播放來更新導航欄。另外，重命名應用程序名稱連接到Geek Quiz。導航欄的HTML應以下所示。

    CSHTML 
    <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Geek Quiz", "Index", "Home", null, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Play", "Index", "Home")</li> </ul> @Html.Partial("_LoginPartial") </div> </div> </div>

  11. 經過使用Geek Quiz替換「 個人ASP.NET應用程序」來更新佈局頁面的頁腳。爲此，請使用如下突出顯示的代碼替換<footer>元素的內容。

    HTML 
    <div class="container body-content"> @RenderBody() <hr /> <footer> <p>&copy; @DateTime.Now.Year - Geek Quiz</p> </footer> </div>

 

任務2 - 建立TriviaController Web API

在上一個任務中，您建立了Geek Quiz Web應用程序的初始結構。您如今將構建一個簡單的Web API服務，它與測驗數據模型進行交互，並公開如下操做：

  • GET / api / trivia：從測驗列表中檢索下一個問題，由認證用戶回答。
  • POST / api / trivia：存儲由驗證的用戶指定的測驗答案。

您將使用Visual Studio提供的ASP.NET腳手架工具爲Web API控制器類建立基準。

  1. 打開App_Start文件夾中的WebApiConfig.cs文件。該文件定義了Web API服務的配置，就像路由映射到Web API控制器操做同樣。

  2. 在文件開頭添加如下using語句。

    C＃ 
    using Newtonsoft.Json.Serialization;

  3. 將如下突出顯示的代碼添加到Register方法中，以全局配置Web API操做方法檢索的JSON數據的格式化程序。

    C＃ 
    public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Use camel case for JSON data. config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } }
    注意

    該CamelCasePropertyNamesContractResolver自動屬性名稱轉換爲駱駝的狀況下，這是在JavaScript屬性名稱的通常慣例。

  4. 在解決方案資源管理器中，右鍵單擊GeekQuiz項目的Controllers文件夾，而後選擇Add | 新搭建的項目......。

    建立一個新的腳手架物品

    建立一個新的腳手架物品

  5. 在「 添加腳手架」對話框中，確保在左側窗格中選擇了「 公共」節點。而後，在中央窗格中選擇Web API 2控制器 - 空模板，而後單擊添加。

    選擇Web API 2控制器空模板

    選擇Web API 2控制器空模板

    注意

    ASP.NET腳手架是ASP.NET Web應用程序的代碼生成框架。Visual Studio 2013包括用於MVC和Web API項目的預安裝代碼生成器。當您但願快速添加與數據模型交互的代碼，以減小開發標準數據操做所需的時間，您應該在項目中使用腳手架。

    腳手架過程還確保全部所需的依賴關係都安裝在項目中。例如，若是您從一個空的ASP.NET項目開始，而後使用腳手架來添加一個Web API控制器，則所需的Web API NuGet軟件包和引用將自動添加到您的項目中。

  6. 在「 添加控制器」對話框中，在「 控制器名稱」文本框中鍵入TriviaController，而後單擊「 添加」。

    添加Trivia控制器

    添加Trivia控制器

  7. 而後將TriviaController.cs文件添加到GeekQuiz項目的Controllers文件夾中，其中包含一個空的TriviaController類。在文件的開頭添加如下使用語句。

    （代碼片斷 - AspNetWebApiSpa - Ex1 - TriviaControllerUsings）

    C＃ 
    using System.Data.Entity; using System.Threading; using System.Threading.Tasks; using System.Web.Http.Description; using GeekQuiz.Models;

  8. 在TriviaController類的開頭添加如下代碼，以便在控制器中定義，初始化和處理TriviaContext實例。

    （代碼片斷 - AspNetWebApiSpa - Ex1 - TriviaControllerContext）

    C＃ 
    public class TriviaController : ApiController { private TriviaContext db = new TriviaContext(); protected override void Dispose(bool disposing) { if (disposing) { this.db.Dispose(); } base.Dispose(disposing); } }
    注意

    的處置的方法TriviaController調用處置所述的方法TriviaContext例如，這確保了在由所述上下文對象中使用的全部資源被釋放TriviaContext實例設置或垃圾收集。這包括關閉Entity Framework打開的全部數據庫鏈接。

  9. 在TriviaController類的末尾添加如下幫助方法。此方法從數據庫中檢索如下問題以由指定的用戶回答。

    （代碼片斷 - AspNetWebApiSpa - Ex1 - TriviaControllerNextQuestion）

    C＃ 
    private async Task<TriviaQuestion> NextQuestionAsync(string userId) { var lastQuestionId = await this.db.TriviaAnswers .Where(a => a.UserId == userId) .GroupBy(a => a.QuestionId) .Select(g => new { QuestionId = g.Key, Count = g.Count() }) .OrderByDescending(q => new { q.Count, QuestionId = q.QuestionId }) .Select(q => q.QuestionId) .FirstOrDefaultAsync(); var questionsCount = await this.db.TriviaQuestions.CountAsync(); var nextQuestionId = (lastQuestionId % questionsCount) + 1; return await this.db.TriviaQuestions.FindAsync(CancellationToken.None, nextQuestionId); }

  10. 將如下Get操做方法添加到TriviaController類中。此操做方法調用上一步中定義的NextQuestionAsync幫助器方法來檢索已驗證用戶的下一個問題。

    （代碼片斷 - AspNetWebApiSpa - Ex1 - TriviaControllerGetAction）

    C＃ 
    // GET api/Trivia [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); }

  11. 在TriviaController類的末尾添加如下幫助方法。該方法將指定的答案存儲在數據庫中，並返回一個布爾值，指示答案是否正確。

    （代碼片斷 - AspNetWebApiSpa - Ex1 - TriviaControllerStoreAsync）

    C＃ 
    private async Task<bool> StoreAsync(TriviaAnswer answer) { this.db.TriviaAnswers.Add(answer); await this.db.SaveChangesAsync(); var selectedOption = await this.db.TriviaOptions.FirstOrDefaultAsync(o => o.Id == answer.OptionId && o.QuestionId == answer.QuestionId); return selectedOption.IsCorrect; }

  12. 將如下Post操做方法添加到TriviaController類中。此操做方法將答案與通過身份驗證的用戶相關聯，並調用StoreAsync幫助程序方法。而後，它發送一個響應與由輔助方法返回的布爾值。

    （代碼段 - AspNetWebApiSpa - Ex1 - TriviaControllerPostAction）

    C＃ 
    // POST api/Trivia [ResponseType(typeof(TriviaAnswer))] public async Task<IHttpActionResult> Post(TriviaAnswer answer) { if (!ModelState.IsValid) { return this.BadRequest(this.ModelState); } answer.UserId = User.Identity.Name; var isCorrect = await this.StoreAsync(answer); return this.Ok<bool>(isCorrect); }

  13. 修改Web API控制器以經過將受權屬性添加到TriviaController類定義來限制對通過身份驗證的用戶的訪問。

    C＃ 
    [Authorize] public class TriviaController : ApiController { ... }

 

任務3 - 運行解決方案

在此任務中，您將驗證您在前一任務中構建的Web API服務是否按預期工做。您將使用Internet Explorer F12開發人員工具捕獲網絡流量並檢查Web API服務的完整響應。

注意

確保在Visual Studio工具欄上的「 開始」按鈕中選擇了Internet Explorer。

Internet Explorer選項

  1. 按F5運行解決方案。將在登陸頁面應該出如今瀏覽器中。

    注意

    當應用程序啓動時，默認的MVC路由被觸發，默認狀況下映射到HomeController類的Index操做。因爲HomeController僅限於通過身份驗證的用戶（請記住，您使用練習1中的Authorize屬性來修飾該類），而且尚未用戶認證，應用程序將原始請求重定向到登陸頁面。

    運行解決方案

    運行解決方案

  2. 單擊註冊以建立新用戶。

    註冊新用戶

    註冊新用戶

  3. 在註冊頁面中，輸入用戶名和密碼，而後單擊註冊。

    註冊頁面

    註冊頁面

  4. 應用程序註冊新賬戶，用戶被認證並從新定向到主頁。

    用戶進行身份驗證

    用戶進行身份驗證

  5. 在瀏覽器中，按F12打開「 開發人員工具」面板。按CTRL + 4或單擊網絡圖標，而後單擊綠色箭頭按鈕開始捕獲網絡流量。

    啓動Web API網絡捕獲

    啓動Web API網絡捕獲

  6. 在瀏覽器地址欄中的URL 附加api / trivia。您如今將從TriviaController中的Get操做方法檢查響應的詳細信息。

    經過Web API檢索下一個問題數據

    經過Web API檢索下一個問題數據

    注意

    一旦下載完成，系統將提示您對下載的文件進行操做。讓對話框打開，以便可以經過開發人員工具窗口來觀看響應內容。

  7. 如今你將檢查身體的反應。爲此，請單擊詳細信息選項卡，而後單擊響應正文。您能夠檢查下載的數據是否與具備對應於TriviaQuestion類的屬性選項（它是TriviaOption對象的列表），id和標題的對象。

    查看Web API響應體

    查看Web API響應體

  8. 返回到Visual Studio，而後按SHIFT + F5中止調試。

 

練習2：建立SPA界面

在本練習中，您將首先構建Geek Quiz的Web前端部分，重點介紹使用AngularJS的單頁應用程序交互。而後，您將經過CSS3加強用戶體驗，以執行豐富的動畫，並在從一個問題轉換到下一個問題時提供上下文切換的視覺效果。

 

任務1 - 使用AngularJS建立SPA接口

在這個任務中，您將使用AngularJS來實現Geek Quiz應用程序的客戶端。AngularJS是一個開放源碼的JavaScript框架，經過模型 - 視圖 - 控制器（MVC）功能來加強基於瀏覽器的應用程序，有助於開發和測試。

您將首先從Visual Studio的軟件包管理器控制檯安裝AngularJS。而後，您將建立控制器以提供Geek Quiz應用程序的行爲和使用AngularJS模板引擎呈現測驗問題和答案的視圖。

注意

有關AngularJS的更多信息，請參閱[http://angularjs.org/](http://angularjs.org/））。

  1. 打開Visual Studio Express 2013 for Web，並打開位於Source / Ex2-CreatingASPAInterface / Begin文件夾中的GeekQuiz.sln解決方案。或者，您能夠繼續在上一個練習中得到的解決方案。

  2. 從工具 | 打開包管理器控制檯 圖書館包裹經理。鍵入如下命令來安裝AngularJS.Core NuGet包。

    電源外殼 
    Install-Package AngularJS.Core
  3. 在解決方案資源管理器中，右鍵單擊GeekQuiz項目的腳本文件夾，而後選擇添加 新建文件夾。命名文件夾應用程序，而後按Enter鍵。

  4. 右鍵單擊剛剛建立的應用程序文件夾，而後選擇添加| JavaScript文件。

    建立一個新的JavaScript文件

    建立一個新的JavaScript文件

  5. 在「 指定項目名稱」對話框中，在「 項目名稱」文本框中鍵入quiz-controller，而後單擊「 肯定」。

    命名新的JavaScript文件

    命名新的JavaScript文件

  6. 在quiz-controller.js文件中，添加如下代碼來聲明和初始化AngularJS QuizCtrl控制器。

    （代碼片斷 - AspNetWebApiSpa - Ex2 - AngularQuizController）

    JavaScript的 
    angular.module('QuizApp', []) .controller('QuizCtrl', function ($scope, $http) { $scope.answered = false; $scope.title = "loading question..."; $scope.options = []; $scope.correctAnswer = false; $scope.working = false; $scope.answer = function () { return $scope.correctAnswer ? 'correct' : 'incorrect'; }; });
    注意

    QuizCtrl控制器的構造函數須要一個名爲$ scope的可注射參數。應在構造函數中經過將屬性附加到$ scope對象來設置範圍的初始狀態。屬性包含視圖模型，而且在註冊控制器時能夠訪問模板。

    所述QuizCtrl控制器被命名模塊中定義QuizApp。模塊是工做單元，能夠將您的應用程序分解成單獨的組件。使用模塊的主要優勢是代碼更容易理解，便於單元測試，可重用性和可維護性。

  7. 您如今將向做用域添加行爲，以便對從視圖觸發的事件做出反應。在QuizCtrl控件的末尾添加如下代碼，以定義$ scope對象中的nextQuestion函數。

    （代碼片斷 - AspNetWebApiSpa - Ex2 - AngularQuizControllerNextQuestion）

    JavaScript的 
    .controller('QuizCtrl', function ($scope, $http) { ... $scope.nextQuestion = function () { $scope.working = true; $scope.answered = false; $scope.title = "loading question..."; $scope.options = []; $http.get("/api/trivia").success(function (data, status, headers, config) { $scope.options = data.options; $scope.title = data.title; $scope.answered = false; $scope.working = false; }).error(function (data, status, headers, config) { $scope.title = "Oops... something went wrong"; $scope.working = false; }); }; };
    注意

    此函數從上一個練習中建立的Trivia Web API中檢索下一個問題，並將問題數據附加到$ scope對象。

  8. 在QuizCtrl控件的末尾插入如下代碼，以定義$ scope對象中的sendAnswer函數。

    （代碼片斷 - AspNetWebApiSpa - Ex2 - AngularQuizControllerSendAnswer）

    JavaScript的 
    .controller('QuizCtrl', function ($scope, $http) { ... $scope.sendAnswer = function (option) { $scope.working = true; $scope.answered = true; $http.post('/api/trivia', { 'questionId': option.questionId, 'optionId': option.id }).success(function (data, status, headers, config) { $scope.correctAnswer = (data === true); $scope.working = false; }).error(function (data, status, headers, config) { $scope.title = "Oops... something went wrong"; $scope.working = false; }); }; };
    注意

    此功能將用戶選擇的答案發送到Trivia Web API，並存儲結果，若是答案是否正確，則在$ scope對象中。

    上述的NextQuestion和sendAnswer函數使用AngularJS $ http對象經過瀏覽器中的XMLHttpRequest JavaScript對象抽象與Web API的通訊。AngularJS支持另外一種服務，它經過RESTful API爲資源執行CRUD操做提供了更高的抽象級別。AngularJS $資源對象具備提供高級行爲的操做方法，而不須要與$ http對象進行交互。考慮在須要CRUD模型的場景中使用$資源對象（前提信息，請參閱$資源文檔）。

  9. 下一步是建立定義測驗視圖的AngularJS模板。爲此，請在Views |中打開Index.cshtml文件 主文件夾，並用如下代碼替換內容。

    （Code Snippet - AspNetWebApiSpa - Ex2 - GeekQuizView）

    CSHTML 
    @{
    ViewBag.Title = "Play"; } <div id="bodyContainer" ng-app="QuizApp"> <section id="content"> <div class="container" > <div class="row"> <div class="flip-container text-center col-md-12" ng-controller="QuizCtrl" ng-init="nextQuestion()"> <div class="back" ng-class="{flip: answered, correct: correctAnswer, incorrect:!correctAnswer}"> <p class="lead">{{answer()}}</p> <p> <button class="btn btn-info btn-lg next option" ng-click="nextQuestion()" ng-disabled="working">Next Question</button> </p> </div> <div class="front" ng-class="{flip: answered}"> <p class="lead">{{title}}</p> <div class="row text-center"> <button class="btn btn-info btn-lg option" ng-repeat="option in options" ng-click="sendAnswer(option)" ng-disabled="working">{{option.title}}</button> </div> </div> </div> </div> </div> </section> </div> @section scripts { @Scripts.Render("~/Scripts/angular.js") @Scripts.Render("~/Scripts/app/quiz-controller.js") }
    注意

    AngularJS模板是一個聲明性規範，它使用模型信息和控制器將靜態標記轉換爲用戶在瀏覽器中看到的動態視圖。如下是能夠在模板中使用的AngularJS元素和元素屬性的示例：

    • 的NG-應用指令告訴AngularJS表明應用程序的根元素的DOM元素。
    • 在NG-控制器指令附加一個控制器在其中指令申報點的DOM。
    • 大括號符號{{}}表示綁定到控制器中定義的範圍屬性。
    • 的NG-點擊指令用於調用響應於用戶點擊在範圍中定義的功能。

  10. 打開Content文件夾中的Site.css文件，並在文件末尾添加如下突出顯示的樣式，以提供測驗視圖的外觀。

    （代碼片斷 - AspNetWebApiSpa - Ex2 - GeekQuizStyles）

    CSS 
    .validation-summary-valid { display: none; } /* Geek Quiz styles */ .flip-container .back, .flip-container .front { border: 5px solid #00bcf2; padding-bottom: 30px; padding-top: 30px; } #content { position:relative; background:#fff; padding:50px 0 0 0; } .option { width:140px; margin: 5px; } div.correct p { color: green; } div.incorrect p { color: red; } .btn { border-radius: 0; } .flip-container div.front, .flip-container div.back.flip { display: block; } .flip-container div.front.flip, .flip-container div.back { display: none; }

 

任務2 - 運行解決方案

在此任務中，您將使用您使用AngularJS構建的新用戶界面來執行解決方案，以回答一些測驗問題。

  1. 按F5運行解決方案。

  2. 註冊一個新的用戶賬號。爲此，請按照練習1，任務3中所述的註冊步驟進行操做。

    注意

    若是您使用上一個練習中的解決方案，您可使用以前建立的用戶賬戶登陸。

  3. 該主頁頁面應該出現，顯示了測驗的第一個問題。經過單擊其中一個選項來回答問題。這將觸發先前定義的sendAnswer函數，該函數將選定的選項發送到Trivia Web API。

    回答一個問題

    回答一個問題

  4. 點擊其中一個按鈕後，應該會出現答案。單擊下一個問題以顯示如下問題。這將觸發控制器中定義的nextQuestion函數。

    請求下一個問題

    請求下一個問題

  5. 下一個問題應該出現。繼續屢次回答問題。完成全部問題後，您應該回到第一個問題。

    另外一個問題

    下一個問題

  6. 返回到Visual Studio，而後按SHIFT + F5中止調試。

 

任務3 - 使用CSS3建立翻轉動畫

在這個任務中，您將使用CSS3屬性來執行豐富的動畫，經過在問題回答和下一個問題被檢索時添加翻轉效果。

  1. 在解決方案資源管理器中，右鍵單擊GeekQuiz項目的「 內容」文件夾，而後選擇「 添加」 現有項...。

    將現有項目添加到「內容」文件夾

    將現有項目添加到「內容」文件夾

  2. 在「 添加現有項目」對話框中，導航到「 源/資源」文件夾，而後選擇「 Flip.css」。單擊添加。

    從資產添加Flip.css文件

    從資產添加Flip.css文件

  3. 打開剛剛添加的Flip.css文件並檢查其內容。

  4. 找到翻轉變換註釋。該評論下方的樣式使用CSS 透視圖和rotateY轉換來生成「卡片翻轉」效果。

    CSS 
    /* flip transformation */ .flip-container div.front { -moz-transform: perspective(2000px) rotateY(0deg); -webkit-transform: perspective(2000px) rotateY(0deg); -o-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); } .flip-container div.front.flip { -moz-transform: perspective(2000px) rotateY(179.9deg); -webkit-transform: perspective(2000px) rotateY(179.9deg); -o-transform: perspective(2000px) rotateY(179.9deg); transform: perspective(2000px) rotateY(179.9deg); } .flip-container div.back { -moz-transform: perspective(2000px) rotateY(-180deg); -webkit-transform: perspective(2000px) rotateY(-180deg); -o-transform: perspective(2000px) rotateY(-180deg); transform: perspective(2000px) rotateY(-180deg); } .flip-container div.back.flip { -moz-transform: perspective(2000px) rotateY(0deg); -webkit-transform: perspective(2000px) rotateY(0deg); -ms-transform: perspective(2000px) rotateY(0); -o-transform: perspective(2000px) rotateY(0); transform: perspective(2000px) rotateY(0); }

  5. 在翻蓋評論期間找到窗格的隱藏。經過將背景可見性 CSS屬性設置爲隱藏，該註釋下方的樣式經過將背面可見性 CSS屬性設置爲隱藏，從而隱藏了面部背面的背面。

    CSS 
    /* hide back of pane during flip */ .front, .back { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

  6. 打開App_Start文件夾中的BundleConfig.cs文件，並將引用添加到「〜/ Content / css」樣式包中的Flip.css文件

    C＃ 
    bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/Flip.css"));
  7. 按F5運行解決方案並使用憑據登陸。

  8. 經過點擊其中一個選項來回答問題。注意在視圖之間轉換時的翻轉效果。

    回答一個具備翻轉效果的問題

    回答一個具備翻轉效果的問題

  9. 單擊下一個問題以檢索如下問題。翻轉效果應再次出現。

    使用翻轉效果檢索如下問題

    使用翻轉效果檢索如下問題

 

概要

經過完成這個動手實驗，你已經學會了如何：

  • 使用ASP.NET腳手架建立一個ASP.NET Web API控制器
  • 實施Web API獲取操做以檢索下一個測驗問題
  • 實施Web API Post操做來存儲測驗答案
  • 從Visual Studio包管理器控制檯安裝AngularJS
  • 實施AngularJS模板和控制器
  • 使用CSS3轉換來執行動畫效果
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程