【IT168 专稿】本篇我们将首先讨论用户接口母版页面的设计,然后重点讨论系统中主要用户接口页面的设计问题。
设计用户接口母版页面—Page.Master
我们想在所有的用户接口页面中实现一个一致的导航侧栏,对于我们的博客系统来说,此导航栏位于右边。这个导航栏将列出下列内容:
一段有关于当前博客的简短描述。
一个标签链接列表。这个列表中将仅显示至少关联到一个博客入口的标签。单击其中一个标签会把当前用户导航到相应于此标签的所有的博客入口。
一个文章链接列表。这个列表将显示标记为文章的博客入口的标题。一旦单击该标题,即打开相应的博客入口。
一个按降序排列的日期链接的列表。这个列表将显示发布博客入口对应的日期。一旦单击其中的某个月份,在该月份发布的所有的博客入口都将被显示。
一个用户可以订阅的RSS回馈的列表。
这个导航侧栏将会出现在所有的用户接口页面上。因此,我们需要在Page.Master母版页面中实现它。
导航侧栏中的第一个元素,即关于当前博客的描述,事实上是应用程序的配置文件web.config中的一个定制设置:
<add key="blogdescription" value="<h3>关于我!</h3><p>这里是你的博客描述。</p>" />
</appSettings>
在Page.Master文件的右侧,放置了一个标签控件。在Page_Load函数中,用博客描述信息来填充这个标签的值。请注意,此博客描述信息是使用BlogoSettings类从web.config文件中读取的。相应代码如下:
{
LabelBlogDescription.Text = BlogoSettings.BlogDescription;
}
接下来在侧栏中要实现的是三个链接区段,都是根据数据库内容生成的。实现这些内容有许多种方案,但是在我们的架构中一个颇为吸引人的选择是使用ASP.NET中新推出的ListView控件,还有另一个ObjectDataSource控件。ListView控件在控制生成的标签方面效率相当不错,而ObjectDataSource控件使我们能够把ListView控件数据绑定到业务逻辑层。
下面,我将详细地描述第一个区段的标签链接的实现过程。至于其他两个区段,其工作方式类似,读者可以自行在Page.Master文件的源代码中详细分析。
首先,在Page.Master文件中添加一个ObjectDataSource控件并且使用智能标签菜单配置它。在“选择业务对象”对话框中,从业务逻辑层选择TagManager类,并且勾选复选框控件“只显示数据组件”,如下图所示。
图1. ObjectDataSource组件的业务对象选择界面