【51CTO獨家特稿】要想建立開發環境，你需要安裝Visual Studio 2008/2010 Beta 2，以及SQL Express 2005（可免費從MSDN下載）和MVC 2.0框架。我把本文中的示例Web應用命名為“Employee Master Information”。51CTO-.NET頻道向您推薦《ASP.NET MVC框架視頻教程》以便于您更好的理解本文。

使用該應用程序，你可以輸入新員工數據，編輯現有員工數據，可以查看特定員工數據，和從數據庫中給刪除任意員工信息。該應用程序還使用了ASP.NET的Membership Provider來創建新用戶和認證已有用戶，客戶端驗證通過JavaScript實現。

圖1

創建MVC項目、數據庫和數據模型

在此前的ASP.NET MVC 2.0文章中，我討論過如何使用Visual Studio 2008編輯器來創建一個MVC Web應用程序。在本篇文章中我使用VS2008（.NET框架3.5）創建的項目名稱為“MyMvcSample”。創建了MVC 2.0網站后，接下來將是創建數據庫和數據模型。

圖2

右鍵點擊項目的“App_Data”文件夾，并向你的解決方案增加一個“SQL Server Database”對象。如果你的開發環境中沒有安裝“SQL Express”，你不會在“Template”窗口中看到這個選項。將SQL Express數據庫的名稱指定為MySampleDatabase.mdf，點擊“Add”按鈕后，一個新數據庫將被添加到App_Data文件夾中。現在從“View”菜單中打開“Server Explorer”；你將看到MySampleDatabase.mdf數據庫已經存在。右鍵點擊該數據庫下的“Tables”對象，增加一個名為“tblEmployee”的新表。在該表中添加以下列。

EmployeeName nvarchar(100)   
EmployeeSalary numeric(18, 2)   
EmployeeId int (Primary Key)   
Department nvarchar(100)   
Age int  
Skillset nvarchar(1000)   
Role nvarchar(50) 

對于主鍵列，你需要修改兩個屬性：將“Identity Specification”的值從“No”改為“Yes”，將“Identity Increment”從0改為1。表創建完后，增加一些示例數據以供測試用。

圖3

接下來你需要創建一個數據模型，右鍵點擊“Model”文件夾，并增加一個新條目。從模板列表中選擇“ADO.NET Entity Data Model”。在本示例中我的模型名稱為“DataModel.edmx”。點擊增加按鈕向你的解決方案添加該模型。接下來你將看到一個向導界面，它將指導你為剛才創建的模型增加數據源。選擇“Generate from Database”并點擊下一步。

接下來你需要選擇合適的數據源，從列表中選擇此前創建的“MySampleDatabase.mdf”，并為該數據源指定一個名稱。在解決方案web.config文件下的“ConnectionStrings”標簽下，你將看到一個自動生成的包含數據源名稱和連接字符串的條目。在本例中我的連接名稱是“MySampleDatabaseEntities”。接下來，檢查tblEmployee，并向你的模型提供一個命名空間名稱。

圖4

在模型創建后，在模型查看器中打開DataModel.edmx。該查看器將幫助你查看模型數據源，以及模型和數據庫之間的字段映射。使用模型查看器你還可以更改模型屬性、字段名和數據類型。這個“Employee”模型將被在Controller類中使用，來增加、編輯和刪除數據庫中的員工詳細信息。DataModel.edmx是一個ADO.NET Entity Framework對象，可以在進行插入、更新或刪除數據時減少代碼編寫工作量。ADO.NET Entity Framework還支持LINQ，因此你可以在業務對象上編寫查詢類的SQL，而無需編寫存儲過程來抓取數據。

圖5

#p#

創建控制器

控制器將會用到 Microsoft.Web.Mvc.Build.dll和Microsoft.Web.Mvc.dll中的類。因此在編譯應用程序之前，應檢查上述兩個動態庫已經在你的bin文件夾下。

對于增加、編輯、刪除和查看員工職責詳細信息等操作，我已經在我的HomeController中增加了“Get”和“Post”函數。控制器中的每一個函數都被關聯到一個視圖（.ASPX頁面），例如為了查看員工列表，我編寫了“Index”函數來返回員工列表信息，該信息將被顯示在名為“Index.aspx”的視圖中。要想顯示某個特定員工的數據，則會調用Details函數。

