ASP.NET MVC 2樣本Tailspin Travel UI層分析

Tailspin Travel 是一個旅遊預訂的應用程式樣本，最新版本採用ASP.NET MVC 2技術構建，主要使用 DataAnnotations 驗證, 用戶端驗證和ViewModels，還展示了許多Visual Studio 2010, .NET Framework 4, 和Windows Server AppFabric的技術,參看ASP.NET MVC 2樣本Tailspin Travel。

Tailspin Travel設計的技術比較多，今天我們來看看介面（UI）上的技術，在UI層上來說主要採用的技術是ASP.NET MVC2和ASP.NET DynamicData架構。從功能上來分為向普通使用者提供的前台頁面和管理員使用的後台介面，前台頁面主要實現的是旅遊活動排程，航班，酒店，租車這幾部分採用的ASP.NET MVC 2技術，管理員用的後台管理頁面使用的是ASP.NET DynamicData開發的，這兩種技術在網站裡的應用有示範作用，對於管理員使用的背景訪問量不可能很大，網站的主要流量是普通使用者使用的前台頁面，組合使用這兩個架構，可以加快網站的開發。

組合這兩種技術，就會碰到一些的問題，第一個問題就是ASP.NET 動態資料(Dynamic Data )預設情況下，動態資料放在web應用的動態資料目錄(DynamicData)裡，該目錄建立在根目錄處。你的應用需要移動的不同的位置。 在Tailspin Travel裡面是“admin”目錄，動態資料就在這個目錄下，然後在Globa.asax.cs檔案裡

var metaModel = new MetaModel();
metaModel.RegisterContext(contextFactory, new ContextConfiguration { ScaffoldAllTables = true });
metaModel.DynamicDataFolderVirtualPath = "~/Admin/DynamicData/";

改變admin/Dynamicdata 下檔案的內容的引用到新的路徑（(~/admin/Dynamicdata）
例如：
A、修改List.aspx和ListDetails.aspx 的註冊指令的src屬性。
B、修改 List.aspx 和主版頁面的img 的src屬性。
C、任何自訂的必須使用新路徑的內容。

ASP.NET 4.0有個新特性叫做“自動啟動應用程式”，自動啟動，先行初始化web應用，而不必等待外部客戶端訪問web伺服器時才啟動的能力。這可以有助於你給第一個訪問者提供一個更快的回複體驗，避免撰寫定製指令碼來“預熱（warm up）”伺服器和準備好任何資料緩衝。它可用於任何類型的ASP.NET應用，包括基於ASP.NET Web Forms和ASP.NET MVC的應用。不過要求在IIS 7.5（隨Windows 7和Windows Server 2008 R2發布）上運行 ASP.NET 4時使用。這個自動啟動特性提供了一個可控制的方式來啟動一個應用背景工作處理序，初始化ASP.NET 應用，然後接受HTTP請求。具體參看Scott Guthrie 的文章 VS 2010 和 .NET 4.0 系列之《自動啟動ASP.NET應用》篇，Tailspin Travel有個類Microsoft.Samples.Tailspin.Web.Infrastructure.ApplicationPreloader，就是用這個特性積極式載入應用程式的緩衝。

下面我們來具體分析前台和管理後台：

前台採用ASP.NET MVC 2開發，比較簡單，主要是使用ViewModels，HtmlHelper，輸出緩衝，避免CSRF攻擊，查詢方法中使用PartialView，以及jQuery和ASP.NET Ajax配合的相關內容，可以參考 Asp.net MVC2 使用經驗，效能最佳化建議學習。

下面重點來說明一下管理背景DynamicData的結構，先可以閱讀一下Scott Guthrie 的文章 新的ASP.NET動態資料支援：

ASP.NET 動態資料在進行建立和更新資料時還會對所錄入的資料進行驗證，這種驗證既發生在用戶端也發生在伺服器端。

• 必要欄位驗證。如果欄位不允許為 NULL，則錄入時必須錄入資料。不過這裡還有待改進，不允許為 NULL，也就成了不允許零長度字串，而實際應用中 NULL 和零長度字串是兩回事。縱然不夠完美，也已經為我們減輕不少工作量了。
• 長度驗證。如果欄位類型為 nvarchar(10)，那麼就不允許超過 10 個字元；如果欄位類型不是 nvarchar(10)，而是 varchar(10)，此時六個漢字也會通過驗證，只是無法入庫罷了，會返回錯誤。
• 類型驗證。比如欄位是日期類型，則只允許錄入日期。

ASP.NET 動態資料具有自動格式功能：比如 bit 類型的欄位顯示為一個多選框，而識別欄位不會在插入資料時顯示出來。

ASP.NET 動態資料還具有自動識別表關聯的功能：比如產品表與產品類別表進行了關聯，那麼我們在錄入產品資料的時候，ASP.NET 動態資料會自動以下拉式清單的形式顯示產品類別。此功能非常不錯。

在網站或者應用程式模板中有兩個Dynamic Data模板，一個是 "Dynamic Data實體模板(Dynamic Data Entities )"它是使用ADO.net Entity作為資料模型的，另一個是 "Dynamic Data 模板"，他是使用LINQ TO SQL 來作為資料模型。Tailspin Travel 是以Entity Framework作為資料模型的。

Dynamic Data也使用了Routing：

            routes.Add(new DynamicDataRoute("Admin/{table}/{action}")
            {
                Constraints = new RouteValueDictionary(new { action = "List|Edit|Details|Insert" }),
                Model = metaModel
            });

routes.Add 的參數為一個 DynamicDataRoute 對象，而該 DynamicDataRoute 對象有一個參數為 "Admin/{table}/{action}.aspx"，另外還為該對象指定了兩個屬性值 Constraints 和 Model。把一個繼承自Route的DynamicDataRoute添加到Routing規則表中。

Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }) 這句表示約束，這裡表示 action 只能是 List、Details、Edit、Insert 中的一個。

