淺析ASP.NET MVC 2中的Tailspin Travel UI層

作者：張善友 2010-03-26 09:16:44

本文將為大家分析ASP.NET MVC 2中的Tailspin Travel UI層，希望通過本文能對(duì)大家有所幫助。

在這里我們將從一個(gè)實(shí)例為大家分析ASP.NET MVC 2中的Tailspin Travel UI層，51CTO也向您推薦專訪微軟MVP衣明志：走進(jìn)ASP.NET MVC 2框架開發(fā)。以便于大家更好的理解ASP.NET MVC。

Tailspin Travel 是一個(gè)旅游預(yù)訂的應(yīng)用程序示例，最新版本采用ASP.NET MVC 2技術(shù)構(gòu)建，主要使用 DataAnnotations 驗(yàn)證, 客戶端驗(yàn)證和ViewModels，還展示了許多Visual Studio 2010, .NET Framework 4, 和Windows Server AppFabric的技術(shù),參看ASP.NET MVC 2示例Tailspin Travel。

Tailspin Travel設(shè)計(jì)的技術(shù)比較多，今天我們來看看界面（UI）上的技術(shù)，在UI層上來說主要采用的技術(shù)是ASP.NET MVC2和ASP.NET DynamicData框架。從功能上來分為向普通用戶提供的前臺(tái)頁面和管理員使用的后臺(tái)界面，前臺(tái)頁面主要實(shí)現(xiàn)的是旅游活動(dòng)日程安排，航班，酒店，租車這幾部分采用的ASP.NET MVC 2技術(shù)，管理員用的后臺(tái)管理頁面使用的是ASP.NET DynamicData開發(fā)的，這兩種技術(shù)在網(wǎng)站里的應(yīng)用有示范作用，對(duì)于管理員使用的后臺(tái)的訪問量不可能很大，網(wǎng)站的主要流量是普通用戶使用的前臺(tái)頁面，組合使用這兩個(gè)框架，可以加快網(wǎng)站的開發(fā)。

組合這兩種技術(shù)，就會(huì)碰到一些的問題，第一個(gè)問題就是ASP.NET 動(dòng)態(tài)數(shù)據(jù)(Dynamic Data )默認(rèn)情況下，動(dòng)態(tài)數(shù)據(jù)放在web應(yīng)用的動(dòng)態(tài)數(shù)據(jù)目錄(DynamicData)里，該目錄創(chuàng)建在根目錄處。你的應(yīng)用需要移動(dòng)的不同的位置。在Tailspin Travel里面是“admin”目錄，動(dòng)態(tài)數(shù)據(jù)就在這個(gè)目錄下，然后在Globa.asax.cs文件里

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

改變admin/Dynamicdata 下文件的內(nèi)容的引用到新的路徑（(~/admin/Dynamicdata）
例如：

A、修改List.aspx和ListDetails.aspx 的注冊(cè)指令的src屬性。

B、修改 List.aspx 和母版頁的img 的src屬性。

C、任何自定義的必須使用新路徑的內(nèi)容。

ASP.NET 4.0有個(gè)新特性叫做“自動(dòng)啟動(dòng)應(yīng)用程序”，自動(dòng)啟動(dòng)，先行初始化web應(yīng)用，而不必等待外部客戶端訪問web服務(wù)器時(shí)才啟動(dòng)的能力。這可以有助于你給第一個(gè)訪問者提供一個(gè)更快的回復(fù)體驗(yàn)，避免撰寫定制腳本來“預(yù)熱（warm up）”服務(wù)器和準(zhǔn)備好任何數(shù)據(jù)緩存。它可用于任何類型的ASP.NET應(yīng)用，包括基于ASP.NET Web Forms和ASP.NET MVC的應(yīng)用。不過要求在IIS 7.5（隨Windows 7和Windows Server 2008 R2發(fā)布）上運(yùn)行 ASP.NET 4時(shí)使用。這個(gè)自動(dòng)啟動(dòng)特性提供了一個(gè)可控制的方式來啟動(dòng)一個(gè)應(yīng)用工作進(jìn)程，初始化ASP.NET 應(yīng)用，然后接受HTTP請(qǐng)求。具體參看Scott Guthrie 的文章 VS 2010 和 .NET 4.0 系列之《自動(dòng)啟動(dòng)ASP.NET應(yīng)用》篇，Tailspin Travel有個(gè)類Microsoft.Samples.Tailspin.Web.Infrastructure.ApplicationPreloader，就是用這個(gè)特性預(yù)先加載應(yīng)用程序的緩存。

下面我們來具體分析前臺(tái)和管理后臺(tái)：

前臺(tái)采用ASP.NET MVC 2開發(fā)，比較簡單，主要是使用ViewModels，HtmlHelper，輸出緩存，避免CSRF攻擊，查詢方法中使用PartialView，以及jQuery和ASP.NET Ajax配合的相關(guān)內(nèi)容，可以參考 Asp.net MVC2 使用經(jīng)驗(yàn)，性能優(yōu)化建議學(xué)習(xí)。

下面重點(diǎn)來說明一下管理后臺(tái)的DynamicData的結(jié)構(gòu)，先可以閱讀一下Scott Guthrie 的文章新的ASP.NET動(dòng)態(tài)數(shù)據(jù)支持：

ASP.NET 動(dòng)態(tài)數(shù)據(jù)在進(jìn)行創(chuàng)建和更新數(shù)據(jù)時(shí)還會(huì)對(duì)所錄入的數(shù)據(jù)進(jìn)行驗(yàn)證，這種驗(yàn)證既發(fā)生在客戶端也發(fā)生在服務(wù)器端。

必填字段驗(yàn)證。如果字段不允許為 NULL，則錄入時(shí)必須錄入數(shù)據(jù)。不過這里還有待改進(jìn)，不允許為 NULL，也就成了不允許零長度字符串，而實(shí)際應(yīng)用中 NULL 和零長度字符串是兩回事。縱然不夠完美，也已經(jīng)為我們減輕不少工作量了。

長度驗(yàn)證。如果字段類型為 nvarchar(10)，那么就不允許超過 10 個(gè)字符；如果字段類型不是 nvarchar(10)，而是 varchar(10)，此時(shí)六個(gè)漢字也會(huì)通過驗(yàn)證，只是無法入庫罷了，會(huì)返回錯(cuò)誤。

類型驗(yàn)證。比如字段是日期類型，則只允許錄入日期。

ASP.NET 動(dòng)態(tài)數(shù)據(jù)具有自動(dòng)格式功能：比如 bit 類型的字段顯示為一個(gè)多選框，而標(biāo)識(shí)字段不會(huì)在插入數(shù)據(jù)時(shí)顯示出來。

ASP.NET 動(dòng)態(tài)數(shù)據(jù)還具有自動(dòng)識(shí)別表關(guān)聯(lián)的功能：比如產(chǎn)品表與產(chǎn)品類別表進(jìn)行了關(guān)聯(lián)，那么我們?cè)阡浫氘a(chǎn)品數(shù)據(jù)的時(shí)候，ASP.NET 動(dòng)態(tài)數(shù)據(jù)會(huì)自動(dòng)以下拉列表的形式顯示產(chǎn)品類別。此功能非常不錯(cuò)。

