《解剖PetShop》系列之六-PetShop之表示层设计

六 PetShop之表示层设计
表示层（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所示：

<%@ Page AutoEventWireup="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

Page类实现了ProcessRequest()方法，通过它可以设置Page对象的Request和Response属性，从而完成对用户请求/相应的控制。然后Page类通过从Control类继承来的Load事件，将View与Model建立关联，如Products.aspx.cs所示：

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

事件机制恰好是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

在上面的一段代码中，非常典型地表达了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所示：

public class CustomGrid : Repeater…

//Static constants

protected const string HTML1 = "<table cellpadding=0

cellspacing=0><tr><td colspan=2>";

protected const string HTML2 = "</td></tr><tr><td class=paging align=left>";

protected const string HTML3 = "</td><td align=right class=paging>";

protected const string HTML4 = "</td></tr></table>";

private static readonly Regex RX = new Regex(@"^&page=\d+",

RegexOptions.Compiled);

private const string LINK_PREV = "<a href=?page={0}>< Previous</a>";

private const string LINK_MORE = "<a href=?page={0}>More ></a>";

private const string KEY_PAGE = "page";

private const string COMMA = "?";

private const string AMP = "&";

public virtual object DataSource

private IList dataSource;

private int itemCount;

public partial class ShoppingCartControl : System.Web.UI.UserControl

<PetShopControl:shoppingcartcontrol id="ShoppingCartControl1" runat="server"></PetShopControl:shoppingcartcontrol>
由于ShoppingCartControl用户控件已经实现了用于呈现购物车数据的逻辑，那么在ShoppingCart.aspx.cs中，就可以不用负责这些逻辑，在充分完成对象重用的过程中，同时又达到了职责分离的目的。用户控件的设计者与页面设计者可以互不干扰，分头完成自己的设计。特别是对于页面设计者而言，他可以是单一的UI设计人员角色，仅需要关注用户界面是否美观与友好，对于表示层中对领域对象的调用与操作就可以不必理会，整个页面的代码也显得结构清晰、逻辑清楚，无疑也“干净”了不少。

6.4 ASP.NET 2.0新特性

由于PetShop 4.0是基于.NET Framework 2.0平台开发的电子商务系统，因而它在表示层也引入了许多ASP.NET 2.0的新特性，例如MemberShip、Profile、Master Page、登录控件等特性。接下来，我将结合PetShop 4.0的设计分别介绍它们的实现。

6.4.1 Profile特性

Profile提供的功能是针对用户的个性化服务。在ASP.NET 1.x版本时，我们可以利用Session、Cookie等方法来存储用户的状态信息。然而Session对象是具有生存期的，一旦生存期结束，该对象保留的值就会失效。Cookie将用户信息保存在客户端，它具有一定的安全隐患，一些重要的信息不能存储在Cookie中。一旦客户端禁止使用Cookie，则该功能就将失去应用的作用。

Profile的出现解决了如上的烦恼，它可以将用户的个人化信息保存在指定的数据库中。ASP.NET 2.0的Profile功能默认支持Access数据库和SQL Server数据库，如果需要支持其他数据库，可以编写相关的ProfileProvider类。Profile对象是强类型的，我们可以为用户信息建立属性，以PetShop 4.0为例，它建立了ShoppingCart、WishList和AccountInfo属性。

由于Profile功能需要访问数据库，因而在数据访问层（DAL）定义了和Product等数据表相似的模块结构。首先定义了一个IProfileDAL接口模块，包含了接口IPetShopProfileProvider：

public interface IPetShopProfileProvider

<profile automaticSaveEnabled="false" defaultProvider="ShoppingCartProvider">

<providers>

<add name="ShoppingCartProvider" connectionStringName="SQLProfileConnString" type="PetShop.Profile.PetShopProfileProvider" applicationName=".NET Pet Shop 4.0"/>

<add name="WishListProvider" connectionStringName="SQLProfileConnString" type="PetShop.Profile.PetShopProfileProvider" applicationName=".NET Pet Shop 4.0"/>

<add name="AccountInfoProvider" connectionStringName="SQLProfileConnString" type="PetShop.Profile.PetShopProfileProvider" applicationName=".NET Pet Shop 4.0"/>

</providers>

<properties>

