ASP.NET MVC 教學 - 由入門到進階

預覽課程

課程創作： MIS2000 Lab.

課程適合地區：全球

課程影片總長度： 5.8小時

最後更新日期：2019-3-4

分享課程：

方案一

購買本課程

NT1,800

方案二

加購入門課

~~NT 4,300~~

NT3,500

課程介紹

相信當您完成了前三天的 ASP.NET MVC 入門課程後，對 MVC 的基本觀念與流程一定有更詳細的理解，那麼接下來兩天的課程將會有更為進階的內容，透過大量的練習範例從做中學，讓您不僅懂理論，更能知道如何實際動手執行。此外，本門課程中進階與補充的範例雖然不難，但都是針對已經完成入門班三天課程的學員所準備，建議學員依序學習，千萬不要躁進。

表單輸入與驗證（Validation）

圖一

圖二：程式執行以後的警告（必填的欄位、日期格式必須正確）

「驗證」算是一門獨自的課程，沒有前後關係。這些驗證的作法，以前 Web Form 也有類似的，大同小異。ASP.NET MVC 提供了內建的表單驗證與防呆。必填的欄位，您必須輸入。輸入格式是否正確，都可以進行驗證。這些內建的驗證，好學又簡單。完全不用寫程式就能過濾大部分的輸入數據。錯誤訊息也可由您決定並改寫，驗證機制十分靈活。

一個「線上相簿」的專案

學了這麼多功夫，不拿別人的專案來對照看看，怎麼知道自己學到的招式是否實用？源自微軟官方的線上相簿專案，您可以自行下載並觀摩這些功能，其中包含了檔案上傳（FileUpload），剛好補足入門班沒有學到的功能。

本範例的檔案上傳，將圖片檔（二進位內容）以 BLOB 的方式寫入資料表，這樣的寫法比較難。而且日後讀取二進位內容，並還原成原本圖片，都需要特殊寫法。但有了現成範例，直接學習就很輕鬆。這也是老師特別選用這個範例來教學的原因。

線上相簿的 UI 畫面也用上了「部分檢視（Partial View）」、「版面配置頁（_Layout）」，更搭配了一對多的關連式資料表。讓每一張照片底下都可以有多筆留言。這個範例內建 RWD 特效（網頁前端特效 - Bootstrap 套件，後續也會推出課程為您解說各種網頁的「前端特效」）。

課程特色

以實作優先：減少理論說明，大量練習範例，講求從做中學。
錯誤學習法：透過錯誤的範例從中學習，並找出自己的盲點。

ASP NET MVC PhotoSharing MIS2000Lab title

凡購買本課程與「ASP.NET MVC 教學 - 由零開始的入門課」兩課程的學員，即可獲得「ASP.NET MVC 線上相簿」 NT 2,800 元的超值優惠！

優惠代碼（購買後顯示）：

學員見證

課程綱要

單元一表單輸入與驗證（Validation）

ASP.NET MVC 的表單驗證機制
表單與驗證（防呆）
驗證，就從類別檔開始（Case Study）
課後複習
MVC 與 Model 的互動關係
以 Create（新增）為例（Case Study）
從「新增」的檢視畫面，做第一個驗證的範例
執行成果
課後複習 & ValidationSummary
Razor 的 Html.AntiForgeryToken
/ModelsValidation 目錄下的 UserTable 類別檔
複習與回顧（View 要笨、Controller 要輕、Model 要重）
Require 的用法
StringLength 與 Display 的用法
日期與驗證（關於 DataType）
DataType 列舉（System.ComponentModel.DataAnnotations 命名空間）
觀念思考：表單驗證是誰的責任？
Case Study，動手做
正規表達式（Regular Expression），手機號碼的驗證
Compare 的用法，密碼再次確認
Bind(Include...)，黑名單與白名單
MetadataType 驗證，把驗證規則抽離出來
Case Study，動手做（Model 類別檔）
回到控制器
複習與回顧

單元二 Case Study -- 一個「線上相簿」的專案

(1) 從 Models 目錄學起
初始化（Global.asax 與 Models 目錄下的 Initializer）
類別檔，對應 DB 裡面的每一個資料表
(2) 從 Controller 學起
資料庫的連結、Dispose()
Index 動作（首頁）
(3) Action、動作
自己修改首頁（Index 動作與檢視畫面）
分頁（_PhotoGallery 動作）
Details 動作（明細檔，察看某一筆記錄的內容）
Create 動作，新增一筆記錄
檔案上傳（FileUpload）的畫面與表單設定
檔案上傳後，寫入資料表（第二個 Create 動作）
將資料表的二進位內容（BLOB）轉成（輸出）圖片檔，呈現在網頁上
檔案上傳（FileUpload）的兩種寫法，比較與優劣
檢視畫面（View）
版面配置頁（/Views/Shared/_Layout）
補充教學
PartialView，部分檢視
搭配 Bootstrap (RWD 網頁設計)的 Album（相簿）樣版
Razor 的 HTML Helper 複習，DisplayNameFor 與 DisplayFor 有何差異？
RouteConfig 設定檔的小複習

學員上課後會學到什麼或能做什麼

瞭解 MVC 的基本觀念與流程。建立類別、屬性來描述您的物件、資料記錄。
瞭解資料庫的應用、常見的網頁系統（購物商城、媒體網站、部落格 Blog、社群網站）相關功能是如何開發的。
Visual Studio 開發工具、SQL Server（資料庫）Management Studio 的基本操作。
課程完成後，您將擁有一套簡單的網頁系統，可作為公佈欄、部落格 Blog 文章發表、產品說明與展示之用。
此網頁系統包含以下功能：資料管理（新增、刪除、修改）、關鍵字搜尋（多重條件的搜尋）、網站首頁（主表明細 Master-Detail 資料展示）、分頁展示...等等必備功能。

學員上課前需具備哪些軟、硬體設備或常識

基礎的程式設計能力，如 if 判別式、for / while 迴圈就夠了。
知道資料庫（DataBase）與簡單的 T-SQL 指令，如：CRUD。課程所需軟體皆可免費下載：
Visual Studio 2015、2017 或後續新版，請下載社群版（Community版）。
建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有許多差異。
SQL Server Express 版（免費）。建議使用 SQL Server 2012（Express版）或後續新版。

課程適合對象

需要撰寫網頁系統、或對於網頁與資料庫的開發有興趣的朋友。
未來的程式設計師 -- 希望將來進入業界寫程式，開發網頁系統。
曾寫過 ASP、ASP.NET（Web Form）、PHP、JSP 的朋友，現在想學習 ASP.NET MVC 5。