MVC3教程之新手入門

  • 2019 年 10 月 7 日
  • 筆記

  一、工具的選擇

要進行MVC3的開發,請確保你的計算機上面已經安裝了如下的軟件:

  • Visual Studio Web Developer Express with SQL Express
  • ASP.NET MVC 3
  • SQL Management Studio

你還可以通過Web Platform Installer將這些軟件一起安裝到本地。

  二、從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類型,並返回一個字符串,修改後的代碼如下:

publicstring 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;              return View();          }

  我們在這裡使用了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等內容,敬請關注!