第一章 ASP.NET MVC 2 概述-用Asp.net MVC 15分鐘創建電影資料庫應用程序(1)

 這一節的教程的目的就是讓你知道怎麼創建一個ASP.NET MVC應用程序。在這次教程中我將通過從開始到結束創建一個完整的ASP.NET MVC

 

應用程序。我將給你展示如果創建一個數據庫驅動的應用程序,以及如何顯示列表,創建和編輯數據庫記錄。

 

     爲了簡化創建應用的過程,我們將充分利用到 Visual Studio 2008 快速創建應用程序的優點。我們將用Visual Studio 生成最初的代碼和

 

內容controllers(控制器), models(數據模型), and views(視圖)。如果你以前使用過ASP或是ASP.NET ,那麼你會覺得ASP.NET MVC和

 

他們有很多相似之處。 ASP.NET MVC 的views(視圖)非常像ASP中的頁面,也類似於傳統的 ASP.NET Web Forms 頁面。ASP.NET MVC

 

通過 .NET framework 向你提供了一整套多語言和抽象類的訪問方式。

 

     我希望通過這一教程能給予你不同與創建ASP應用程序或ASP.NET  Web Forms應用程序的體驗,那就是創建ASP.NET MVC 應用程序的

 

體驗我們將在這一節中給予你的。

 

 

電影資料庫應用程序

 

     因爲我的目標是使事情簡單,所以我們創建一個非常簡單的電影資料庫應用程序。我們的電影資料庫將實現以下功能:

 

  1. 顯示電影資料庫記錄列表
  2. 創建新的電影資料記錄
  3. 編輯已存在的電影資料庫記錄

 

     再次我們要保持事情的簡單,我們將利用 ASP.NET MVC framework提供給我們的優點特徵來創建我們的應用程序。爲了完成我們的應用程序,我們需要完成以下幾步。

  1. 創建 ASP.NET MVC Web應用程序工程 
  2. 創建數據庫
  3. 創建數據模型
  4. 創建 ASP.NET MVC 控制器
  5. 創建 ASP.NET MVC 視圖

 

準備工作

       你首先需要 Visual Studio 2008 或 Visual Web Developer 2008 Express來創建ASP.NET MVC應用程序,當然你必須要下

 

載  ASP.NET MVC framework,如果你現在沒有Visual Studio 2008(2010),那麼你可以從以下地址下載有90天試用期的VS 2008

 

http://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspx

 

       做爲另一種選擇你也可以使用Visual Web Developer Express 2008(2010)來創建SP.NET MVC來創建應用程序。如果你決定要使

 

用Visual Web Developer Express來開發,那麼你需要下載Service Pack 1並安裝,以下鏈接地址提供了Service Pack 1的下載地址。

http://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14&displaylang=en


      當你安裝了Visual Studio 2008(2010) 或Visual Web Developer 2008(2010)後,你還需要下載ASP.NET MVC framework.你

 

可以通過以下鏈接獲得ASP.NET MVC framework

http://www.asp.net/mvc/ 

 

 

 

創建 ASP.NET MVC Web 應用程序工程

         讓我們使用 Visual Studio 2008開始創建一個新的ASP.NET MVC Web 應用程序工程. 選擇菜單中和文件選項,

 

新建工程然後你能看到彈出的新建工程的對話框如圖1。選擇C#做爲程序開發語言並且選擇 ASP.NET MVC Web Application

 

project 模板,給你的工程取名爲MovieApp ,然後確定完成。

 

 

 

圖1

 

      你無論什麼時候創建一個新的 MVC Web Application 工程,VS 都會提示你創建一個分開的單元測試工程。如圖2中的對話框中所示選

 

擇。因爲這節教程中我們將不需要創建單元測試環境。選擇Nooption並且確認完成即可.

 

 

圖2

 

       一個ASP.NET MVC 應用程序中的文件夾有標準的設置:一個Models文件夾,一個Views文件夾和一個Controllers 文件夾

 

你能通過解決方案視圖查看到這些標準文件夾目錄結構。爲了要創建我們的電影資料庫應用程,我們需要向Models, Views, 以及

 