在網(wǎng)站或者應(yīng)用程序模板中有兩個(gè)Dynamic Data模板，一個(gè)是 "Dynamic Data實(shí)體模板(Dynamic Data Entities )"它是使用ADO.net Entity作為數(shù)據(jù)模型的，另一個(gè)是 "Dynamic Data 模板"，他是使用LINQ TO SQL 來作為數(shù)據(jù)模型。Tailspin Travel 是以Entity Framework作為數(shù)據(jù)模型的。

Dynamic Data也使用了Routing：

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

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

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

可以看出，這四個(gè)Aciton是對(duì)應(yīng)著DynamicData/PageTemplates文件夾中的四個(gè)頁面文件。在那文件夾中還有一個(gè)ListDetails.aspx頁面文件，是用于"合并頁模式"，就是所有的操作都會(huì)在一頁中完成。Tailspin Travel并沒有啟用這個(gè)功能。DynamicData 文件夾的名稱都是“DynamicData”。

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

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

DynamicData/Content/GridViewPager.ascx 分頁控件。

DynamicData/Content/FilterUserControl.ascx 在顯示表中的數(shù)據(jù)時(shí)，該控件顯示在表頭，用以過濾表中的內(nèi)容，比如可以只列表產(chǎn)品目錄為“實(shí)用工具”的產(chǎn)品。

DynamicData/CustomPages 文件夾。自定義網(wǎng)頁模板文件夾，可用以替換 DynamicData/PageTemplates 文件夾中的默認(rèn)模板。

DynamicData/FieldTemplates 文件夾。包含各種類型的字段在查看和創(chuàng)建、編輯時(shí)所呈現(xiàn)的控件。

DynamicData/PageTemplates 文件夾。包含在進(jìn)行查看、編輯時(shí)的頁面模板。

Dynamic Data還有一個(gè)快速開發(fā)的基礎(chǔ)是腳手架，腳手架是一種機(jī)制，通過腳手架，我們不必再為每一個(gè)表的增加、查看、修改做不同的頁面，因?yàn)槟_手架會(huì)自動(dòng)生成這些頁面。Tailspin Travel對(duì)所有表都啟用腳手架，對(duì)所有表啟用腳手架表示公開了整個(gè)數(shù)據(jù)模型：

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

還可以對(duì)特定表啟用腳手架功能，這時(shí)就要將上面的ScaffoldAllTables = false，然后給模型類打標(biāo)簽[System.ComponentModel.DataAnnotations.ScaffoldTable(true)]

自動(dòng)生成的網(wǎng)站需要我們調(diào)整的頁面，需要?jiǎng)?chuàng)建自定義的頁面可以把它放在DynamicData/CustomPages 文件夾，在 DynamicData/CustomPages/ 下新建一個(gè)文件夾，名稱為 FlightBookings，這個(gè)名稱一定要與 Tailspin.edmx中的相應(yīng)表的分部類名稱一樣。然后將 DynamicData/PageTemplates/ 下的文件復(fù)制到 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; }   
        }   
    }