起飛網 ASP.NET MVC 5 學習教程目錄:
- 添加控制器
- 添加視圖
- 修改視圖和布局頁
- 控制器傳遞數據給視圖
- 添加模型
- 創建連接字符串
- 通過控制器訪問模型的數據
- 生成的代碼詳解
- 使用 SQL Server LocalDB
- Edit方法和Edit視圖詳解
- 添加查詢
- Entity Framework 數據遷移之添加字段
- 添加驗證
- Details 和 Delete 方法詳解
本教程將介紹如何使用Visual Studio Express 2013 Web 預覽版,或Visual Studio 2013預覽版來創建一個基本的ASP.NET MVC 5 Web 應用程序。在學習本系列教程之前,你需要安裝Visual Studio Express 2013 Web 預覽版或Visual Studio 2013預覽版,下載地址:http://www.microsoft.com/visualstudio/chs/2013-downloads
Visual Studio 是一個IDE,也叫做集成開發環境。就像你使用Microsoft Word 寫文檔一樣,使用Visual Studio 來創建應用程序。在Visual Studio 頂部有一個工具欄,顯示了各種可用的選項;還有一個菜單,提供了在IDE中執行操作的另一種方式(例如,除了可以在“起始頁”中選擇“新建項目”,還可以使用菜單 ,選擇“文件”>"新建項目")。
圖1:Visual Studio Express 2013 起始頁
創建第一個應用程序
你可以選擇Visual Basic或者Visual C#作為編程語言來創建第一個應用程序。單擊“新建項目”,在左側列表中選擇Visual C# > Web,在右側窗口中選擇 ASP.NET Web 應用程序,在名稱輸入框中輸入“MvcMovie”,設置好路徑后點擊“確定”按鈕。
圖2:新建項目窗口
在新建ASP.NET項目對話框中,選擇 MVC,然后單擊“創建項目”按鈕。
圖3:新建ASP.NET項目對話框
在我們剛創建的項目中,Visual Studio 為ASP.NET MVC項目使用默認的模板,因此我們不用做任何事情,馬上就有了一個可用的應用程序!這是一個簡單的“Hello World”項目,也是一個很好的學習MVC的起點。
圖4:MvcMovie項目
按F5啟動調試。F5會引發Visual Studio 啟動 IIS Express,並運行你的Web應用程序。Visual Studio 會在瀏覽器中打開程序首頁。注意瀏覽器中的地址欄 localhost,而不像 example.com這樣的網址,這是因為 localhost 總是指向你本地的計算機。當Visual Studio 運行Web項目的時候,Web服務器會使用一個隨機的端口號。在下面的截圖中,端口號是4155,當你運行程序時,你可能會看到不同的端口號。
圖5:瀏覽器中打開的MvcMovie頁面
在圖5中可以看到,默認的模板為我們創建了Home、Contact和About頁面,另外還有Account的部分。當我們將頁面寬度調整到比較小的時候,你會發現頁面布局也發生了變化。
圖6:發生改變后的Home頁
在圖6中你可以看到,Home、Contact、About,還有Register和Login等導航鏈接都不見了,取而代之的是一個導航菜單。這是因為在ASP.NET MVC 5 的默認模板中使用了響應式布局,響應式布局用來適應不同的設備寬度,更好的提升用戶體驗。MVC 5的模板中引用了Bootstrap,響應式布局想必是Bootstrap的功勞(未考證)。
點擊圖6中的導航菜單,你會看到被隱藏的鏈接。
圖7:導航菜單
本篇內容主要介紹了如何使用Visual Studio Express 2013 Web 預覽版創建 ASP.NET MVC 5 應用程序。在接下來的內容中,我們將修改程序代碼,了解更多MVC的知識,敬請關注!
本文轉自起飛網,原文網址:http://www.qeefee.com/mvc/mvc-5-getting-started