表示層（Presentation Layer）的設計可以給系統客戶最直接的體驗和最十足的信心。正如人與人的相交相識一樣，初次見面的感覺總是永難忘懷的。一件交付給客戶使用的產品，如果在用戶界面（User Interface，UI）上缺乏吸引人的特色，界面不友好，操作不夠體貼，即使這件產品性能非常優異，架構設計合理，業務邏輯都滿足了客戶的需求，卻仍然難以討得客戶的歡心。俗語云：“佛要金裝，人要衣裝”，特別是對于Web應用程序而言，Web網頁就好比人的衣裝，代表著整個系統的身份與臉面，是招徠“顧客”的最大賣點。

“獻丑不如藏拙”，作為藝術細胞缺乏的我，并不打算在用戶界面的美術設計上大做文章，是以本書略過不提。本章所關注的表示層設計，還是以架構設計的角度，闡述在表示層設計中對模式的應用，ASP.NET控件的設計與運用，同時還包括了對ASP.NET 2.0新特色的介紹。

6.1 MVC模式

表示層設計中最重要的模式是MVC（Model-View-Controller，即模型-視圖-控制器）模式。MVC模式最早是由SmallTalk語言研究團提出的，被廣泛應用在用戶交互應用程序中。Controller根據用戶請求（Response）修改Model的屬性，此時Event（事件）被觸發，所有依賴于Model的View對象會自動更新，并基于Model對象產生一個響應（Response）信息，返回給Controller。Martin Fowler在《企業應用架構模式》一書中，展示了MVC模式應用的全過程，如圖6-1所示：

圖6-1 典型的MVC模式

如果將MVC模式拆解為三個獨立的部分：Model、View、Controller，我們可以通過GOF設計模式來實現和管理它們之間的關系。在體系架構設計中，業務邏輯層的領域對象以及數據訪問層的數據值對象都屬于MVC模式的Model對象。如果要管理Model與View之間的關系，可以利用Observer模式，View作為觀察者，一旦Model的屬性值發生變化，就會通知View基于Model的值進行更新。而Controller作為控制用戶請求/響應的對象，則可以利用Mediator模式，專門負責請求/響應任務之間的調節。而對于View本身，在面向組件設計思想的基礎上，我們通常將它設計為組件或者控件，這些組件或者控件根據自身特性的不同，共同組成一種類似于遞歸組合的對象結構，因而我們可以利用Composite模式來設計View對象。

然而在.NET平臺下，我們并不需要自己去實現MVC模式。對于View對象而言，ASP.NET已經提供了常用的Web控件，我們也可以通過繼承System.Web.UI.UserControl，自定義用戶控件，并利用ASPX頁面組合Web控件來實現視圖。ASP.NET定義了System.Web.UI.Page類，它相當于MVC模式的Controller對象，可以處理用戶的請求。由于利用了codebehind技術，使得用戶界面的顯示與UI實現邏輯完全分離，也即是說，View對象與Controller對象成為相對獨立的兩部分，從而有利于代碼的重用性。比較ASP而言，這種編程方式更符合開發人員的編程習慣，同時有利于開發人員與UI設計人員的分工與協作。至于Model對象，則為業務邏輯層的領域對象。此外，.NET平臺通過ADO.NET提供了DataSet對象，便于與Web控件的數據源綁定。

6.2 Page Controller模式的應用

通觀PetShop的表示層設計，充分利用了ASP.NET的技術特點，通過Web頁面與用戶控件控制和展現視圖，并利用codebehind技術將業務邏輯層的領域對象加入到表示層實現邏輯中，一個典型的Page Controller模式呼之欲出。

Page Controller模式是Martin Fowler在《企業應用架構模式》中最重要的表示層模式之一。在.NET平臺下，Page Controller模式的實現非常簡單，以Products.aspx頁面為例。首先在aspx頁面中，進行如下的設置：

<% @PageAutoEventWireup = " true " Language = " C# " MasterPageFile = " ~/MasterPage.master " Title = " Products " Inherits = " PetShop.Web.Products " CodeFile = " ~/Products.aspx.cs " %>

Aspx頁面繼承自System.Web.UI.Page類。Page類對象通過繼承System.Web.UI.Control類，從而擁有了Web控件的特性，同時它還實現了IHttpHandler接口。作為ASP.NET處理HTTP Web請求的接口，提供了如下的定義：