Function Details(ByVal id As Integer) As ActionResult  
Dim objEditEmployee = (From c In objDatabaseEntities.EmployeeSet 
Where c.EmployeeId = id Select c).FirstOrDefault()  
            Return View(objEditEmployee)  
End Function 

LINQ被用來查詢業務對象和從Employee List模型中查找某個特定員工。通過使用“Return View”，這個員工對象將被發回到相應的視圖。至于創建一個新員工，我也為“Create”方法創建了“Get”和“Post”兩個版本。該方法的Get版將重定向到一個空白Employee頁面/視圖，由用戶來輸入員工詳細信息，而Post版的“Create”函數將使用我們之前創建的Employee Model對象保存數據庫中的員工詳細信息。51C TO-.NET頻道向您推薦《LINQ教程-LINQ to SQL技術精解》專題。

圖6

我對Create.aspx頁面中的所有輸入字段都添加了合適的客戶端驗證代碼。如果新輸入的員工姓名已經存在，則數據不會被插入到數據庫中。

Function Create(ByVal objEmployee As Employee) As ActionResult  
            Try  
Dim objExtEmployee = (From c In objDatabaseEntities.EmployeeSet Where   
c.EmployeeName = objEmployee.EmployeeName Select c).FirstOrDefault()  
         If objExtEmployee Is Nothing Then  
              objDatabaseEntities.AddToEmployeeSet(objEmployee)  
              objDatabaseEntities.SaveChanges()  
              Return RedirectToAction("Index")  
                End If  
            Catch  
                Return View()  
            End Try  
            Return RedirectToAction("Index")  
End Function 

對于編輯員工詳細信息，我也創建“Get”和“Post”版的Edit函數，不過我在HomeController本身中增加了驗證機制。如果驗證失敗的話，我會使用Modelstate.Addmodelerror()函數來向相應視圖拋出一個錯誤信息。