Controllers 中添加文件。

 

 

      當你通過VS創建了一個新的MVC 應用程序的同時,你就獲得了一個示例程序。因爲我們希望一切都自己來做。所以我們需要刪除示例程

 

序,你需要刪除以下文件和文件夾。

  • omeController.cs
  • Views/Home

 

 

 

創建數據庫

      我們需要創建一個數據庫來存儲我們的電影資料庫記錄。幸運的是,VS 中已經集成了一個 免費的數據庫它就是SQL Server Express

 

請按照以下步驟創建數據庫。

  1. 在解決方案視圖裏選擇App_Data右擊選擇Add,New Item
  2. 見圖3 選擇數據類型並且選擇SQL Server Database模板。
  3. 將你的數據庫名命名爲MoviesDB.mdf,確定添加完成

     當你創建數據庫成功後,你就能雙擊位於 App_Data文件夾下面的MoviesDB.mdf來連接數據庫。雙擊 MoviesDB.mdf打開服務瀏覽

 

窗口。

 

圖 3

 

       接着,我們需要創建一張新的數據表,從服務器瀏覽窗口中雙擊Tables 文件夾。並且選擇菜單選項Add New Table,選擇菜單選項進

 

入數據庫表設計模式,按照以下表創建數據表列。

 

Column Name Data Type Allow Nulls
Id Int False
Title Nvarchar(100) False
Director Nvarchar(100) False
DateReleased DateTime False
第一列,即Id列,有兩個特殊的操作。第一,你需要設置Id列爲主鍵。第二,你需要將Id 設置爲自動增長列.如圖 4所示

 

 

圖 4

 

 

這最後一步就是保存新創建的數據表,並且將新表命名爲Movies


   創建新表後就該添加一些電影資料記錄到數據表裏面了。在服務器瀏覽窗口中右擊Movies數據表選擇功能菜單 ShowTable,然後輸入

 

一些你感舉的電影吧。(見圖 5)


 

圖 5

 

 

創建數據模型

      下一步我們需要創建一些類來表現我們的數據庫。我們需要創建一個數據庫模型。我們將利用到Microsoft EntityFramework


自動創建的優點來生成這些類。值得注意的是ASP.NETMVC framework並不依賴於MicrosoftEntity Framework。你可以創建


自己的數據庫模型,通過多樣的Object Relational Mapping (OR/M)對象關係映射工具來創建數據庫模型類如LINQ to SQL, Subsonic


和Nhibernate。

 

按照以下的步驟開始Entity Data Model的創建:


1.   在解決方案管理器視圖中右擊Models 文件夾選擇菜單選項Add, New Item.

2.   在解決方案管理器視圖中右擊Models 文件夾選擇菜單選項選擇數據類型並且選擇ADO.NET Entity DataModel  模板

3.   給你的數據模型取名爲MoviesDBModel.edmx  點擊Add  按鈕。

當你保存後,數據模型爲出現以下向導(見 圖 6)按照以下步驟完成嚮導。

1.   在 Choose Model Contents 這步, 選擇 Generate fromdatabase選項.

2.   在 Choose Your Data Connection 這步, 用 MoviesDB.mdf 數據來連接, 並將連接設置命名爲  MoviesDBEntities.選擇Next 按鈕進行下一步操作.

3.   在 Choose Your Database Objects  這步, 展開Tables 節點, 選擇 Movies table. 輸入命空間MovieApp.Models 點擊 Finish完成操作.

 

圖 6

 

 

       當你完成Entity Data Model 創建嚮導後,  EntityData Model Designer 自選打開.  Designer(設計器) 應該展示 Movies 數據表 (見 圖 7).

 

圖 7

 

 

       在我們繼續進行之前我們需要做一點小小的改動。實體數據嚮導生成的模型類名稱爲Movies 這樣就和數據庫表的Movies 表重複了。


因爲我們將要使用Movies類來表示單一的movie,所以我們需要修改將Movies 類修改爲Movies類雙擊designer 類名


並且將名稱修改爲Movie ,修改後保存便生成Movie 類了。


 

創建 ASP.NET MVC Controller


