ASP.NET MVC 線上相簿｜9 比 1 線上教學

ASP.NET MVC - 線上相簿

預覽課程

課程創作： MIS2000 Lab.

課程適合地區：全球

課程影片總長度： 5.8小時

最後更新日期：2019-10-05

分享課程：

方案一

單購本課程

NT3,800

方案二

入門、進階、線上相簿三課合購

~~NT8,100~~

NT4,500

課程介紹

你是否也曾有疑惑，學會了 ASP.NET MVC 之後，能應用在什麼地方呢？本課程特別採用了一個公開的範例 -「線上相簿」，讓學員從線上網站的運作中，拆解每個功能與步驟。

ASP NET MVC PhotoSharing MIS2000Lab title

對已經上過「ASP.NET MVC 教學 - 由零開始的入門課」的學員而言，本課程是一個挑戰，也是一種複習。在經過這個專案解說後，相信您會恍然大悟，發現將以前學過的功能套用在實際網站上，原來是這麼容易的事！利用入門課程所學的「零散」招式，立即實戰應用，並加以「整合」，絕對能大幅提升您的學習成效。

傳統的書籍與課程，常用留言板、部落格這些以「文字」為主的範例來解說，本範例搭配檔案上傳（FileUpload）的功能以「圖片、線上相簿」為主體，應用更廣泛，成果也更生動活潑。尤其是(1) 將圖片存入（新增、Insert Into）資料表，(2)再將二進位內容取出，還原成圖片檔案。這樣進階的範例，相信是初學者真正需要的。

除了原本的範例以外，額外添加的「分頁（Paging）」、「搜尋」、搭配檔案上傳的「編輯」功能，都是原廠範例沒有的，加上搭配了兩個家庭作業，讓您學到的東西比原本的專案還要多！

以Google為例，當您搜尋的關鍵字有上千筆紀錄時，您必須把搜尋結果分頁展示，每一頁展示二十筆記錄，一頁一頁呈現，才能縮減反應時間，減低網站負擔，所以「分頁」與「搜尋」兩種功能的合併，是每個網站必備的！

搭配檔案上傳的「編輯」功能，可能因為難度又提升了一些，所以原廠範例並不包含在內。只要有基礎，隨手增補上去，一點也不難，這三個額外提供的功能也是老師堅持給您的補充教材。讓各位能從真正的專案中，重新思維並複習自己以前學過的基礎招式，真正轉化成實戰經驗！

0_Starter

課程介紹與目標學員的基礎能力。在您進入課程之前，請先評估自己的能力。建議已經完成前三天ASP.NET MVC入門課程的學員，參與本課程才能真正學到經驗。這是一個簡化的課程，透過拆解一個線上相簿的網站，為您解說各種功能，對應您以前學過的招式。對於已經入門ASP.NET MVC的學員來說，是一種挑戰也是一種複習。

1_DB

先介紹「線上相簿」會用到的資料表架構與特點。這個專案會把上傳的圖檔存入資料表，所以用到了一些特別的設定。

2_Model

如何將資料庫轉換成Context，並把資料表對應為ViewModel、類別檔。要存放二進位的資料表欄位，變成類別檔會是怎樣的資料型態。

2-1_Model_HomeWork

提供一個家庭作業，讓老師陪著您一起完成，透過自己動手做，親自複習課程重點。

3-1_Action_View

MVC的控制器裡面，如何撰寫Action動作，並產生對應的Viewer檢視畫面是非常重要的基礎。

3-2_Route

Route路由的設定與應用。

3-3_Action_PartialView

PartialView的應用。

3-4_HomeWork

提供一個家庭作業，讓老師陪著您一起完成，透過自己動手做，親自複習課程重點。

3-5_Master_List

網站首頁，多筆記錄（報表）的資料展示，從資料庫讀取並展示記錄。介紹List範本。如何把資料表裡面的二進位內容，還原成一張圖片檔並呈現在網頁上，是本範例的重點。

3-6_Details

單一筆記錄（明細檔）的資料展示，從資料庫讀取並展示記錄。介紹Details範本。

3-7_Create

