ASP.NET MVC 基礎介紹(2)

  • 9032
  • 0
  • 2013-11-13

摘要:ASP.NET MVC -Part2

前言

        在瞭解.NET MVC的原理及運作方式後,我們可開始進行MVC專案的開發,本篇會針對開發重點及注意事項做說明。

 

ASP.NET MVC專案建立

開啟VS後,我習慣選擇的Template為 「Internet Application」,而其它專案的差異與比較可參考其它網站說明。

簡言之,此類型專案有較完整版面與權限驗證功能。

 

Hello World!

1. 建立Controller
 
(1) 於Controllers資料夾按右鍵,並選擇「Add Controller」
(2) 將Controller Name取為「MyController」,點選Add
(3) 新增完成後,在Controllers資料夾下會多一個「MyController.cs」檔案,
由此可知Controller之副檔名(*.cs)與以往Web Form後端(partial class)相同沒改變。
 
2. 建立View
(1) 完成步驟1後,開啟MyController.cs,找到Index如下:
 public ActionResult Index()
{
    return View();
}
 
 
於Method內點選右鍵「Add View」,選擇add後,就會在View資料夾下增加一層My的路徑,點開可看到Index.cshtml。
由此可知:
* View的資料夾是依據Controller名稱所建立。
* 而檔案名稱與Controller的Method一致。
* 而View下的檔案副檔名皆為:*.cshtml,有別於Web Form前端的副檔名-*.aspx
 
(2) 開啟View後,先輸入我們欲顯示的文字。
我們使用了Html Helper來做顯示,語法如下:
@Html.Label("Hello World!")
* 也可為此文字設定顏色、大小,寫法如下:
@Html.Label("Hello World!", new { @style = "color:blue;font-size:20pt" })
 
* Html Helper的寫法,如需增加屬性時,皆可使用 new { 屬性名稱="屬性值" }來完成。
假設如果要為form增加name的屬性,就可以這樣寫:
Html.BeginForm("Edit", "Travel", FormMethod.Post, new { name = "myForm" }
 
1.注意到@的寫法屬於Razor的寫法,Razor是mvc3版之後新增的檢視引擎,凡使用@開頭的都會使用Razor編譯器來處理。
關於Razor詳細說明,可參考:
http://www.dotblogs.com.tw/gelis/archive/2011/09/30/38458.aspx
 
2. Html helper(html助手),顧名思義是提供各類html tag,透過它可以快速的產生 Html 標籤,如
@Html.CheckBox,render為html則呈現<input type="checkbox"  ... />
@Html.RadioButton,render為html則呈現<input type="radio"  ... />
@Html.Hidden,render為html則呈現<input type="hidden"  ... />
 
而VS也提供Razor的Intellense,節省了更多開發時間。
 
3. 將頁面設為首頁
1. 可開啟Global.aspx,於 RouteConfig.RegisterRoutes(RouteTable.Routes);
選擇f12移至Method定義,即會跳到App_Start資料夾下的RouteConfig.cs檔案。
我們將其defults路徑做調整:
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
將其修改為: controller = "My"
 
4.執行Hello World頁面
以上步驟完成後,執行「F5」,即可看到頁面直接出現我們所指定的My Controller,畫面顯示Hello World!!