Asp.Net MVC4入門指南（1）入門介紹

前言

本教程將為您講解使用微軟的Visual Studio Express 2012或Visual Web Developer 2010 Express Service Pack 1 來建立一個ASP.NET MVC4 Web應用程式所需要的基礎知識。建議您使用Visual Studio 2012，你將不再需要安裝任何組件，來完成此教程。如果您使用的是Visual Studio 2010，您必須安裝下面的組件。您可以通過點擊下面的連結，來安裝所需的所有組件：

• Visual Studio Web Developer Express SP1 prerequisites

• WPI installer for ASP.NET MVC 4

• LocalDB

• SSDT

如果您使用的是Visual Studio 2010而不是Visual Web Developer 2010，需要安裝WPI installer for ASP.NET MVC 4 和 Visual Studio 2010 prerequisites

本文的C#樣本原始碼，是一個 Visual Web Developer Project： 下載本文C＃樣本原始碼。

本樣本將構建什麼樣的應用程式？

您將實現一個簡單的電影列表應用程式，此程式將支援建立、 編輯、 搜尋和從資料庫中選取齣電影列表的功能。下面是您將構建的應用程式的兩個截屏。它包括顯示選取自資料庫的電影列表頁面：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image001" border="0" alt="clip_image001" width="625" height="474" src="http://www.bkjia.com/uploads/allimg/131228/1231324955-0.png" />

該應用程式還允許您添加、編輯和刪除電影，以及顯示單個記錄的詳細資料。所有的使用者資料輸入情境都包含了資料驗證邏輯，以確儲存儲在資料庫中的資料都是正確的。

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image002" border="0" alt="clip_image002" width="602" height="736" src="http://www.bkjia.com/uploads/allimg/131228/1231323529-1.png" />

入門

運行Visual Studio Express 2012或Visual Web Developer 2010 Express 來開始這個樣本，在這個系列中大多都使用了Visual Studio Express 2012的螢幕，同時你也可以使用Visual Studio 2010/SP1，Visual Studio 2012,Visual Studio Express 2012或Visual Web Developer 2010 Express來學習完成這個教程。從“開始” 頁面中，選擇“建立項目”。

Visual Studio是一個IDE整合式開發環境。就像您使用Microsoft Word來編寫文檔，你可以使用整合式開發環境IDE）來建立一個應用程式。在Visual Studio中的一個頂部工具列中顯示了各種不同的選項來供您使用。在IDE中還有一個菜單，提供了另一種方式來執行任務。例如，您可以不從“開始”頁面中，選擇“建立項目”，您可以使用該菜單，然後選擇“ 檔案“>“ 建立項目“）

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image003" border="0" alt="clip_image003" width="619" height="570" src="http://www.bkjia.com/uploads/allimg/131228/1231322J9-2.png" />

建立您的第一個應用程式

您可以使用 Visual Basic 或 C# 作為程式設計語言來建立您的應用程式。請在左側選擇 Visual C#，然後選擇ASP.NET MVC 4 Web 應用程式。命名您的工程為"MvcMovie"，然後單擊確定.

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image004" border="0" alt="clip_image004" width="634" height="672" src="http://www.bkjia.com/uploads/allimg/131228/1231323Y6-3.png" />

在新的 ASP.NET MVC 4 項目對話方塊中，選擇互連網應用程式。使用Razor作為預設視圖引擎。

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image005" border="0" alt="clip_image005" width="593" height="541" src="http://www.bkjia.com/uploads/allimg/131228/12313212E-4.png" />

單擊確定。Visual Studio 剛剛建立的 ASP.NET MVC 項目使用了預設的模板，所以在當前的工程中您不需要做任何事情！這是一個簡單的"Hello World ！"工程，並且這也是您開始“MvcMovie”工程的好地方。

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image006" border="0" alt="clip_image006" width="617" height="567" src="http://www.bkjia.com/uploads/allimg/131228/123132CF-5.png" />

從調試菜單中，選擇啟動調試.

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image007" border="0" alt="clip_image007" width="618" height="568" src="http://www.bkjia.com/uploads/allimg/131228/123132D39-6.png" />

請注意您也可以使用鍵盤的快速鍵F5來啟動調試。

F5使Visual Studio啟動IIS Express並運行Web應用程式。然後Visual Studio會啟動瀏覽器並開啟應用程式的首頁面。請注意，在瀏覽器的地址欄中會顯示 localhost 而不是像example.com 這樣的地址。這是因為 localhost總是會被解析為您自己的本機電腦，在這種情況下，這正是您你剛剛建立的應用程式。當Visual Studio運行一個Web工程時，會使用一個隨機連接埠的Web服務。在下面的圖片中，連接埠號碼是41788。當您運行該應用程式時，您可能會看到一個不同的連接埠號碼。650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-:" title="clip_image008" border="0" alt="clip_image008" width="672" height="524" src="http://www.bkjia.com/uploads/allimg/131228/1231325491-7.png" />

在預設範本頁面的右邊，為您提供了“首頁(Home)”, “關於(About)”和“聯絡(Contact)”頁面。它還提供了註冊和登入功能，並提供了Facebook和Twitter的連結。接下來的一步是修改此預設應用程式，並瞭解一些關於ASP.NET MVC的知識。關閉瀏覽器，讓我們修改一些原始碼吧。

譯者註：

本系列共9篇文章，翻譯自Asp.Net MVC4 官方教程，由於本系列文章言簡意賅，篇幅適中，從一個樣本開始講解，全文最終完成了一個管理影片的小系統，非常適合新手入門Asp.Net MVC4，並由此開始開發工作。9篇文章為：

1. Asp.Net MVC4 入門介紹

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4

· 譯文地址：http://powertoolsteam.blog.51cto.com/2369428/1047018

2. 添加一個控制器

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-controller

· 譯文地址：

3. 添加一個視圖

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view

· 譯文地址：

4. 添加一個模型

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-model

· 譯文地址：http://powertoolsteam.blog.51cto.com/2369428/1091907

5. 從控制器訪問資料模型

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/accessing-your-models-data-from-a-controller

· 譯文地址：http://powertoolsteam.blog.51cto.com/2369428/1114401

6. 驗證編輯方法和編輯檢視

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-methods-and-edit-view

· 譯文地址：http://powertoolsteam.blog.51cto.com/2369428/1125390

7. 給電影表和模型添加新欄位

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-new-field-to-the-movie-model-and-table

· 譯文地址：http://powertoolsteam.blog.51cto.com/2369428/1140334

8. 給資料模型添加校正器

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model

· 譯文地址：http://powertoolsteam.blog.51cto.com/2369428/1147449

9. 查詢詳細資料和刪除記錄

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-details-and-delete-methods

· 譯文地址：http://powertoolsteam.blog.51cto.com/2369428/1149311

10.第三方控制項Studio for ASP.NET Wijmo MVC4 工具應用

· 地址：http://powertoolsteam.blog.51cto.com/2369428/1196469