ASP.NET MVC 教學 — 由零開始的三天入門課

更新於 2022/03/16閱讀時間約 14 分鐘

ASP.NET MVC 教學 — 由零開始的三天入門課

課程介紹

MVC 是一種「設計模式」,理論上應該先學好物件導向(OOP)之後,才適合學習「設計模式」。微軟 ASP.NET MVC 提供了完善的開發架構,讓普羅大眾也有能撰寫符合 MVC 規範的網頁程式。

專為初學者設計的課程

市面上的 MVC 書籍與微軟官方教材,鎖定的讀者通常是寫過程式、有經驗的人。造成許多想學習 ASP.NET MVC 卻沒有經驗的人無門可入。甚至有人反應「上課第一天就聽不懂」、「書本看不到三章就放棄」。有鑑於此,《ASP.NET MVC 教學 — 由零開始的入門課》即是專門為初學者所設計的課程,即便先前沒有接觸過,也能輕易入門。但建議學習者最好具備基礎的程式設計能力,並知道資料庫(DataBase)與簡單的 T-SQL 指令,對本課程會有較佳的理解。
系統化教學
本課程規劃成三天的進度,前兩天的階段是為了補強學員的基礎。尤其是類別(class)的學習與使用,先用簡單的範例讓學員們練習,慢慢將基礎墊高,日後才有辦法銜接得上坊間的 MVC 書本與範例。等到打好基礎後,即會進入第三天的階段,學習更進階的功能。
第一天
從零開始告訴大家,市面上的商業網站由哪些功能組合而成,哪些功能學員也能從這堂課學到。MVC 的觀念與流程,直接用一個範例讓學員恍然大悟。並且帶領大家知道網頁的「前端」「後端」的差異。讓您親自動手撰寫第一個控制器(Controller)。
第二天
帶領各位熟悉網頁表單、Razor 的各種變化,並學習基本的 C# 語法(不用學到多深,夠用就好)。路由(Routing)與 MVC 的網址(URL)彼此關連。類別(class)入門與實作,全數讓學員親自動手做。到了第二天的課程,就已經在不知不覺中接觸過 M、V、C 三者,並且可以做出「資料新增」、「資料展示」的基本功能。
第三天
ASP.NET MVC 網頁正式搭配資料庫,做出商業網站的實用功能。不管是關鍵字(多重條件)搜尋、資料分頁(不採用現成套件,而是親自動手寫)、資料管理(新增、刪除、修改),各種功能一應俱全。最特別的是,為學員整理出「三個基本招式」,只要學會基礎三招,就可以衍生變化出各種功能,以簡馭繁,讓您學習更輕鬆!

課程特色

  • 以實作優先:減少理論說明,大量練習範例,講求從做中學。
  • 錯誤學習法:透過錯誤的範例從中學習,並找出自己的盲點。
  • 購買課程 https://9vs1.com/go/?i=20d6bc23f633

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

  • 瞭解 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。
  • 購買課程 https://9vs1.com/go/?i=20d6bc23f633

學員見證

請輸入七折優惠代碼 xKeXP6p

課程綱要

第ㄧ天
1–1 初學者的第一門課
  • 大部分的商業網站,有哪些功能?
  • 後台管理區(登入後才能看見)
  • ASP.NET MVC 課程需要哪些軟體工具?
  • 從零開始,操作 Visual Studio (建立一個新專案 / New Project)
  • 初學者,學習程式的幾個階段
  • 網頁基本觀念,Response 與 Request
  • 講解 MVC
  • Case Study — 動手做!做中學!(一個範例讓你秒懂,瞬間開悟)
  • 檢視畫面(網頁)的基本架構
  • 執行並檢視成果(網頁、檢視畫面)
  • 用錯誤,找出自己盲點。瞭解 MVC 就靠這個範例!
  • 糾正錯誤、也糾正自己的觀念
  • 現在,您終於看得懂 MVC 的流程與運作
  • 動手寫自己的第一個控制器
  • 為動作「新增」一個檢視畫面
補充說明:
  • 網頁的「前端與後端」有何差異?
  • 路由(Routing)的簡單介紹
  • 商業網站使用路由、URL的範例
  • 如何使用本課程提供的範例?