[AspNetHostingPermission(SecurityAction.InheritanceDemand,
Level = AspNetHostingPermissionLevel.Minimal),
AspNetHostingPermission(SecurityAction.LinkDemand,
Level = AspNetHostingPermissionLevel.Minimal)]
public interface IHttpHandler
{
void ProcessRequest(HttpContextcontext);
bool IsReusable { get ;}
}

Page類實現了ProcessRequest()方法，通過它可以設置Page對象的Request和Response屬性，從而完成對用戶請求/相應的控制。然后Page類通過從Control類繼承來的Load事件，將View與Model建立關聯，如Products.aspx.cs所示：

public partial class Products:System.Web.UI.Page
{
protected void Page_Load( object sender,EventArgse)
{
// getpageheaderandtitle
Page.Title = WebUtility.GetCategoryName(Request.QueryString[ " categoryId " ]);
}
}

事件機制恰好是observer模式的實現，當ASPX頁面的Load事件被激發后，系統通過WebUtility類（在第28章中有對WebUtility類的詳細介紹）的GetCategoryName()方法，獲得Category值，并將其顯示在頁面的Title上。Page對象作為Controller，就好似一個調停者，用于協調View與Model之間的關系。

由于ASPX頁面中還可以包含Web控件，這些控件對象同樣是作為View對象，通過Page類型對象完成對它們的控制。例如在CheckOut.aspx頁面中，當用戶發出CheckOut的請求后，作為System.Web.UI.WebControls.Winzard控件類型的wzdCheckOut，會在整個向導過程結束時，觸發FinishButtonClick事件，并在該事件中調用領域對象Order的Insert()方法，如下所示：

public partial class CheckOut:System.Web.UI.Page

protected void wzdCheckOut_FinishButtonClick( object sender,WizardNavigationEventArgse) {
if (Profile.ShoppingCart.CartItems.Count > 0 ) {
if (Profile.ShoppingCart.Count > 0 ) {

// displayordereditems
CartListOrdered.Bind(Profile.ShoppingCart.CartItems);

// displaytotalandcreditcardinformation
ltlTotalComplete.Text = ltlTotal.Text;
ltlCreditCardComplete.Text = ltlCreditCard.Text;

// createorder
OrderInfoorder = new OrderInfo( int .MinValue,DateTime.Now,User.Identity.Name,GetCreditCardInfo(),billingForm.Address,shippingForm.Address,Profile.ShoppingCart.Total,Profile.ShoppingCart.GetOrderLineItems(), null );

// insert
OrdernewOrder = new Order();
newOrder.Insert(order);

// destroycart
Profile.ShoppingCart.Clear();
Profile.Save();
}
}
else {
lblMsg.Text = " <p><br>Cannotprocesstheorder.Yourcartisempty.</p><pclass=SignUpLabel><aclass=linkNewUserhref=Default.aspx>Continueshopping</a></p> " ;
wzdCheckOut.Visible = false ;
}
}

在上面的一段代碼中，非常典型地表達了Model與View之間的關系。它通過獲取控件的屬性值，作為參數值傳遞給數據值對象OrderInfo，從而利用頁面上產生的訂單信息創建訂單對象，然后再調用領域對象Order的Inser()方法將OrderInfo對象插入到數據表中。此外，它還對領域對象ShoppingCart的數據項作出判斷，如果其值等于0，就在頁面中顯示UI提示信息。此時，View的內容決定了Model的值，而Model值反過來又決定了View的顯示內容。

6.3 ASP.NET控件

ASP.NET控件是View對象最重要的組成部分，它充分利用了面向對象的設計思想，通過封裝與繼承構建一個個控件對象，使得用戶在開發Web頁面時，能夠重用這些控件，甚至自定義自己的控件。在第8章中，我已經介紹了.NET Framework中控件的設計思想，通過引入一種“復合方式”的Composite模式實現了控件樹。在ASP.NET控件中，System.Web.UI.Control就是這棵控件樹的根，它定義了所有ASP.NET控件共有的屬性、方法和事件，并負責管理和控制控件的整個執行生命周期。

Control基類并沒有包含UI的特定功能，如果需要提供與UI相關的方法屬性，就需要從System.Web.UI.WebControls.WebControl類派生。該類實際上也是Control類的子類，但它附加了諸如ForeColor、BackColor、Font等屬性。

除此之外，還有一個重要的類是System.Web.UI.UserControl，即用戶控件類，它同樣是Control類的子類。我們可以自定義一些用戶控件派生自UserControl，在Visual Studio的Design環境下，我們可以通過拖動控件的方式將多種類型的控件組合成一個自定義用戶控件，也可以在codebehind方式下，為自定義用戶控件類添加新的屬性和方法。

