你是否也曾疑惑,學會了 ASP.NET Core / ASP.NET 5 的 MVC 之後,能應用在什麼地方呢?為什麼學了這麼多,卻寫不出像樣的成果?
本課程特別實作一個 「網路購物商城」 範例,讓學員從線上網站的實務中,拆解每個功能與步驟。本範例搭配微軟 SQL Server 的 AdventureWorksLT 範例資料庫,剛好可以整合「產品、訂單明細表、客戶」三個關連式資料表的應用,做出一個具體而微的網路購物商城。
以「網路購物商城」為主題,讓大家以「快速升級」的熟悉感,從 .NET Framework (完整版)的 ASP.NET MVC 5 輕鬆換成 .NET Core MVC (開源版、跨平台版)也就是 ASP.NET 5。
再次強調:只要您學過 MVC 入門三天課程,本課程讓您「快速升級 .NET Core / ASP.NET 5」絕非「砍掉重練」。 14 個主題加上 4 個回家作業,另有一個補充教材。只要您願意學、願意親自動手練習,一定能寫出自己專屬的作品。
很多上過課、買書自修的朋友,常常發現自己學到很多基礎技巧,但合併起來卻做不出任何東西?想寫一個專題卻無處下手,充滿無力感。
這門課將會介紹購物網站的常見功能,不管是(1) 網站首頁的主表明細(Master-Detail)、(2) 關鍵字搜尋、(3)大量數據的分頁展示。更搭配 (3)檔案上傳(FileUpload)將圖片以二進位存入資料表,再透過程式還原並展示在網頁上。(4) 會員登入與管理,採用了微軟推薦的 CalimsIdentity,讓您可以區分網站的前後台。(5)也有 WebAPI 的簡單示範。各項功能一應俱全。
重點是課程最後的「一對多」關聯式的訂單與購物車,不管是後台管理區的報表呈現,或是前台的採購行為,這些務實的購物網站功能,不但讓您重新複習各種基本招式,更能恍然大悟「喔!原來這麼多功能,都是三個基本招數變化而來啊」。這門課不光是讓您觀摩而已,更要讓您開竅,讓您真的能整合運用,寫出一個完整的專題。證明自己學到的東西,都能千變萬化。
課程介紹與目標學員的基礎能力。 在您進入課程之前,請先評估自己的能力。建議已經完成前三天 ASP.NET MVC 入門課程的學員,參與本課程才能真正學到經驗。這是一個簡化的課程,透過拆解一個網路購物商城,為您解說各種功能,對應您以前學過的招式。對於已經入門 ASP.NET Core / ASP.NET 5 MVC 的學員來說,是一種挑戰也是一種複習。
先介紹「 網路購物商城 」會用到的資料表架構與特點。這個專案會把上傳的圖檔存入資料表,所以用到了一些特別的設定。本範例搭配微軟 SQL Server 的 AdventureWorksLT 範例資料庫,剛好可以整合「產品、訂單明細表、客戶」三個關連式資料表的應用 。
安裝必要的 NuGet 套件,例如:Entity Framework Core。透過 Scaffold-DbContext 指令將資料庫轉換成 Context,並把資料表逐一對應為 ViewModel、類別檔。要存放二進位的資料表欄位,變成類別檔會是怎樣的資料型態。
網站首頁的主表明細(Master-Detail)是第一個基本招式,最適合初學者入門。只要打好基礎,後續的變化都從這裡展開。List 範本與 IEnumerable
說明。Detail 範本的檢視畫面跟上一節的List範本有何差異?能夠學會這兩節的基本招式,將來對付一對多的關連式報表,就沒有問題。
提供一個家庭作業,讓老師陪著您一起完成,透過自己動手做,親自複習課程重點。本範例帶您瞭解一對多關連式資料表,購物網站的「產品種類(Product Category)」是怎麼區分大小種類?
「單一產品」的細部規格說明,如果搭配圖片一定更吸引人。因為 AdventureWorks 範例資料表將圖片存在資料表裡面,也實作 FileContent 如何將這些二進位的內容,還原成網頁圖片。
改用 WebAPI 做出上一個作業的相同功能,用最簡單的範例,讓您體驗「沒有畫面的 WebAPI 網頁程式」。因為 AdventureWorksLT 範例資料庫將圖片存在資料表裡面,如何將這些二進位的內容,還原成網頁圖片。
以 Google 為例,當您搜尋的關鍵字有上千筆紀錄時,您必須把搜尋結果分頁展示,每一頁展示二十筆記錄,一頁一頁呈現,才能縮減反應時間,減低網站負擔,所以「分頁」功能是每個網站必備的! 這不是坊間常用的套用現成元件,而且親自動手寫程式做出「分頁」。真正讓您學到原理也能動手做出來,才是程式設計師的基本功。
第三個基本招式,資料新增(Create)往往是初學者面臨 MVC 時最容易卡關的地方。如果您學會這一招,搭配前面的主表明細(Master-Detail、首頁的資料呈現),將來要改寫成「編輯」「刪除」都易如反掌。範例寫在 Shop3 控制器裡面。
上一節課的資料新增(Create)已經不簡單了,還要配檔案上傳(FileUpload)把圖片轉成二進位寫入資料表。而且在 .NET Core / ASP.NET 5 改用 IFormFile 來做,跟以前 .NET Framework 的 MVC5 小有差異。這門課剛好帶您學會這一招。
產品搜尋,以「關鍵字」進行模糊搜尋,是所有網站必備的基礎功能。哪一個網路購物商城不能搜尋產品呢?這個範例結合了「資料呈現」與「新增」這三個基本招式。如果您可以寫出站內搜尋,就具備基本能力。 補充教材 - HTML Form 表單的 Post 與 Get 有何差異? 在資料新增(Create)與 WebAPI 都會提到的 [HttpGet ]與 [HttpPost] 有何差異,這則補充教材可以為您解說。
.NET Core / ASP.NET 5 的會員登入,採用微軟推薦的 ClaimsIdentity (不使用 ASP.NET Core Identity 的 Cookie 驗證)。不需要學習繁瑣的功能,用最短的時間學好會員登入。我們先用一個簡單範例讓您瞭解 Authentication (驗證) / Authorization(授權)。
學會上一節的基本功以後,現在連結資料庫,讓您輸入帳號、密碼直接比對是否真有這名會員?他的權限多高,可以看見哪些網頁?還有 [Authorize] 的使用方式等等。
一對多的報表是每一個網站的後台管理區,老闆最常用到的功能。同時考驗初學者是否真的瞭解「一對多」關連式資料庫?是否可以靈活運用?很多初學者不是寫不出程式,而是看不懂 「一對多」關連式資料庫 。本範例產生的檢視畫面( List 範本 )無法直接套用就完成,還需自己動手改寫調整。非常適合初學者練習,藉此提升能力。
本範例是上一節的改版,也是加強練習。透過 Details 範本不同的寫法,考驗您是否真的瞭解?真的能做出變化? 本範例產生的檢視畫面,必須動手調整與改寫,不是直接套用 Details 範本就能完成。非常適合初學者練習,藉此提升能力。
本範例是前面兩節的改版,也是給您加強練習的回家作業。只要您願意親自動手做,體會其中的差異,就能學到更多技巧。
終於來到最後的「購物車」,一對多的關連式訂單。這個範例需要結合上面的各種技巧,所以我們先做一個「簡易版」購物車,以靜態的內容讓您瞭解原理作步驟。如果您可以掌握 EF Core 的技巧,成功新增一對多的訂單。下一節課才有機會「動態」加入各種選購產品。
客戶在畫面上掏選喜歡的產品,輸入數量並加入購物車。最後按下「付款結帳」的按鈕 , 把購物車裡面的預購商品,轉成「正式訂單」。這樣的功能並不容易,初學者如果能循序漸進的學習,本課程最後將融合前述的各項技巧,為您示範購物車與一對多的關連式訂單。千萬不要心急,跳著學習。唯有從頭到尾耐心學好每一招,您才能融會貫通。