<add name="ShoppingCart" type="PetShop.BLL.Cart" allowAnonymous="true" provider="ShoppingCartProvider"/>

<add name="WishList" type="PetShop.BLL.Cart" allowAnonymous="true" provider="WishListProvider"/>

<add name="AccountInfo" type="PetShop.Model.AddressInfo" allowAnonymous="false" provider="AccountInfoProvider"/>

</properties>

</profile>
在配置文件中，针对ShoppingCart、WishList和AccountInfo（它们的类型分别为PetShop.BLL.Cart、PetShop.BLL.Cart、PetShop.Model.AddressInfo）属性分别定义了ShoppingCartProvider、WishListProvider、AccountInfoProvider，它们的类型均为PetShop.Profile.PetShopProfileProvider类型。至于Profile的信息究竟是存储在何种类型的数据库中，则由以下的配置节决定：

<add key="ProfileDAL" value="PetShop.SQLProfileDAL"/>

而键值为ProfileDAL的值，正是Profile的工厂类PetShop.ProfileDALFactory.DataAccess在利用反射技术创建IPetShopProfileProvider类型对象时获取的。

在表示层中，可以利用页面的Profile属性访问用户的个性化属性，例如在ShoppingCart页面的codebehind代码ShoppingCart.aspx.cs中，调用Profile的ShoppingCart属性：

public override MembershipUser CreateUser(string username, string password, string email, string passwordQuestion, string passwordAnswer, bool isApproved, object providerUserKey, out MembershipCreateStatus status)

<membership defaultProvider="SQLMembershipProvider">

<providers>

<add name="SQLMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="SQLMembershipConnString" applicationName=".NET Pet Shop 4.0" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" passwordFormat="Hashed"/>

</providers>

</membership>
对于OracleMembershipProvider而言，配置大致相似：

<membership defaultProvider="OracleMembershipProvider">

<providers>

<clear/>

<add name="OracleMembershipProvider"

type="PetShop.Membership.OracleMembershipProvider"

connectionStringName="OraMembershipConnString"

enablePasswordRetrieval="false"

enablePasswordReset="false"

requiresUniqueEmail="false"

requiresQuestionAndAnswer="false"

minRequiredPasswordLength="7"

minRequiredNonalphanumericCharacters="1"

applicationName=".NET Pet Shop 4.0"

hashAlgorithmType="SHA1"

passwordFormat="Hashed"/>

</providers>

</membership>
有关配置节属性的意义，可以参考MSDN等相关文档。

6.4.3 ASP.NET登录控件

这里所谓的登录控件并不是指一个控件，而是ASP.NET 2.0新提供的一组用于解决用户登录的控件。登录控件与Membership进行集成，快速简便地实现用户登录的处理。ASP.NET登录控件包括Login控件、LoginView控件、LoginStatus控件、LoginName控件、PasswordRescovery控件、CreateUserWizard控件以及ChangePassword控件。

PetShop 4.0犹如一本展示登录控件用法的完美教程。我们可以从诸如SignIn、NewUser等页面中，看到ASP.NET登录控件的使用方法。例如在SignIn.aspx中，用到了Login控件。在该控件中，可以包含TextBox、Button等类型的控件，用法如下所示：

<asp:Login ID="Login" runat="server" CreateUserUrl="~/NewUser.aspx" SkinID="Login" FailureText="Login failed. Please try again.">

</asp:Login>
又例如NewUser.aspx中对CreateUserWizard控件的使用：

<asp:CreateUserWizard ID="CreateUserWizard" runat="server" CreateUserButtonText="Sign Up" InvalidPasswordErrorMessage="Please enter a more secure password." PasswordRegularExpressionErrorMessage="Please enter a more secure password."

RequireEmail="False" SkinID="NewUser">

<WizardSteps>

<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">

</asp:CreateUserWizardStp>

</WizardSteps>

</asp:CreateUserWizard>
使用了登录控件后，我们毋需编写与用户登录相关的代码，登录控件已经为我们完成了相关的功能，这就大大地简化了这个系统的设计与实现。

6.4.4 Master Page特性

Master Page相当于是整个Web站点的统一模板，建立的Master Page文件扩展名为.master。它可以包含静态文本、html元素和服务器控件。Master Page由特殊的@Master指令识别，如：

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
使用Master Page可以为网站建立一个统一的样式，且能够利用它方便地创建一组控件和代码，然后将其应用于一组页。对于那些样式与功能相似的页而言，利用Master Page就可以集中处理为Master Page，一旦进行修改，就可以在一个位置上进行更新。

