相信當您完成了前三天的 ASP.NET MVC 入門課程後,對 MVC 的基本觀念與流程一定有更詳細的理解,那麼接下來兩天的課程將會有更為進階的內容,透過大量的練習範例從做中學,讓您不僅懂理論,更能知道如何實際動手執行。此外,本門課程中進階與補充的範例雖然不難,但都是針對已經完成入門班三天課程的學員所準備,建議學員依序學習,千萬不要躁進。
表單輸入與驗證(Validation)
圖一
圖二:程式執行以後的警告(必填的欄位、日期格式必須正確)
「驗證」算是一門獨自的課程,沒有前後關係。這些驗證的作法,以前 Web Form 也有類似的,大同小異。ASP.NET MVC 提供了內建的表單驗證與防呆。必填的欄位,您必須輸入。輸入格式是否正確,都可以進行驗證。這些內建的驗證,好學又簡單。完全不用寫程式就能過濾大部分的輸入數據。錯誤訊息也可由您決定並改寫,驗證機制十分靈活。
一個「線上相簿」的專案
學了這麼多功夫,不拿別人的專案來對照看看,怎麼知道自己學到的招式是否實用?源自微軟官方的線上相簿專案,您可以自行下載並觀摩這些功能,其中包含了檔案上傳(FileUpload),剛好補足入門班沒有學到的功能。
本範例的檔案上傳,將圖片檔(二進位內容)以 BLOB 的方式寫入資料表,這樣的寫法比較難。而且日後讀取二進位內容,並還原成原本圖片,都需要特殊寫法。但有了現成範例,直接學習就很輕鬆。這也是老師特別選用這個範例來教學的原因。
線上相簿的 UI 畫面也用上了「部分檢視(Partial View)」、「版面配置頁(_Layout)」,更搭配了一對多的關連式資料表。讓每一張照片底下都可以有多筆留言。這個範例內建 RWD 特效(網頁前端特效 - Bootstrap 套件,後續也會推出課程為您解說各種網頁的「前端特效」)。
課程特色
- 以實作優先:減少理論說明,大量練習範例,講求從做中學。
- 錯誤學習法:透過錯誤的範例從中學習,並找出自己的盲點。
凡購買本課程與「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 設定檔的小複習