下一步我們將創建 ASP.NET MVC controller(控制器). 一個controller主要負責for controlling ASP.NETMVC 應用程序的用戶交互。

按照以下步驟創建:

1.   在解決方案管理器視圖中右擊 Controllers 文件夾並選擇菜單選項 Add, Controller.

2.   在選擇添加 Controller 對話框中, 輸入名稱 HomeController 並勾選 Add action methods for Create, Update, andDetails scenarios (見 圖 8).

3.   點擊 Add 按鈕添加新的 controller到你的工程中.

當你完成這些步驟後,controller 已經創建好了代碼如列表 1. 提示 這個類中包含方法 Index, Details,Create, and Edit. 在接下來的工作中,我們將添加必要的代碼讓這法方法被執行。

 

圖 8


Listing 1 – Controllers/HomeController.cs

  1. Listing 1 – Controllers/HomeController.cs  
  2. using System;  
  3.     using System.Collections.Generic;  
  4.     using System.Linq;  
  5.     using System.Web;  
  6.     using System.Web.Mvc;  
  7.     using System.Web.Mvc.Ajax;   
  8.     namespace MovieApp.Controllers  
  9.     {  
  10.         public class HomeController : Controller  
  11.         {  
  12.             //  
  13.             // GET: /Home/   
  14.             public ActionResult Index()  
  15.             {  
  16.                 return View();  
  17.             }   
  18.             //  
  19.             // GET: /Home/Details/5   
  20.             public ActionResult Details(int id)  
  21.             {  
  22.                 return View();  
  23.             }   
  24.             //  
  25.             // GET: /Home/Create   
  26.             public ActionResult Create()  
  27.             {  
  28.                 return View();  
  29.             }    
  30.             //  
  31.             // POST: /Home/Create   
  32.             [AcceptVerbs(HttpVerbs.Post)]  
  33.             public ActionResult Create(FormCollection collection)  
  34.             {  
  35.                 try  
  36.                 {  
  37.                     // TODO: Add insert logic here   
  38.                     return RedirectToAction("Index");  
  39.                 }  
  40.                 catch  
  41.                 {  
  42.                     return View();  
  43.                 }  
  44.             }   
  45.             //  
  46.             // GET: /Home/Edit/5  
  47.             public ActionResult Edit(int id)  
  48.             {  
  49.                 return View();  
  50.             }   
  51.             //  
  52.             // POST: /Home/Edit/5   
  53.             [AcceptVerbs(HttpVerbs.Post)]  
  54.             public ActionResult Edit(int id, FormCollection collection)  
  55.             {  
  56.                 try  
  57.                 {  
  58.                     // TODO: Add update logic here  
  59.                     return RedirectToAction("Index");  
  60.                 }  
  61.                 catch  
  62.                 {  
  63.                     return View();  
  64.                 }  
  65.             }  
  66.         }  
  67.     }   
 

 

 

數據庫記錄列表


        在Home controller 中的 Index() 方法是 ASP.NET MVC 應用程序中的默認執行方法 。當你運行 ASP.NET MVC 應用程序時,

 

 Index()方法是controller中第一個被 調用的方法。我們將使用Index()方法來展示Movies數據表中的記錄列表。我們將用數據模型類來提

 

供數據給Index() 方法。我將修改HomeController 中的代碼如列表2 所示。其中包括一個新的私用字named_db。


MoviesDBEntities 類將表示我們的數據模型並且我們將用這個類與數據庫進行交互。


          在列表達式2中我也修改了Index()方法.  Index() method 使用了 MoviesDBEntities 類來展示來自數據庫表Movies的所有記錄.

 

 expression _db.MovieSet.ToList() 返加了來自數據庫表Movies所有的記錄的列表。這電影列表將傳遞給視圖。 任何通過View()方法的

 

數據都將被通過view data傳遞給視圖