在PetShop 4.0中，建立了名为MasterPage.master的Master Page，它包含了header、LoginView控件、导航菜单以及用于呈现内容的html元素，如图6-3所示：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="PetShop.Web.MasterPage" %>
Master Page同样利用codebehind技术，以PetShop 4.0的Master Page为例，codebehind的代码放在文件MasterPage.master.cs中：

public partial class MasterPage : System.Web.UI.MasterPage {

private const string HEADER_PREFIX = ".NET Pet Shop :: {0}";

protected void Page_PreRender(object sender, EventArgs e) {

ltlHeader.Text = Page.Header.Title;

Page.Header.Title = string.Format(HEADER_PREFIX, Page.Header.Title);

}

protected void btnSearch_Click(object sender, EventArgs e) {

WebUtility.SearchRedirect(txtSearch.Text);

}

}
注意Master Page页面不再继承自System.Web.UI.Page，而是继承System.Web.UI.MasterPage类。与Page类继承TemplateControl类不同，它是UserControl类的子类。因此，可以应用在Master Page上的有效指令与UserControl的可用指令相同，例如AutoEventWireup、ClassName、CodeFile、EnableViewState、WarningLevel等。

每一个与Master Page相关的内容页必须在@Page指令的MasterPageFile属性中引用相关的Master Page。例如PetShop 4.0中的CheckOut内容页，其@Page指令的定义如下：

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="CheckOut.aspx.cs" Inherits="PetShop.Web.CheckOut" Title="Check Out" %>
Master Page可以进行嵌套，例如我们建立了父Master Page页面Parent.master，那么在子Master Page中，可以利用master属性指定其父MasterPage：

<%@ Master Language="C#" master="Parent.master"%>

而内容页则可以根据情况指向Parent.master或者Child.master页面。

虽然说Master Page大部分情况下是以声明方式创建，但我们也可以建立一个类继承System.Web.UI.MasterPage，从而完成对Master Page的编程式创建。但在采用这种方式的同时，应该同时创建.master文件。此外对Master Page的调用也可以利用编程的方式完成，例如动态地添加Master Page，我们重写内容页的Page_PreInit()方法，如下所示：

void Page_PreInit(Object sender, EventArgs e)

{

this.MasterPageFile = "~/NewMaster.master";

}
之所以重写Page_PreInit()方法，是因为Master Page会在内容页初始化阶段进行合并，也即是说是在PreInit阶段完成Master Page的分配。

ASP.NET 2.0引入的新特性，并不仅仅限于上述介绍的内容。例如Theme、Wizard控件等新特性在PetShop 4.0中也得到了大量的应用。虽然ASP.NET 2.0及时地推陈出新，对表示层的设计有所改善，然而作为ASP.NET 2.0的其中一部分，它们仅仅是对现有框架缺失的弥补与改进，属于“锦上添花”的范畴，对于整个表示层设计技术而言，起到的推动作用却非常有限。

直到AJAX（Asynchronous JavaScript and XML）的出现，整个局面才大为改观。虽然AJAX技术带有几分“旧瓶装新酒”的味道，然而它从诞生之初，就具备了王者气象，大有席卷天下之势。各种支持AJAX技术的框架如雨后春笋般纷纷吐出新芽，支撑起百花齐放的繁荣，气势汹汹地营造出唯AJAX独尊的态势。如今，AJAX已经成为了Web应用的主流开发技术，许多业界大鳄都呲牙咧嘴开始了对这一块新领地的抢滩登陆。例如IBM、Oracle、Yahoo等公司都纷纷启动了开源的AJAX项目。微软也不甘落后，及时地推出了ASP.NET AJAX，这是一个基于ASP.NET的AJAX框架，它包括了ASP.NET AJAX服务端组件和ASP.NET AJAX客户端组件，并集成在Visual Studio中，为ASP.NET开发者提供了一个强大的AJAX应用环境。

我现在还无法预知AJAX技术在未来的走向，然而单单从表示层设计的角度而言，AJAX技术亦然带了一场全新的革命。我们或者可以期待未来的PetShop 5.0，可以在表示层设计上带来更多的惊喜。