1–2 Controller 與 View
  • 開啟原有的專案(MVC_Starter)
  • 從動作(Action)產生與新增「檢視畫面(View)」
  • 檢視畫面(View)的目錄,位於「 /Views/控制器名稱」的目錄下
  • 三種方式,執行與觀賞檢視畫面(View)的成果
  • 執行成果的「網址」代表什麼意思?
  • 簡單介紹,路由(Routing)
  • 修改路由的預設值
  • 回到控制器,練習 Index1A~1B 這兩個動作,有「動作」卻沒有對應「同名的」檢視畫面,這樣行嗎?
  • 輸出字串,練習 Index1C~1D 這兩個動作
  • 重新導向
  • 控制器的 HandleUnknowAction 方法(注意關鍵字 — override)
  • ViewBag、ViewData、 TempData,練習 Index3 動作
  • 錯誤示範,練習 Index3A 動作
1–3 Model 與 Class,第一個類別檔
  • 加入第一個類別檔
  • 類別檔的簡單示範(屬性、Property)
  • 自助餐的「餐盤」與類別檔
  • 註解符號 // 與 /// 的使用
  • 為自己定義的 Class1 小類別,給一個啟始值
  • MVC 三者都出現了,綜合練習!
  • 搭配類別檔,產生「Details」檢視畫面
  • Razor 與表單元件
  • 新的寫法與改良。IDE 開發工具出來幫忙。
  • 進一步解說檢視畫面,第一列的 @model
  • Lambda 的 goto 符號
  • 再一次練習,Index4 與 5
  • Index5 動作(展示多筆記錄)網站首頁,List 範本
  • 課後作業
第二天
2–1 檢視畫面(View)、Razor入門&表單
  • Razor入門。範例 Index6
  • 網頁裡的「前端」與「後端」技術
  • 簡介 Razor 後端語法(以 DateTime 為例)
  • Response、字串與整數
  • 超連結(Href)、Html.ActionLink
  • 字串、特殊符號、Raw、HTML 編碼。範例 Index7
  • Form 表單
  • Submit、Form 表單內外的 Button 有何差異與變化
  • Form 表單(Razor 的 HTML Helper)
  • POST 與 GET
  • String.Format() 方法、如何查詢字典(關鍵字與 MSDN 範例)
  • Razor 的 HTML Helper 與表單(BeginForm)
  • TextBox、TexBoxFor…等等
  • Lesson2Form 控制器 的 Index11Create 動作(新增一筆記錄,搭配類別檔)
  • AntiForgeryToken,防止 CSRF 攻擊
  • Label、LabelFor、EditorFor
  • MVC 與 Web Form 的差異,以「新增」一筆記錄為例
  • 簡介 MVC 的 Model Binding,以「新增」一筆記錄為例
2–2 觀念澄清 與 實作(複習 & 小考)
  • Lesson2 控制器的 Index11Create 動作(資料新增,搭配 Model)
  • 「資料新增」的檢視畫面 — Html.BeginForm 的各種變化
  • Lesson2 控制器的 Index12Create 動作(資料新增,搭配 List 集合)
  • Model Binding 的說明(對照以前 WebForm 的 Data Binding)
  • 題外話 — 介紹 Telerik 公司為 MVC 打造的控制項
  • class(類別)與 List 集合
  • 課後複習
  • Index13Create動作(資料新增,傳統HTML表單,FormCollection)
  • 題外話 — Visual Studio 造成的 Log 檔(可刪除)
第三天
3–1 從資料庫產生 Context、對應的類別檔
  • 從微軟官方網站的範例講起
  • 安裝 SQL Server 資料庫的範例
  • Context,從資料庫轉成類別檔(Code First)
  • Model,第一次搭配資料庫(操作步驟)
  • ADO.NET 實體資料模型
  • 來自資料庫的 Code First
  • 第一,資料庫連結字串
  • 第二,挑選資料表
  • 產生 /Models 目錄下的 Context檔案(.cs檔)
  • 重點複習
  • /Models 目錄下的 UserTable.cs(對應 UserTable 資料表)
  • System.ComponentModel 命名空間
  • 觀念解析,沒事搞一個類別檔幹嘛??
  • 回到我們熟悉的控制器,搭配資料庫與 Model
  • 資料庫連結 & 命名空間 + Model
  • 對比微軟官方教學範例,您現在懂了嗎?
