.Net Pet Shop 4 初探之三:用户界面层布局

前言

界面布局就是UI层的设置,是网站风格的集中体现,通常包括主题,皮肤,母版页等元素及各种图片,控件,颜色的搭配等,甚至通过前台脚本的处理,构成丰富多彩的页面效果.

PetShop4也有其个性的用户界面层(UI)

母版页

PetShop4中,所有的页面都运用了母版页.Web项目下的MasterPage.master就是母版页的设计界面,打开母版页,如下图所示,分析母版页的设计.

该母版页可以大致分为三部分:

• 上部:操作栏,包括搜索,登录,注销,链接到购物意向栏,设置Profile,跟踪导航条,显示登录名等内容
  跟踪导航条是一个自定义的控件,打开该自定义的控件BreadCrumbControl.ascx文件,界面上只有一个PlaceHolder点位控件,PlaceHolder 控件使您可以将空容器控件放置到页上，然后在运行时动态地将子元素添加到该容器中。
  在BreadCrumbControl.cs文件中:

  HtmlAnchor lnkHome = new HtmlAnchor();
  lnkHome.InnerText = "Home";
  lnkHome.HRef = "~/Default.aspx";
  plhControl.Controls.Add(lnkHome);//将动态生成的控件添加到
  plhControl.Controls.Add(GetDivider());//添加分隔符

  这样根据客户进入的层次,跟踪导航条上就自动增加相应的导航链接.

• 左边:商品类别导航
• 右边:内容面版,ContentPlaceControl控件.

为子页添加母版页有两种方式:一是在创建新页面时选中右下角的"选择母版页"复选框,这样就会弹出选择窗口来确定要用的母版页.二是在已有的页面上的源码页的第一行上添加MasterPageFile的路径.

在子页面中访问母版页

在内容页中编写代码来引用母版页中的属性,方法.

只要在母版页上声明为公共成员,则可以用"master.***"的方法来引用.但在引用前必须在内容页中添加引用指令:

[%@ MasterType virtualpath="~/MasterPage.master"%]

对于母版页中的控件,要使用"Master.FindControl()"方法.

对于在ContentPlaceControl控件内的控件,则要先用"Master.FindControl()"方法找到ContentPlaceControl控件,再用"FindControl()"方法找到要引用的控件.

皮肤(主题)

生成皮肤文件的根目录下都有一个App_Themes文件夹,在PetShop4中,皮肤文件为SkinFile.skin,部分代码如下:

其中一个重要的属性SkinID,用CssClass来调用CSS样式,以设置元素的属性.

要引用一个皮肤,必须:

• 引用皮肤的控件必须和被引用控件是同一类型
• 指明引用控件的SkinID属性为被引用控件的SkinID属性.

例如:

错误处理

当发生错误时,系统自动导航到指定的错误页面上,显示相应的错误信息.

在Web.config文件中,可以找到"customErrors"节点,其内容如下:

defaultRedirect指明了要导航到的页面.

页面验证

指明UserProfile.aspx页面不允许匿名访问.系统中使用Membership类对用户进行身份验证.