列表 2 –Controllers/HomeController.cs (修改 Index 方法)


 

  1. using System.Linq;  
  2.     using System.Web.Mvc;  
  3.     using MovieApp.Models;   
  4.     namespace MovieApp.Controllers  
  5.     {  
  6.         public class HomeController : Controller  
  7.         {  
  8.             private MoviesDBEntities _db = new MoviesDBEntities();   
  9.             public ActionResult Index()  
  10.             {  
  11.                 return View(_db.MovieSet.ToList());  
  12.             }  
  13.         }  
  14.     }   
 

 

 

       Index() 方法返回一個Index 的視圖。所以我們需要創建這個視圖來展示電影資料庫的列表,請按照以下步驟操作:


1.    在添加視圖之前你需要重新生成你的解決方案 。右擊Index() 方法在代碼編輯器裏面選擇菜單選項 iAdd View (如 圖 9).

2.   在添加視圖的對話框中, 勾選Create astrongly-typed view 選項.

3.   從View content 下拉列表中選擇 List選項。

4.   從 View data class 下拉列表中,選擇 valueMovieApp.Models.Movie

5.   點擊Add 按扭確認添加新視圖(見 圖 10).


當你完成以上步驟後,將新的視圖命名爲 Index.aspx F�p�pan>並被添加到 Views/Home 文件夾中. Index view 代碼包含在 列表 3中。

 

 

圖 9

 

圖 10

 

 

Listing 3 – Views/Home/Index.aspx

 

  1. <%@ Page Title="" Language="C#" MasterPageFile="/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MovieApp.Models.Movie>>" %>   
  2.    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">  
  3.       Index  
  4.    </asp:Content>   
  5.    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">   
  6.        <h2>Index</h2>   
  7.        <table>  
  8.            <tr>  
  9.                <th></th>  
  10.                <th>  
  11.                    Id  
  12.                </th>  
  13.                <th>  
  14.                    Title  
  15.                </th>  
  16.                <th>  
  17.                    Director  
  18.                </th>  
  19.                <th>  
  20.                    DateReleased  
  21.                </th>  
  22.            </tr>   
  23.        <% foreach (var item in Model) { %>  
  24.          
  25.            <tr>  
  26.                <td>  
  27.                    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |  
  28.                    <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>  
  29.                </td>  
  30.                <td>  
  31.                    <%= Html.Encode(item.Id) %>  
  32.                </td>  
  33.                <td>  
  34.                    <%= Html.Encode(item.Title) %>  
  35.                </td>  
  36.                <td>  
  37.                    <%= Html.Encode(item.Director) %>  
  38.                </td>  
  39.                <td>  
  40.                    <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>  
  41.                </td>  
  42.            </tr>  
  43.          
  44.        <% } %>   
  45.        </table>   
  46.        <p>  
  47.            <%= Html.ActionLink("Create New", "Create") %>  
  48.        </p>   
  49.    </asp:Content>   
  50.       
 

 

 

 

       Index 視圖通過HTMLtable展示從數據表Movies中的所有記錄。視圖通過對ViewData Model屬性進行迭代用 foreach語句展示出

 

來。如果你要運行此應用程序請按F5鍵,你就可以看到頁面了(如圖11)

圖 11

 

 

創建新的數據記錄


         Index 視圖創建的時候包含了一個創建新的數據記錄的鏈接。讓我們從頭再來,創建一個能新建的數據記錄的視圖 。


Home controller 中有兩個名稱爲 Create()的方法。第一個 Create() 方法沒有參數。


這個Create() 方法將用來顯示創建新的電影資料庫的 HTML form 。


第二個Create() 方法擁有一個 FormCollection 參數. 這個 Create() 方法是在創建新的電影提交到服務器上的時候被調用的。


第二個 Create() 已經修改了HomeController的代碼 如列4所示。新的Create() 接收  Movie參數並且包含插入新的電影到Movies 數據

 

表中的邏輯代碼。


列表 4 –Controllers/HomeController.cs (修改 Create 方法代碼) 

 

  1. //  
  2.             // GET: /Home/Create   
  3.             public ActionResult Create()  
  4.             {  
  5.                 return View();  
  6.             }    
  7.             //  
  8.             // POST: /Home/Create   
  9.             [AcceptVerbs(HttpVerbs.Post)]  
  10.             public ActionResult Create([Bind(Exclude="Id")] Movie movieToCreate)  
  11.             {  
  12.                  if (!ModelState.IsValid)  
  13.                     return View();   
  14.                 _db.AddToMovieSet(movieToCreate);  
  15.                 _db.SaveChanges();   
  16.                 return RedirectToAction("Index");  
  17.             }   
 

 

 