3–2 「基礎篇」 — 新增、主表明細(Master-Details)
  • **基礎篇**。很重要!請多練習幾次!
  • (1)網站首頁(List,列出所有紀錄、資料列表)
  • 產生檢視畫面(List範本)
  • 重點!檢視畫面 與 @model
  • 執行成果,進一步解說 Razor 與檢視畫面
  • 課後複習
  • (2)網站首頁、主表明細(Detail,單一筆紀錄的明細)
  • 四種不同的寫法
  • 產生檢視畫面(Detail範本)
  • 進一步解說Razor與檢視畫面(幾種不同的寫法)
  • 日期與時間(DateTime)的輸出格式
  • (3)新增一筆記錄(Create),難度增加一點點。
  • 第一個Create動作
  • 產生空白的新增表單(檢視畫面,Create 範本)
  • Submit 之後,送給第二個 Create 動作來處理
  • 第二個 Create 動作,無須產生檢視畫面,只負責處理資料
  • 課後複習
3–3 「衍生篇」 — 編輯、刪除、搜尋、分頁
  • **衍生篇**
  • 先看成果(Delete 的檢視畫面,執行時的錯誤與更正)
  • 第二個 Delete 動作跟第一個有何不同?
  • 控制器裡面的第一個 Delete 動作 & 產生 Delete 的檢視畫面
  • Delete 的檢視畫面,有哪些奧妙?
  • 第二個 Delete 動作(不需產生檢視畫面)
  • 三種寫法,刪除這一筆記錄
  • 課後複習
  • Edit 編輯。
  • 控制器裡面的第一個 Edit 動作 & 產生 Edit 的檢視畫面
  • 先看成果(執行時的錯誤與更正)
  • Edit的檢視畫面,有哪些奧妙?
  • 總複習,Create / Delete / Edit / Detail 各種動作的檢視畫面,有何差異?
  • 第二個 Edit 動作(不需產生檢視畫面)
  • [Bind(Include=…白名單…)]、[Bind(Exclude=…白名單…)]黑名單
  • 過多發佈(OverPosting)攻擊
  • 第二個 Edit 動作(輸入一個物件),程式有兩種寫法
  • 另一種「編輯」的寫法 — Edit2。第二個 Edit2 動作(輸入一個 ID 數字),程式有兩種寫法
  • 「單一條件」的搜尋,兩種寫法。.Contains() 模糊搜尋與 .Where() 方法
  • IQueryable 簡介
  • 產生 Search 的檢視畫面(請用 List範本)
  • MVC 的路由(Route)
  • 「多個」條件的搜尋。(註:難度提升一些)
  • 多條件的搜尋,有哪些困難與注意事項?
  • 兩個動作,類似 Create(新增)的作法
  • 第二個搜尋動作,關鍵程式寫在這裡。兩種寫法。
  • 分頁(Paging)。(註:難度提升一些)
  • 分頁的原理&寫法。不同的 T-SQL 指令。
  • 控制器裡面的 IndexPage 動作(分頁)
  • 「補充教材」- ADO.NET 與 MVC
  • ADO.NET與參數
  • 查詢、讀取記錄,搭配 SQL 指令的 Select
  • ADO.NET 與 MVC 裡面的資料庫存取,寫法有何異同?
  • 觀察資料庫的操作(查詢、讀取記錄 — Select)
  • Web Form 快速開發,以 GridView 為例
  • 新增、刪除、修改的 SQL 指令
  • MVC 搭配 ADO.NET
  • 以 List(網站首頁,資料列表)為例,查詢、讀取記錄 — SQL 指令的 Select
  • MVC 的 GridView 控制項?第三方軟體 Telerik
  • 新增、刪除、修改的 SQL 指令
  • 預告,更多精彩的在後面!

購買課程 https://9vs1.com/go/?i=20d6bc23f633

