iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

ASP.NET MVC網頁程式介紹系列 第 3

[Day 03] 我的第一個MVC專案(一)

今天分享一下基本的ASP.NET MVC專案如何建,以及ASP.NET MVC大約的架構,我是習慣用C#,所以就以C#來介紹,不曉得VB能不能用ASP.NET MVC。

首先打開Visual Studio,點選工具列的 檔案 → 新增 → 專案,然後選擇Visual C# → Web → ASP.NET Web應用程式 → 選擇位置並輸入名稱 → 然後按確定
https://ithelp.ithome.com.tw/upload/images/20171212/20105694cDEGgxftCL.jpg

然後選擇MVC專案,帳戶的地方沒有的話跳過就好了。
https://ithelp.ithome.com.tw/upload/images/20171212/20105694r1xOqHlERN.jpg

一個基本的專案就建起來了,讓我們執行一下程式,會看到以下的畫面。
https://ithelp.ithome.com.tw/upload/images/20171212/20105694NkZJ58Qe3P.jpg

MVC的畫面預設是套BootStrap的版,基本上如果有學過BootStrap,直接就可以套在MVC上面,這個畫面就有一些基本的功能頁面,首頁的介紹、關於、聯絡方式,還有註冊跟登入的畫面,甚至MVC預設可以使用Google跟Facebook登入等,不過那部份一開始是關閉的,需要去把那個功能打開才有。

那我們現在來看一下結構的部分,以下是專案的資料夾結構:
https://ithelp.ithome.com.tw/upload/images/20171212/20105694N9nZ0LaupE.jpg

  • App_Data 以前是ASP.NET設計來放一些核心的cs檔案的地方,不過MVC的App_Data資料夾好像跟我有仇,我的cs檔案都放不進去,所以我的專案基本上這個資料夾都是空的。
  • App_Start 裡面微軟有放一些一開始就會執行的東西,雖然看起來很討厭不過隨便刪掉的話是會出錯的,這部分我就沒特別研究,反正放在那裡對人畜無害。
  • Content跟Scripts相信有寫過網頁的都很熟悉,總之就是放一些CSS跟JS檔案的地方,當然也會有JQuery。(應該說BootStrap本來就是要載入JQuery才能用)
  • fonts是字型相關的資料夾

剩下三個資料夾,是MVC的核心部分,英文字的開頭就是C、M、V,就是Controllers、Models、跟Views

  • Controllers就是放控制器的地方,Vies是放頁面的地方,MVC的網頁是從Controller開始跑,然後才跑到View,有Controller不一定要有相對應的View,不過View要顯示出來一定要有Controller去呼叫它(名稱不一定要一樣)
  • Models資料夾就是放Model的地方,這部分我們之後會有比較詳細的說明

接下來我們來觀察Controllers跟Views,基本上除了Views底下的Shared資料夾以外,Controller跟View是一對一的,也就是說Views底下有一個Home資料夾,Controllers底下就會有一個HomeController,這兩個是成對的。

今天先講到這裡,明天再繼續分析MVC的流程。

--
小弟不才,
如果有謬誤或是要補充的,
都歡迎一起來討論!


上一篇
[Day 02] 當ASP.NET長了腳,變成ASP.NET MVC
下一篇
[Day 04] 我的第一個MVC專案(二)
系列文
ASP.NET MVC網頁程式介紹30

1 則留言

0
tommy_lu1
iT邦新手 5 級 ‧ 2018-01-25 01:05:38

我使用Visual Studio Mac 2017,新建"ASP.NET MVC Project"後,開啟瀏覽器並沒有預設套用Bootstrap的畫面...

小魚 iT邦好手 1 級‧ 2018-01-25 11:57:19 檢舉

Mac我就不知道了,
我是用Windows的,
微軟的東西對其他OS的支援度應該沒那麼好,
不過BootStrap你也可以另外再引用.
就算不是用MVC也可以用BootStrap的.

我要留言

立即登入留言