跳到主要內容區塊

ntuccepaper2019

專題報導

ASP.NET MVC Framework入門
  • 卷期:v0038
  • 出版日期:2016-09-20

作者:陳俊傑 / 臺灣大學計算機及資訊網路中心教學研究組幹事


早在2014年10月,《遠見雜誌》針對美國「一小時學程式」的活動進行報導[1],說明學習程式的重要性,並引用蘋果創辦人賈伯斯在20年前曾說過的話:「每個人都要學程式,要懂電腦語言,因為那教你如何思考。」因此,本文藉由微軟的開發工具,讓使用者也能自主學習網頁程式的開發。

 

簡介

ASP.NET MVC Framework可以使用Model-View-Controller的設計模式來開發ASP.NET的應用程式。根據微軟官方網站的說明,它具有下列功能[2]:
1. 輕量化且直覺的語法。
2. 容易學習。
3. 可相容於現在的程式語言。
4. 有詞彙提示能力。
5. 可混用HTML與程式。
6. 可用不同的文字編輯器編輯。
7. 具有單元測試的能力。

 

實驗架構

Art editor Img
圖一 實驗架構圖

 

作業環境

1. 作業系統:Windows 7 Service Pack 1
2. 網頁伺服器:IIS 7.5
3. 資料庫版本:SQL Server 2014 Express
4. 網頁語法:C#、VB.Net
5. 開發工具:Visual Studio 2010 Professional
6. 資料庫管理工具:SQL Server Management Studio Express

 

前置作業(一):安裝IIS伺服器

1. 開啟「控制台」,如下圖:

Art editor Img
圖二 我的桌面

2. 選擇「程式集」,如下圖:

Art editor Img
圖三 控制台

3. 「開啟或關閉Windows功能」,如下圖:

Art editor Img
圖四 程式集

4. 勾選「Web管理工具」及「World Wide Web服務」相關功能,如下圖:

Art editor Img
圖五 Windows功能

5. 安裝Microsoft .NET Frameword 4(獨立安裝程式)。
下載網址:https://www.microsoft.com/zh-tw/download/details.aspx?id=17718
6. 使用Web Platform Installer工具,安裝或升級。
下載網址:https://www.microsoft.com/web/downloads/platform.aspx

 

前置作業(二):設定資料庫

1. 新增「登入」,如下圖:

Art editor Img
圖六

Art editor Img
圖七

Art editor Img
圖八

2. 新增「資料庫」,如下圖:

Art editor Img
圖九

Art editor Img
圖十

3. 新增「資料表」,如下圖:

Art editor Img
圖十一

4. 輸入「資料行名稱」,選擇「資料類型」,勾選是否「允許Null」,如下圖:

Art editor Img
圖十二

5. 若採「GUID」類型,預設值設定「newid()」自動產生,如下圖:

Art editor Img
圖十三

6. 若採「datetime」類型,預設值設定「getdate()」自動產生,如下圖:

Art editor Img
圖十四

7. 按滑鼠右鍵,儲存資料表,如下圖:

Art editor Img
圖十五

8. 輸入資料表名稱,如下圖:

Art editor Img
圖十六

9. 按「重新整理」,如下圖:

Art editor Img
圖十七

10. 完成建立「資料表」,如下圖:

Art editor Img
圖十八

 