為什麼會看到廣告
    avatar-img
    4會員
    128內容數
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    兩千MIS的沙龍 的其他內容
    隔壁部門搞了一個案子,三五年了,沒有成果。 今年 “又” 虧損一億多…….為什麼他們沒有被火(fire)? 就像日本的達摩(不倒翁),七倒八起?? 每一年,大家都看著他們(嘿嘿嘿!你們今年一定捲包袱走路) 但很奇怪,人家就是屹立不搖 人家說「債多不愁」 我嚇出一身冷汗 怎麼說呢? 我突然發現:
    以前沒做過,但臨時被要求 ASP.NET Web Service 要傳回 JSON格式 找到網路上兩篇好文章,為自己做筆記。 如果您寫過 Web Service的話 直接看程式碼就會做了,淺顯易懂。只有很細微的修改: 點選圖片可連回原文出處…. 如果您的(Client端)要用 jQuery來接收
    ASP.NET Web Service 與 jQuery AJAX [ 讀書筆記 ] 這裡蒐集了幾個很棒的範例,適合初學者入門 依照難易度(由淺入深) 第一階段,您需要先瞭解 jQuery的AJAX用法(應該說是程式範例、雛形,大概長什麼樣子?) 範例下載(VB & C#都有) — 相關文章:
    目前已上線的 ASP.NET MVC 內容(課程大綱) 累積時數 約 95小時 ​ 第一天的影片,免費給您評估: 您可以在 Youtube看見第一天(第一節)的內容,這裡只有 1–1 & 1–2 的內容。 1–1小節 https://youtu.be/9spaHik87-A ​ 願意練,就學得會!
    Youtube教學影片 — JSON, 20分鐘 快速入門 這是 Web Service、WCF、WebAPI課程中的一小段。 JSON與jQuery都是我們使用網頁服務時 “必備”的知識…… 影片網址 https://www.youtube.com/watch?v=8-1Fu9gWpfY
    第一天的ASP.NET MVC 影片,免費給您評估: 您可以在 Youtube看見第一天(第一節)的內容,這裡只有 1–1 & 1–2 的內容。 1–1課程(ASP.NET MVC) https://youtu.be/9spaHik87-A MVC的學習不簡單,上完課後,務必自己動手練!
    隔壁部門搞了一個案子,三五年了,沒有成果。 今年 “又” 虧損一億多…….為什麼他們沒有被火(fire)? 就像日本的達摩(不倒翁),七倒八起?? 每一年,大家都看著他們(嘿嘿嘿!你們今年一定捲包袱走路) 但很奇怪,人家就是屹立不搖 人家說「債多不愁」 我嚇出一身冷汗 怎麼說呢? 我突然發現:
    以前沒做過,但臨時被要求 ASP.NET Web Service 要傳回 JSON格式 找到網路上兩篇好文章,為自己做筆記。 如果您寫過 Web Service的話 直接看程式碼就會做了,淺顯易懂。只有很細微的修改: 點選圖片可連回原文出處…. 如果您的(Client端)要用 jQuery來接收
    ASP.NET Web Service 與 jQuery AJAX [ 讀書筆記 ] 這裡蒐集了幾個很棒的範例,適合初學者入門 依照難易度(由淺入深) 第一階段,您需要先瞭解 jQuery的AJAX用法(應該說是程式範例、雛形,大概長什麼樣子?) 範例下載(VB & C#都有) — 相關文章:
    目前已上線的 ASP.NET MVC 內容(課程大綱) 累積時數 約 95小時 ​ 第一天的影片,免費給您評估: 您可以在 Youtube看見第一天(第一節)的內容,這裡只有 1–1 & 1–2 的內容。 1–1小節 https://youtu.be/9spaHik87-A ​ 願意練,就學得會!
    Youtube教學影片 — JSON, 20分鐘 快速入門 這是 Web Service、WCF、WebAPI課程中的一小段。 JSON與jQuery都是我們使用網頁服務時 “必備”的知識…… 影片網址 https://www.youtube.com/watch?v=8-1Fu9gWpfY
    第一天的ASP.NET MVC 影片,免費給您評估: 您可以在 Youtube看見第一天(第一節)的內容,這裡只有 1–1 & 1–2 的內容。 1–1課程(ASP.NET MVC) https://youtu.be/9spaHik87-A MVC的學習不簡單,上完課後,務必自己動手練!
    你可能也想看
    Google News 追蹤
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!