.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类对用户进行身份验证.