VS 能夠很容易的創建一條電影數據記錄 (如圖 12)。請按以下步驟操作:


1.   在代碼編輯器裏右擊Create()選擇菜單選項Add View.

2.   勾選 Create astrongly-typed view

3.   從 View content 下拉列表中選擇 Create項.

4.   從 View data class 下拉列表中選擇 valueMovieApp.Models.Movie項.

5.   點擊 Add按鈕創建新的視圖

 

圖 12

 

 

VS自動生成了視圖列表 5中的代碼。視圖包含的 HTML form 包含了每個Movie的屬性。


列表 5 – Views/Home/Create.aspx


  1. VS自動生成了視圖列表 5中的代碼。視圖包含的 HTML form 包含了每個Movie的屬性。  
  2. 列表 5 – Views/Home/Create.aspx  
 

 

       當你完成了添加視圖後,你就可以添加新的電影數據到數據庫中了。按 F5 運行應用程序點擊創建新記錄的鏈接如圖13所示。


如果你完成了新的新數據的提交,那麼一條新的電影數據記錄就產生了。

 

圖 13

 

 

編輯數據庫記錄


         在前兩的章節中我們討論瞭如何列出和創建數據庫記錄,在最後一節中我們將討論如何編輯數據庫記錄。


首先,我們需要生成編輯表單。這一步很簡單VS會我們自動生成編輯表單的代碼。


在代碼編輯器裏打開HomeController.cs 文件按如下步驟操作。


1.   在代碼編輯器裏右擊 Edit() 方法選擇菜單選項 Add View (如 圖 14).

2.   勾選 Create astrongly-typed view.

3.   從 View content 下拉列表中選擇 Edit

4.   從 View data class下拉列表中選擇MovieApp.Models.Movie項

5.   點擊 Add 添加新的視圖


完成以上步驟後就有一個名稱爲Edit.aspx頁面文件在 Views/Home 文件夾下。 這個視圖包含有一個編輯電影記錄的  HTML 表單。 

 

 


 

圖 14

 

 

最後我們需要修改Home controller 中的代碼來完成我們編輯數據庫記錄的功能。更新的HomeController 中編輯功能的代碼如列表6。


列表 6 –Controllers/HomeController.cs (Edit methods) 

 

  1. //  
  2.    // GET: /Home/Edit/5   
  3.    public ActionResult Edit(int id)  
  4.    {  
  5.        var movieToEdit = (from m in _db.MovieSet  
  6.                           where m.Id == id  
  7.                           select m).First();   
  8.        return View(movieToEdit);  
  9.    }   
  10.    //  
  11.    // POST: /Home/Edit/5   
  12.    [AcceptVerbs(HttpVerbs.Post)]  
  13.    public ActionResult Edit(Movie movieToEdit)  
  14.    {   
  15.        var originalMovie = (from m in _db.MovieSet  
  16.                             where m.Id == movieToEdit.Id  
  17.                             select m).First();   
  18.        if (!ModelState.IsValid)  
  19.            return View(originalMovie);  
  20.            _db.ApplyPropertyChanges(originalMovie.EntityKey.EntitySetName, movieToEdit);  
  21.            _db.SaveChanges();   
  22.            return RedirectToAction("Index");  
 

 

 

 

綜述

         這個教程的目的就是要讓你擁有創建一個 ASP.NETMVC應用程序的經驗。我希望你能發現創建一個ASP.NET MVC應用程序比起創

 

建ASP和ASP.NET 應用程序來說是如何的簡單。在這次教程中我們只用到了ASP.NET MVC framework提供給我們的最基本的功能物徵。

 

在以後的教程中我們將深入的學習如controllers,controller actions, views, view data, 和 HTML helpers等。

 

 

 

翻譯原文地址:http://www.asp.net/mvc/tutorials/create-a-movie-database-application-in-15-minutes-with-asp-net-mvc-cs

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章