進度條

WordPress 架站實體工作坊即將開始

【實體課程】12/06 (日) 09:00 「台北場」WordPress 整天工作坊即將開始,目前持續售票中,不要錯過喔!購票與詳情請看「KKTIX 購票頁面」或「進度條文章」。

[C#][.Net MVC] 01. Visual Studio安裝、環境設定與中斷使用

你覺得寫程式有微軟當靠山比較穩固嗎?那就進來看看吧!

作者: Toyo 更新日期:
進度條系列文 - Dot Net MVC 基礎使用與教學 

目標對象  

1. 你有一點程式語言的底子,但沒接觸過Dot Net MVC 
2. 寫過Dot Net MVC,但還不是很熟悉它怎麼應用 

希望達成目標  

1. 能夠比較清楚的理解Dot Net MVC怎麼運作 
2. 知道了一些小東西,或許能改善目前你開發上困擾

 

Visual Studio Community : 微軟官網載點

 

開發Dot Net的工程師,應該9成9的人都是使用Visual Studio, 它不僅號稱地表最強編輯器, 微軟更佛心的提供了免費版本給大家使用,否則最基礎的一套Visual Studio的價格應該也會讓初學者非常卻步。


當然既然是免費版本,功能上一定會有些陽春,但對於只是入門學習Dot Net而言已經是相當強大的工具了。 

 

功能比較(來源: https://www.visualstudio.com/zh-hant/vs/compare/)

 

價格表(來源:https://www.visualstudio.com/zh-hant/vs/pricing/)

 

下載完之後將它安裝起來

 

選擇Community安裝

 

勾選ASP.NET與網頁程式開發

 

等它安裝完

 

安裝完之後打開應該會看到這個畫面

 

因為寫程式大部分時間都需要一直長盯著螢幕,所以螢幕底色如果是淺色系通常到下午我眼睛都會很酸,所以Visual Studio也很貼心了提供修改視窗色系的功能,例如我截圖就是深色系。 
調整方式如下 
工具 > 選項 > 色彩佈景主題 



 

建立第一個Web專案

 

檔案 > 新增 > 專案

 

選擇Web > Web應用程式(.NET Framework) 。
專案名稱與放的位置依照自己喜好即可

 

選擇MVC

 

建立完成之後應該可以看到這個畫面

 

如果看不到方案總管,可以透過檢視> 方案總管來打開

 

右邊就是我們寫程式要放的地方,之後介紹Dot Net MVC時會慢慢帶到,但今天還不需要寫到程式,先直接將程式執行起來,看看預設建立好的網站是長什麼樣 

 


因為這是網站程式, 點選執行旁邊的向下箭頭後, 可以依照個人喜好選擇習慣用的瀏覽器來瀏覽, 我個人是習慣用Google Chrome, 所以以下用Chrome做示範, 選好後按下綠色的箭頭執行。



執行起來之後應該可以看到一個很專業的診斷工具面板, 分別顯示目前佔了CPU幾%, 用了多少記憶體...等等

 


而這時候你選擇的瀏覽器應該也會開啟,然後看到目前網站的成果

 


可以隨意的點擊網站按鈕逛逛玩玩後, 現在來簡單講一下該如何追蹤偵錯

 

偵錯是門大學問, 常常我們寫的程式編譯時都沒有錯誤, 但執行結果卻不如我們預期那般時, 一步一步偵錯就會是我們發現問題的好朋友


我們以關於這個按鈕為例, 究竟點擊關於這個按鈕時, 程式是如何執行, 讓我們可以看到畫面的

 



因為我們還不知道目前整個程式的運作原理, 所以依照下面的指示這樣做
 

1. 找到HomeController, 並且打開它

 



 

2. 找到第18行的地方, 點擊那行的最左邊邊框, 會產生一個紅色的原點, 我們稱之為中斷點
 

 

中斷點的意思就是, 當程式執行到這行時會停下來讓你知道, 並且等待你的指示
 

3. 接著再回去剛剛的網頁點擊關於, 你會發現, 視窗會跳到你剛剛下得中斷點位置, 而網頁會卡住, 並沒有顯示關於的頁面

 


那是因為程式還沒執行完, 所以還沒辦法顯示頁面資訊
 

4. 按下F11, 每按一次F11, 你會看到程式往下走一行, 藉此來觀察程式如何運行, 並且是否符合我們預期的結果
 



 

 

5. 當然, 我們不必每次進入中斷點後都一步一步將它執行完, 如果已經找到哪邊有問題, 只要再按下繼續, 程式就會自動往下跑, 直到碰到下一個中斷點為止




當然以上所提的, 都是非常非常基礎的Visual Studio(之後文章都簡稱為VS)操作, 跟日常比較會運用到的情境,VS之所以被人稱為地表最強編輯器, 想當然耳不可能只有這樣而已, 但這都是要慢慢開發中去體會跟累積的。相信如果真的用久了, 開始使用擴充輔助套件之類的 ,就會知道它的強大之處。


下一篇來提何謂MVC,知道後應就能理解為何會知道關於這個按鈕點擊後, 會停在我們今天下的中斷點了。

 

作者Blog連結


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Medium 0

Toyo

年過30在軟體業載浮載沉的工程師, 期望靠著一點一滴累積與努力, 讓自己墊起腳能勾到一點點的夢想