可以看出，這四個Aciton是對應著DynamicData/PageTemplates檔案夾中的四個分頁檔。在那檔案夾中還有一個ListDetails.aspx分頁檔，是用於"合并頁模式"，就是所有的操作都會在一頁中完成。Tailspin Travel並沒有啟用這個功能。DynamicData 檔案夾的名稱都是“DynamicData”。

上面的 {table}、{action} 可不可以改成我們自己想要的名字呢？

不行的，我們可以看到，上面使用的是 DynamicDataRoute 類，而不是 Route 類，DynamicDataRoute 繼承於 Route，Table 和 Action 屬性是 DynamicDataRoute 特有的。

DynamicData/Content/GridViewPager.ascx 分頁控制項。

DynamicData/Content/FilterUserControl.ascx 在顯示表中的資料時，該控制項顯示在表頭，用以過濾表中的內容，比如可以只列表產品目錄為“工具 + 生產力”的產品。

DynamicData/CustomPages 檔案夾。自訂網頁模板檔案夾，可用以替換 DynamicData/PageTemplates 檔案夾中的預設範本。

DynamicData/FieldTemplates 檔案夾。包含各種類型的欄位在查看和建立、編輯時所呈現的控制項。

DynamicData/PageTemplates 檔案夾。包含在進行查看、編輯時的頁面模板。

Dynamic Data還有一個快速開發的基礎是腳手架，腳手架是一種機制，通過腳手架，我們不必再為每一個表的增加、查看、修改做不同的頁面，因為腳手架會自動產生這些頁面。Tailspin Travel對所有表都啟用腳手架，對所有表啟用腳手架表示公開了整個資料模型：

metaModel.RegisterContext(contextFactory, new ContextConfiguration { ScaffoldAllTables = true });

還可以對特定表啟用腳手架功能，這時就要將上面的ScaffoldAllTables = false，然後給模型類打標籤[System.ComponentModel.DataAnnotations.ScaffoldTable(true)]

 

自動產生的網站需要我們調整的頁面，需要建立自訂的頁面可以把它放在DynamicData/CustomPages 檔案夾，在 DynamicData/CustomPages/ 下建立一個檔案夾，名稱為 FlightBookings，這個名稱一定要與 Tailspin.edmx中的相應表的部分類別名稱一樣。然後將 DynamicData/PageTemplates/ 下的檔案複製到 DynamicData/CustomPages/FlightBookings/。

更改新模板檔案中的類名。

比如將類名稱 List 改為 DynamicDataTest.FlightBookingsList。

使用DisplayName更改介面的顯示，DisplayName 只能用於類、方法、屬性、索引、事件

[MetadataType(typeof(CarRentalMetadata))]
    public partial class CarRental
    {
        [ScaffoldTable(false)]
        private class CarRentalMetadata
        {
            [DisplayName("Pick up")]
            public object RentalStart { get; set; }

            [DisplayName("Return")]
            public object RentalEnd { get; set; }

            [DisplayName("Pick up Place")]
            [Required(ErrorMessage = "Please specify where you prefer to pickup the vehicle.")]
            public object PickupPlaceId { get; set; }

            [DisplayName("Return place")]
            [Required(ErrorMessage = "Please specify where you prefer to return the vehicle.")]
            public object ReturnPlaceId { get; set; }

            [DisplayName("Vehicle")]
            [Required(ErrorMessage = "Please specify the vehicle type.")]
            public object VehicleTypeId { get; set; }
        }
    }

還可以用 UIHint，DataType 改變欄位模板

[MetadataType(typeof(FlightMetadata))]
    public partial class Flight
    {
        public Flight()
        {
            this.Id = Guid.NewGuid();
        }

        [DisplayName("Flights")]
        private class FlightMetadata
        {
            [ScaffoldColumn(false)]
            public object Id { get; set; }

            [Required]
            public object AirplaneType { get; set; }

            [UIHint("Time")]
            public object DepartureTime { get; set; }

            [UIHint("Time")]
            [DataType(DataType.Time)]
            public object ArrivalTime { get; set; }

            [DisplayName("Departure Airport")]
            public object DepartureAirport { get; set; }

            [DisplayName("Arrival Airport")]
            public object ArrivalAirport { get; set; }
        }
    }

DynamicData非常的靈活，Tailspin Travel用來對付管理背景開發方面具有非常高的效率，在前台使用MVC2保證效能，在UI介面的開發方面非常值得借鑒的一種模式。