新增一筆記錄並上傳圖片。因為本專案「線上相簿」需要搭配檔案上傳（FileUpload），所以這個新增（Create）功能的難度較高。要將上傳的圖片以二進位的型態存入資料表，程式會繁瑣一些。

3-8_Search

[本課程額外加入] 搜尋，以關鍵字進行模糊搜尋，是所有網站必備的基礎功能。由於原本的範例不提供，這是老師額外的補充教材。

3-9_Page

[本課程額外加入] 分頁，不管是網站首頁或是搜尋的結果，倘若資料量太大，就必須透過「分頁」展示，節省網站資源。這也是所有網站必備的基礎功能。由於原本的範例不提供，這是老師額外的補充教材。

3-10_FileUpload01

檔案上傳的基本範例。檔案上傳搭配CRUD的功能，在當今網站中是非常重要的，沒有圖片的搭配，只有文字的網站很難受到關注與喜愛。

3-11_FileUpload02

檔案上傳有不少變化，所以我們準備了兩段影片為您介紹其中的特點。並為您解析兩種不同的檔案上傳作法，各有哪些優缺點？

3-12_Delete_Edit

刪除與編輯。[本課程額外加入] 「編輯」與檔案上傳（FileUpload）的綜合應用，由於原本的範例不提供，這是老師額外的補充教材。編輯的檢視畫面，需要呈現圖片。編輯（修改資料表中既有的紀錄）時，該如何搭配檔案上傳，取代圖片呢？您必須融合前面學過的 Create、Details兩種功能，才能在「編輯」功能中妥善的搭配檔案上傳（FileUpload）。

以實作優先：減少理論說明，大量練習範例，講求從做中學。
錯誤學習法：透過錯誤的範例從中學習，並找出自己的盲點。
採用網路公開的專案，讓學員從真正的專案中，重新思維並複習自己以前學過的基礎招式，真正轉化成實戰經驗。

凡購買「ASP.NET MVC 教學 - 由零開始的入門課」與「ASP.NET MVC 教學 - 由入門到進階」兩課程的學員，即可獲得本課程 NT 2,800 元的超值優惠！（本優惠適用方案一）

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

凡以「方案二」三課合購方式購買「ASP.NET MVC 教學 - 由零開始的入門課」、「ASP.NET MVC 教學 - 由入門到進階」與本課程的學員，將以超划算的價格同時取得三門課程！

0_Starter
1_DB
2_Model
2-1_Model_HomeWork
3-1_Action_View
3-2_Route
3-3_Action_PartialView
3-4_HomeWork
3-5_Master_List
3-6_Details
3-7_Create
3-8_Search
3-9_Page
3-10_FileUpload01
3-11_FileUpload02
3-12_Delete_Edit

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

以實際上線的網站專案 - ASP.NET MVC「線上相簿」為例。用實際網站為您解說MVC各種功能。從實戰中拆解範例與學習，更具成效。
以實際網站來解說ASP.NET MVC的架構與觀念，搭配Routing路由。為您解析Model-Viewer-Controller三者的關連。
除了基礎CRUD必備功能之外，本課程更加入原本專案沒有的「分頁」與「搜尋」、搭配檔案上傳的「編輯」功能，讓您學到的比原本專案更多。
檔案上傳（FileUpload）後，將相片（圖片）轉成二進位並存入資料表。
將資料表裡面二進位的內容，恢復成圖片格式，重新呈現在HTML網頁上。

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

建議已完成前面三天的入門課 - 「ASP.NET MVC 教學 - 由零開始的入門課」的學習。
知道資料庫（DataBase）與簡單的 T-SQL 指令，如：CRUD。課程所需軟體皆可免費下載。
Visual Studio 2015~2019或後續新版，請下載社群版（Community版）。
建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有差異。
SQL Server Express 版（免費）。建議使用 SQL Server 2012（Express版）或後續新版。

課程適合對象

本課程屬於進階課程，建議完成「ASP.NET MVC 教學 - 由零開始的入門課」課程後再來學習。
需要撰寫網頁系統、或對於網頁與資料庫的開發有興趣的朋友。
未來的程式設計師 -- 希望將來進入業界寫程式，開發網頁系統。
曾寫過 ASP、ASP.NET（Web Form）、PHP、JSP 的朋友，現在想學習 ASP.NET MVC 5。