新增專案(C#、VB.Net)
1. 新增「專案」,如下圖:

Art editor Img
圖十九

2. 選擇「ASP.NET MVC 4 Web應用程式」並設定相關內容,如下圖:

Art editor Img
圖二十 C#版本

Art editor Img
圖二十一 VB版本

3. 選擇「範本」、「Razor」,取消「單元測試」,如下圖:

Art editor Img
圖二十二 C#版本

Art editor Img
圖二十三 VB版本

4. 專案新增完成,如下圖:

Art editor Img
圖二十四 C#版本

Art editor Img
圖二十五 VB版本

 

連結資料庫(C#、VB.Net)

1. 新增「項目」,如下圖:

Art editor Img
圖二十六 C#版本

Art editor Img
圖二十七 VB版本

2. 選擇「ADO.NET實體資料模型」,如下圖:

Art editor Img
圖二十八 C#版本

Art editor Img
圖二十九 VB版本

3. 選擇「從資料庫產生」,如下圖:

Art editor Img
圖三十

4. 按「新增連接」,如下圖:

Art editor Img
圖三十一

5. 設定連接屬性,如下圖:

Art editor Img
圖三十二

6. 設定實體連接字串,如下圖:

Art editor Img
圖三十三

7. 勾選「資料表」,如下圖:

Art editor Img
圖三十四

8. 資料庫連接完成,如下圖:

Art editor Img
圖三十五 C#版本

Art editor Img
圖三十六 VB版本

 

編輯版面配置頁(C#、VB.Net)

1. 編輯「_Layout」檔案,如下圖:

Art editor Img
圖三十七 C#版本

Art editor Img
圖三十八 VB版本

2. head標籤內容,如下圖:

Art editor Img
圖三十九

3. body標籤內容,如下圖:

Art editor Img
圖四十

 

編輯模組(C#、VB.Net)

1. 按下「新增項目」,如下圖:

Art editor Img
圖四十一 C#版本

Art editor Img
圖四十二 VB版本

2. 選擇「類別」,如下圖:

Art editor Img
圖四十三 C#版本

Art editor Img
圖四十四 VB版本

3. 編輯「MyHelper」檔案的類別(class)內容,如下圖:

Art editor Img
圖四十五 C#版本

Art editor Img
圖四十六 VB版本

Art editor Img
圖四十七 C#版本

Art editor Img
圖四十八 VB版本

Art editor Img
圖四十九 C#版本

Art editor Img
圖五十 VB版本

Art editor Img
圖五十一 C#版本

Art editor Img
圖五十二 VB版本

Art editor Img
圖五十三 C#版本

Art editor Img
圖五十四 VB版本

Art editor Img
圖五十五 C#版本

Art editor Img
圖五十六 VB版本

 

編輯控制器(C#、VB.Net)

1. 編輯RouteConfigt檔案的defaults內容,設定首頁的「controller」及「action」,如下圖:

Art editor Img
圖五十七 C#版本

Art editor Img
圖五十八 VB版本

2. 新增「控制器」,如下圖:

Art editor Img
圖五十九 C#版本

Art editor Img
圖六十 VB版本

3. 首頁的控制器須與RouteConfig的controller值相同,預設為「HomeController」,如下圖:

Art editor Img
圖六十一

4. 控制器新增完成,如下圖:

Art editor Img
圖六十二 C#版本

Art editor Img
圖六十三 VB版本

4. 編輯HomeColtroller檔案的類別(class)內容,如下圖: 註:若為C#,須先加入模組「using MyCS.Models;」。

Art editor Img
圖六十四 C#版本

Art editor Img
圖六十五 VB版本

Art editor Img
圖六十六 C#版本

Art editor Img
圖六十七 VB版本

Art editor Img
圖六十八 C#版本

Art editor Img
圖六十九 VB版本

 

編輯檢視(C#、VB.Net)

1. 加入「Index」首頁檢視,如下圖:

Art editor Img
圖七十 C#版本

Art editor Img
圖七十一 VB版本

2. 設定首頁(Index)的檢視內容,如下圖:

Art editor Img
圖七十二 C#版本

Art editor Img
圖七十三 VB版本

3. 新增首頁檢視(Index)完成,如下圖:

Art editor Img
圖七十四 C#版本

Art editor Img
圖七十五 VB版本

4. 編輯「Index」的檢視內容,如下圖:

Art editor Img
圖七十六 C#版本

Art editor Img
圖七十七 VB版本

5. 接著再新增「Info」、「DataList」、「AddData」、「UpdateData」的部分檢視,其位置均在「Views」的「Home」資料夾,如下圖:

Art editor Img
圖七十八 C#版本

Art editor Img
圖七十九 VB版本

6. 編輯「Info」部分檢視內容,如下圖:

Art editor Img
圖八十

7. 編輯「DataList」部分檢視內容,如下圖:

Art editor Img
圖八十一 DataList的切換頁部分(C#)

Art editor Img
圖八十二 DataList的填寫表單部分(C#)

Art editor Img
圖八十三 DataList的資料清單部分(C#)

Art editor Img
圖八十四 DataList的切換頁(VB)

Art editor Img
圖八十五 DataList的填寫表單部分(VB)

Art editor Img
圖八十六 DataList的資料清單部分(VB)

8. 從「Views」的「Home」資料夾,編輯「AddData.cshtml」或「AddData.vbhtml」和「UpdateData.cshtml」或「UpdateData.vbhtml」部分檢視內容,如下圖:

Art editor Img
圖八十七 C#版本

Art editor Img
圖八十八 VB版本

 

發行Web(C#、VB.Net)

1. 編輯發行設定檔,如下圖:

Art editor Img
圖八十九

2. 若發行方法選擇「檔案系統」,須選擇目標位置,如下圖:

Art editor Img
圖九十

3. 從「控制台」選擇「系統及安全性」,如下圖:

Art editor Img
圖九十一

4. 選擇「系統管理工具」,如下圖:

Art editor Img
圖九十二

5. 選擇「IIS管理員」,如下圖:

Art editor Img
圖九十三

6. 選擇「基本設定」,如下圖:

Art editor Img
圖九十四

7. 編輯「站台」,並將所發布的檔案系統移至該路徑,如下圖:

Art editor Img
圖九十五

Art editor Img
圖九十六

8. 新增「應用程式集區」,如下圖:

Art editor Img
圖九十七

9. 編輯應用程式集區內容,如下圖:

Art editor Img
圖九十八

10. 新增應用程式集區完成,建立兩個應用程式讓網站不會互相影響,如下圖:

Art editor Img
圖九十九

11. 將上傳「cs」及「vb」資料夾轉換成應用程式,本例中,「cs」使用「MyCS」應用程式,「vb」使用「MyVB」應用程式,如下圖:

Art editor Img
圖一○○ 

Art editor Img
圖一○一 

Art editor Img
圖一○二 

 

預覽結果

1. C#版本在Chrome瀏覽器上的預覽,如下圖:

Art editor Img
圖一○三

2. VB.Net版本在Chrome瀏覽器上的預覽,如下圖:

Art editor Img
圖一○四

 

參考資料

[1] 2014年10月號《遠見雜誌》第340期
http://www.gvm.com.tw/Boardcontent_26316_1.html
[2] ASP.NET MVC Framework
https://zh.wikipedia.org/wiki/ASP.NET_MVC_Framework