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

課程創作:MIS2000 Lab

課程適合地區:全球

課程影片總長度: 5.8小時

上架日期:2019-3-4

分享課程:
方案一
購買本課程
NT1,800
方案二
加購入門課
NT3,500

課程介紹

ASP NET MVC basic MIS2000Lab

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

表單輸入與驗證(Validation)

圖一

ASP NET MVC basic MIS2000Lab

圖二:程式執行以後的警告(必填的欄位、日期格式必須正確)

ASP NET MVC basic MIS2000Lab

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

一個「線上相簿」的專案

ASP NET MVC basic MIS2000Lab

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

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

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

課程特色

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

學員見證

ASP NET MVC basic MIS2000Lab

課程綱要

單元一 表單輸入與驗證(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。

老師介紹

ASP.NET MVC instructor MIS2000Lab
MIS2000 Lab
  • 國立大學資管碩士畢業。
  • 微軟 MVP(2008/4/1~2017/7/1)
  • 2001 年至今,均負責網頁程式與微軟平台與技術之相關工作。
  • 資策會七年工作經歷與(南區)專任講師。
  • 撰寫 20 本以上的電腦書籍。
  • 現任職某大資通訊上市公司軟體開發團隊,擔任技術經理。
  • 2009 年起,工作之餘並在台中市電腦公會與民間補習班兼任講師。
  • 2015 年起,參與網路教學(直播、遠距教學影片)。

課程評語與問答