整個ASP.NET控件類的層次結構如圖6-2所示：

圖6-2 ASP.NET控件類的層次結構

ASP.NET控件的執行生命周期如表6-1所示：

表6-1 ASP.NET控件的執行生命周期

在這里，控件設計利用了Template Method模式，Control基類提供了大部分protected虛方法，留待其子類改寫其方法。以PetShop 4.0為例，就定義了兩個ASP.NET控件，它們都屬于System.Web.UI.WebControls.WebControl的子類。其中，CustomList控件派生自System.Web.UI.WebControls.DataList，CustomGrid控件則派生自System.Web.UI.WebControls.Repeater。

由于這兩個控件都改變了其父類控件的呈現方式，故而，我們可以通過重寫父類的Render虛方法，完成控件的自定義。例如CustomGrid控件：

public class CustomGrid:Repeater…
// Staticconstants
protected const string HTML1 = " <tablecellpadding=0
cellspacing = 0 >< tr >< tdcolspan = 2 > " ;
protected const string HTML2 = " </td></tr><tr><tdclass=pagingalign=left> " ;
protected const string HTML3 = " </td><tdalign=rightclass=paging> " ;
protected const string HTML4 = " </td></tr></table> " ;
private static readonly RegexRX = new Regex( @" ^&page=\d+ " ,
RegexOptions.Compiled);
private const string LINK_PREV = " <ahref=?page={0}>&#060;&nbsp;Previous</a> " ;
private const string LINK_MORE = " <ahref=?page={0}>More&nbsp;&#062;</a> " ;
private const string KEY_PAGE = " page " ;
private const string COMMA = " ? " ;
private const string AMP = " & " ;

override protected void Render(HtmlTextWriterwriter) {

// Checkthereissomedataattached
if (ItemCount == 0 ) {
writer.Write(emptyText);
return ;
}
// Maskthequery
string query = Context.Request.Url.Query.Replace(COMMA,AMP);
query = RX.Replace(query, string .Empty);
// Writeoutthefirstpartofthecontrol,thetableheader
writer.Write(HTML1);
// Calltheinheritedmethod
base .Render(writer);
// Writeoutatablerowclosure
writer.Write(HTML2);
// Determinwhethernextandpreviousbuttonsarerequired
// Previousbutton?
if (currentPageIndex > 0 )
writer.Write( string .Format(LINK_PREV,(currentPageIndex - 1 ) + query));
// Closethetabledatatag
writer.Write(HTML3);

// Nextbutton?
if (currentPageIndex < PageCount)
writer.Write( string .Format(LINK_MORE,(currentPageIndex + 1 ) + query));

// Closethetable
writer.Write(HTML4);
}

由于CustomGrid繼承自Repeater控件，因而它同時還繼承了Repeater的DataSource屬性，這是一個虛屬性，它默認的set訪問器屬性如下：

public virtual object DataSource
{
get {…}
set
{
if (((value != null ) && ! (value is IListSource)) && ! (value is IEnumerable))
{
throw new ArgumentException(SR.GetString( " Invalid_DataSource_Type " , new object [] { this .ID} ));
}
this .dataSource = value;
this .OnDataPropertyChanged();
}
}

對于CustomGrid而言，DataSource屬性有著不同的設置行為，因而在定義CustomGrid控件的時候，需要改寫DataSource虛屬性，如下所示：

private IListdataSource;
private int itemCount;

override public object DataSource {
set {
// ThistrycatchblockistoavoidissueswiththeVS.NETdesigner
// ThedesignerwilltryandbindadatasourcewhichdoesnotderivefromILIST
try {
dataSource = (IList)value;
ItemCount = dataSource.Count;
}
catch {
dataSource = null ;
ItemCount = 0 ;
}
}
}

當設置的value對象值不為IList類型時，set訪問器就將捕獲異常，然后將dataSource字段設置為null。

由于我們改寫了DataSource屬性，因而改寫Repeater類的OnDataBinding()方法也就勢在必行。此外，CustomGrid還提供了分頁的功能，我們也需要實現分頁的相關操作。與DataSource屬性不同，Repeater類的OnDataBinding()方法實際上是繼承和改寫了Control基類的OnDataBinding()虛方法，而我們又在此基礎上改寫了Repeater類的OnDataBinding()方法：

override protected void OnDataBinding(EventArgse) {

// Workoutwhichitemswewanttorendertothepage
int start = CurrentPageIndex * pageSize;
int size = Math.Min(pageSize,ItemCount - start);
http:/

分享到：

《解剖PetShop》系列之六