Protected Sub ValidateContact(ByVal EmployeeToValidate As Employee)  
     If EmployeeToValidate.EmployeeName.Trim().Length = 0 Then  
         ModelState.AddModelError("Employee Name", "Employee name is required   
         field.")  
     End If  
     If EmployeeToValidate.EmployeeId.ToString().Trim().Length = 0 Then  
     ModelState.AddModelError("Employee Id", "Employee Id is required field.")  
     End If  
     If (EmployeeToValidate.Department.Length = 0) Then  
     ModelState.AddModelError("Employee Department", "Employee Department is   
      required field.")  
     End If  
     If (EmployeeToValidate.EmployeeSalary.ToString().Length = 0) Then  
     ModelState.AddModelError("Employee Salary", "Employee Salary is required   
         field.")  
     End If  
     If (EmployeeToValidate.Age.ToString().Length = 0) Then  
 ModelState.AddModelError("Employee Age", "Employee Age is required field.")  
     End If  
     If (EmployeeToValidate.Skillset.ToString().Length = 0) Then  
ModelState.AddModelError("Employee Skillset", "Employee Skillset is required   
         field.")  
     End If  
     If (EmployeeToValidate.Skillset.ToString().Length = 0) Then  
         ModelState.AddModelError("Employee Role", "Employee Role is required   
         field.")  
     End If  
 End Sub 

在刪除員工列表方面，我只增加了一個Get版，并在視圖中增加了必要的JavaScript驗證代碼（確認信息）。

創建視圖

在一個ASP.NET MVC應用中，所有入站的瀏覽器請求都被映射到控制器行為上。控制器行為可能會返回一個視圖。與ASP.NET頁面不一樣，MVC視圖后端沒有任何代碼。你可以通過右鍵點擊控制器post函數并選擇“view”選項來創建視圖。向項目增加視圖的第二種方法是，右鍵點擊你的視圖文件夾，并增加一個新視圖。默認情況下，沒有后端代碼的.ASPX就是這些視圖。你可以在項目中增加一個.ASCX文件和HTML文件作為視圖。

圖7

本例中，我創建了4個不同的視圖來實現增加、編輯、列舉和顯示員工詳細信息，它們都是強類型視圖。我使用了HTML幫助類，在視圖中創建HTML對象和驗證信息來驗證客戶端數據項。以下代碼顯示了如何使用HTML幫助類創建一個HTML輸入控制和添加驗證。

<div class="editor-field"> 
<%= Html.TextBoxFor(Function(model) model.EmployeeName) %> 
<%= Html.ValidationMessageFor(Function(model) model.EmployeeName) %> 
</div> 

我試用HTML輔助方法ActionLink來實現視圖導航，使用Html.Encode()來將“<”和“>”等特殊字符編碼成可以在網頁上正常顯示的字符。微軟推薦使用HTML.Encode()方法來防止JavaScript注入攻擊。以下是向數據庫增加一名新員工的代碼。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2>Create Employee</h2> 
    <%=""%> 
    <% Using Html.BeginForm()%> 
 
        <fieldset> 
            <legend>Details to Enter</legend>            
            <div class="editor-label"> 
                <%=Html.LabelFor(Function(model) model.EmployeeName)%> 
            </div> 
            <div class="editor-field"> 
             <%= Html.TextBoxFor(Function(model) model.EmployeeName) %> 
     <%= Html.ValidationMessageFor(Function(model) model.EmployeeName) %> 
            </div>            
            <div class="editor-label"> 
                <%= Html.LabelFor(Function(model) model.EmployeeSalary) %> 
            </div> 
            <div class="editor-field"> 
                <%= Html.TextBoxFor(Function(model) model.EmployeeSalary) %> 
    <%= Html.ValidationMessageFor(Function(model) model.EmployeeSalary) %> 
            </div>            
            <div class="editor-label"> 
                <%= Html.LabelFor(Function(model) model.EmployeeId) %> 
            </div> 
            <div class="editor-field"> 
        <%= Html.TextBoxFor(Function(model) model.EmployeeId) %> 
         <%= Html.ValidationMessageFor(Function(model) model.EmployeeId) %> 
            </div>            
            <div class="editor-label"> 
                <%= Html.LabelFor(Function(model) model.Department) %> 
            </div> 
            <div class="editor-field"> 
                <%= Html.TextBoxFor(Function(model) model.Department) %> 
       <%= Html.ValidationMessageFor(Function(model) model.Department) %> 
            </div>            
            <div class="editor-label"> 
                <%= Html.LabelFor(Function(model) model.Age) %> 
            </div> 
            <div class="editor-field"> 
                <%= Html.TextBoxFor(Function(model) model.Age) %> 
        <%= Html.ValidationMessageFor(Function(model) model.Age) %> 
            </div> 
              
            <div class="editor-label"> 
                <%= Html.LabelFor(Function(model) model.Skillset) %> 
            </div> 
            <div class="editor-field"> 
                <%= Html.TextBoxFor(Function(model) model.Skillset) %> 
         <%= Html.ValidationMessageFor(Function(model) model.Skillset) %> 
            </div>            
            <div class="editor-label"> 
                <%= Html.LabelFor(Function(model) model.Role) %> 
            </div> 
            <div class="editor-field"> 
                <%= Html.TextBoxFor(Function(model) model.Role) %> 
         <%= Html.ValidationMessageFor(Function(model) model.Role) %> 
            </div> 
              
            <p> 
                <input type="submit" value="Create" /> 
            </p> 
        </fieldset> 
    <% End Using %> 
    <div> 
        <%=Html.ActionLink("Back to Employee List", "Index")%> 
    </div> 
</asp:Content> 

結束語

對于那些剛接觸ASP.NET Web編程的開發者來說，學習MVC框架并不是一件難事。MVC框架應用程序的代碼也非常容易維護。另外，開發者還可以在該框架中使用測試驅動開發方法。

原文題目：Create a Web App Using ASP.NET MVC 2.0 Framework

【編輯推薦】

1. 添加設置ASP.NET Web時出現問題
2. 詳細說明ASP.NET 2.0功能支持
3. 強化部署ASP.Net 2.0配置應用程序
4. 微軟PDC2009直擊：改進ASP.NET 4運行時
5. 詳解ASP.NET MVC 2自定義驗證