一、工具的選擇
要進行MVC3的開發,請確定你的計算機上面已經安裝了如下的軟體:
Visual Studio Web Developer Express with SQL Express
ASP.NET MVC 3
SQL Management Studio
二、從Helloworld開始
我們從最簡單的Helloworld程式開始,體驗MVC3帶來的強勁便捷的功能。
step1.建立MVC3項目
打開建立項目視窗,在“已安裝的模闆”清單中選擇“Web”,在右側應用程式模闆清單中選擇“ASP.NET MVC3 Web應用程式”,修改項目名稱為“MVCHelloworld”,選擇項目要儲存的位置,點選“确定”按鈕。
step2.選擇項目模闆
在建立MVC3項目視窗,我們選擇建立一個空的MVC3項目,使用Razor視圖引擎,并勾選中“使用HTML5語義标記”,點選“确定”按鈕,完成項目建立。
Razor 的視圖引擎是Mvc3中提供的新的視圖引擎,它具有以下優點:
Razor 的文法簡單且清晰,隻需要最小化的輸入
Razor 容易學習,文法類似于 C# 和 VB
Visual Studio 對于 Razor 提供了智能提示和文法着色
Razor 視圖不需要允許程式或者啟動 Web 伺服器就可以進行測試
打開資料總管視窗,可以看到VS為我們建立的項目結構:
在不對項目進行任何修改的情況下,直接按CTRL+F5,運作項目,運作結果如下:
這是一個404錯誤,指定的頁面未找到。在項目運作時,Mvc3會将頁面請求進行映射。接下來我們為項目添加一個Home頁。
step3.讓項目跑起來
我們需要添加一個名為Home的控制器。在項目檔案夾“Controllers”上面右鍵,将滑鼠移動到“添加”項,選擇“控制器”,如下圖:
在打開的添加控制器視窗中,修改控制器的名稱為“HomeController”,模闆為“空控制器”,如下圖,點選“添加”按鈕完成添加。
step4.修改代碼
VS為我們建立了HomeController控制器的代碼,在Index方法中,傳回之為ActionResult,為了完成本示例,我們将它修改為string類型,并傳回一個字元串,修改後的代碼如下:
public string Index()
{
return "<h1>Hello world by Mvc3</h1>";
}
再次運作程式,界面截圖如下:
我們的Helloworld已經可以運作起來了,但這不是我們想要的結果,因為到目前為止,隻是在修改控制器,接下來,我們為控制添加一個Welcome方法,并在視圖中,顯示歡迎資訊。
step5.添加視圖(View)
修改控制,添加一個名為Welcome的方法,代碼如下:
public ActionResult Welcome()
return View();
在Welcome方法的代碼塊中,點選右鍵,在上下文菜單中選擇“添加視圖”,打開添加視圖對話框:
在這個對話框中不做任何修改,點選“添加”按鈕,完成視圖的添加,VS會在View檔案夾下床架如下結構的檔案:
編譯項目,在浏覽器位址欄中輸入位址:http://localhost:xxx/home/Welcome(xxx為端口号,在不同的計算機中會有所不同),運作結果如下:
step6.使用ViewBag傳遞參數
繼續修改控制器中的Welcome方法,為它添加一個名為name的string類型參數,修改後的代碼如下:
public ActionResult Welcome(string name="")
ViewBag.name = name;
我們在這裡使用了ViewBag屬性,它是一個新的MVC3屬性,MVC2 中的控制器支援 ViewData 屬性,允許通過後綁定的字典将資料傳送給視圖模闆,在 MVC3 中,你可以通過 ViewBag 來更加簡單的完成。例如,對于 ViewData["Message"] = "text",你可以通過 ViewBag.Message = "text" 來完成。你不需要通過類來定義任何強類型的屬性,因為這是動态屬性,在内部,ViewBag 屬性以名-值對的形式儲存在 ViewData 字典中。注意,在許多預釋出版本中,這個屬性被稱為 ViewModel。
相應的,我們修改View中的代碼,修改後的代碼如下:
@{
ViewBag.Title = "Welcome";
<h2>Hi @ViewBag.name, you're welcome!</h2>
ViewBag.Title是用來顯示目前頁面的标題的。
ViewBag.name使我們在控制器中添加的屬性,在這裡可以直接使用。
編譯項目,修改剛才在浏覽器中輸入的位址,為它添加一個名為name的參數,位址如下:http://localhost:xxx/home/Welcome?name=Tom,運作界面如下:
你也可以試試不加參數的情況,直接使用位址:http://localhost:xxx/home/Welcome,程式也是可以正常運作的,隻不過輸出的結果為“Hi , you're welcome!”,這時因為我們為參數name指定了預設值,它變成了一個可選的參數,在沒有傳入參數的時候,會采用預設值“空字元串”,是以會有這個輸出結果。
OK,本節就到此結束了,在本節中,我們示範了如何建立MVC3項目、添加控制器、添加視圖、為視圖傳遞參數等操作,在下一節中,我們會引入實體模型、Entity Framework4.1 Code-First等内容,敬請關注!
如果認為此文對您有幫助,别忘了支援一下哦!
聲明:本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論,與本人所在機關沒有直接利益關系。非商業,未授權,貼子請以現狀保留,轉載時必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接。