第11章ASP网页布局与标准化

第第11章章 ASP.NET网页布局与标准化网页布局与标准化本章主要内容本章主要内容11.1 概概 述述11.2 母母 版版 页页11.3 主题与外观主题与外观11.4 Web部件部件 11.5 导航控件和站点地图导航控件和站点地图11.1 概概 述述大型系统对应用程序统筹的需求如下。大型系统对应用程序统筹的需求如下。（1）所有页面具有一个或者几个统一的布局（实质上是）所有页面具有一个或者几个统一的布局（实质上是对母版页的设计）。对母版页的设计）。（2）网站具有多个风格并且风格可以切换（实质上是对）网站具有多个风格并且风格可以切换（实质上是对主题和皮肤的设计）。主题和皮肤的设计）。（3）网站中的一些元素可以被重用（实质上是对）网站中的一些元素可以被重用（实质上是对Web部部件的设计）。件的设计）。（4）网站具有多个语言并且可以根据用户浏览器设置的）网站具有多个语言并且可以根据用户浏览器设置的语言进行切换（实质上是对本地化和资源的设计）。语言进行切换（实质上是对本地化和资源的设计）。（5）网站的页面层次比较复杂，需要使用各种方式的导）网站的页面层次比较复杂，需要使用各种方式的导航提示信息（实质上是对导航控件和站点地图的设计）。航提示信息（实质上是对导航控件和站点地图的设计）。11.2 母母 版版 页页 母版页类似于母版页类似于Word中的模板，允许在中的模板，允许在多个页面中共享相同的内容。例如，网站多个页面中共享相同的内容。例如，网站的的LOGO如果需要在多个页面中重用，则如果需要在多个页面中重用，则可以将其放在母版页中。在可以将其放在母版页中。在Dreamweaver中可以使用模板页，中可以使用模板页，ASP.NET的母版页与的母版页与此类似。此类似。11.2.1 母版页和内容页母版页和内容页图图11-1 母版页与内容页母版页与内容页11.2.2 母版页的运行机制母版页的运行机制图11-2 母版页和内容页的控件对应关系母版页的运行过程如下。母版页的运行过程如下。（1）用户访问内容页。）用户访问内容页。（2）获取内容页后，读取）获取内容页后，读取Page指令，若指令，若指令引用到一个母版页，则也读取该母版指令引用到一个母版页，则也读取该母版页（页（3）母版页合并到内容页的控件树中。）母版页合并到内容页的控件树中。（4）各个）各个Content控件的内容合并到母版控件的内容合并到母版页中对应的页中对应的ContentPlaceHolder控件中。控件中。（5）呈现结果页。）呈现结果页。11.2.3 创建母版页创建母版页 母版页的使用与普通页面类似，可以母版页的使用与普通页面类似，可以在其中放置文件或者图形、任何在其中放置文件或者图形、任何HTML控控件和件和Web控件、后置代码等。母版页的扩控件、后置代码等。母版页的扩展名为展名为.master，不能被浏览器直接查看。，不能被浏览器直接查看。母版页必须在被其他页面使用后才能显示。母版页必须在被其他页面使用后才能显示。创建母版页创建母版页 实例实例具体实现请参考源代码下具体实现请参考源代码下ch11_2 MasterPage.master 创建内容页创建内容页 创建完母版页后，下一步是创建内容页。创建完母版页后，下一步是创建内容页。内容页的创建与内容页的创建与Web窗体的创建基本相似窗体的创建基本相似。具体实现请参考源代码下具体实现请参考源代码下ch11_2 Default.aspx 11.2.5 设置母版页应用范围设置母版页应用范围ASP.NET提供了将内容附加到母版页的提供了将内容附加到母版页的3种种级别，即提供了级别，即提供了3种母版页的应用范围。种母版页的应用范围。1页级页级2应用程序级应用程序级3文件夹级文件夹级11.2.6 访问母版页上的控件访问母版页上的控件protected void Page_LoadComplete(object sender,EventArgs e)/母版页中查询母版页中查询ID为为labMaster的的Label控件的控件的Text属性值属性值Label MLable1=(Label)this.Master.FindControl(labMaster);/将查询的值通过内容页中的将查询的值通过内容页中的 Label控件显示出来控件显示出来this.labContent.Text=MLable1.Text;11.3 主题与外观主题与外观站点的外观主要与页面控件的样式属性有站点的外观主要与页面控件的样式属性有关，同时控件还支持将样式设置与控件属关，同时控件还支持将样式设置与控件属性分离的级联样式表（性分离的级联样式表（CSS）。在实现站）。在实现站点的过程中，开发人员可能不得不为多数点的过程中，开发人员可能不得不为多数控件添加样式属性，这种做法很繁琐，并控件添加样式属性，这种做法很繁琐，并且不易保持站点外观的一致性和独立性。且不易保持站点外观的一致性和独立性。11.3.1 主题概述主题概述（1）外观：外观文件是主题的核心内容，）外观：外观文件是主题的核心内容，用于定义页面中服务器控件的外观。用于定义页面中服务器控件的外观。（2）级联样式表（）级联样式表（CSS）：主题还可以包）：主题还可以包含级联样式表（含级联样式表（.css文件）。将文件）。将.css文件放文件放在主题目录中时，样式表自动作为主题的在主题目录中时，样式表自动作为主题的一部分应用。主题中可以包含一个或多个一部分应用。主题中可以包含一个或多个级联样式表。级联样式表。（3）图像和其他资源。）图像和其他资源。11.3.2 外观概述外观概述 外观文件的扩展名为外观文件的扩展名为.skin，它包含各个，它包含各个控件的属性设置。控件外观设置类似于控控件的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部件标记本身，但只包含要作为主题的一部分来设置的属性。有两种类型的控件外观：分来设置的属性。有两种类型的控件外观：默认外观和命名外观。默认外观和命名外观。11.3.3 创建主题和外观创建主题和外观 在在VS 2010解决方案中，要创建一个新解决方案中，要创建一个新主题，首先在主题，首先在App_Themes下创建一个新的下创建一个新的文件夹。最简单的方法是右击文件夹。最简单的方法是右击App_Themes节点，并选择一个主题文件夹。接着把主节点，并选择一个主题文件夹。接着把主题文件添加到该文件中。题文件添加到该文件中。具体实现请参考源代码下具体实现请参考源代码下ch11_3 App_Themes mytheme下的下的Label.skin，Calendar.skin 文件文件11.3.4 应用主题和外观应用主题和外观1简单应用简单应用应用外观文件的页面不同于普通页面的地方主要有应用外观文件的页面不同于普通页面的地方主要有以下以下3个方面。个方面。（1）在应用主题的方法的）在应用主题的方法的标签中设标签中设置一个置一个Theme属性。属性。（2）如果为控件设置默认外观，则不设置控件的）如果为控件设置默认外观，则不设置控件的SkinID属性；如果为控件设置了命名外观，则需要属性；如果为控件设置了命名外观，则需要设置控件的设置控件的SkinID属性。属性。（3）如果在控件代码中添加了与控件外观相同的）如果在控件代码中添加了与控件外观相同的属性，则页面最终显示的是控件外观的设置效果。属性，则页面最终显示的是控件外观的设置效果。2动态加载主题动态加载主题除了在页面声明和配置文件中指定主题，除了在页面声明和配置文件中指定主题，还可以通过编程方式应用主题，即动态加还可以通过编程方式应用主题，即动态加载主题。载主题。ASP.NET运行库在运行库在PreInit事件激事件激发后，立即加载主题信息。用户可以在程发后，立即加载主题信息。用户可以在程序运行时和序运行时和Web应用程序进行交互，自定应用程序进行交互，自定义义Web应用程序的颜色和总体外观。实现应用程序的颜色和总体外观。实现动态加载主题的核心是修改动态加载主题的核心是修改Page对象的对象的Theme属性值。属性值。动态加载主题实例动态加载主题实例该实例还是利用上一节的日历控件，上一该实例还是利用上一节的日历控件，上一节是同时显示两个不同主题的日历控件，节是同时显示两个不同主题的日历控件，这里将实现根据用户的不同选择，显示不这里将实现根据用户的不同选择，显示不同主题的控件。该实例中除了日历控件外，同主题的控件。该实例中除了日历控件外，增加了下拉列表控件进行选择。增加了下拉列表控件进行选择。具体实现请参考源代码下具体实现请参考源代码下ch11_3 动态加动态加载主题载主题.aspx 11.4 Web部件部件11.4.1 Web部件基础部件基础 Web部件由部件由3部分组成，分别是个性化部分组成，分别是个性化设置、用户界面结构组件以及设置、用户界面结构组件以及Web部件控部件控件。件。Web部件层次结构部件层次结构 最上层的是最上层的是Web部件控件，部件控件，Web部件从部件从Part类中派生，这些控件类中派生，这些控件构成了构成了Web部件的用户界面。部件的用户界面。处于中间层的是处于中间层的是Web部件的重要部件的重要层次：用户界面结构组件，结构层次：用户界面结构组件，结构组件用于协调和管理组件用于协调和管理Web部件控部件控件中的控件，包括件中的控件，包括WebPartManager和各种区域控和各种区域控件。件。11.4.2 用户界面结构组件用户界面结构组件1WebPartManager控件控件 它是它是Web部件的总控中心，管理页面上部件的总控中心，管理页面上的其他的其他Web部件，是一个非可视控件。在部件，是一个非可视控件。在一个一个Web部件网页中，有且仅有一个部件网页中，有且仅有一个WebPartManager控件。在建立控件。在建立Web部件网部件网页时，应首先建立页时，应首先建立WebPartManager控件。控件。WebPartManager的的DisplayMode属性能变页面显属性能变页面显示模式，有如下示模式，有如下5种可选项。种可选项。BrowseDisplayMode：默认的显示模式：默认的显示模式 DesignDisplayMode：有：有BrowseDisplayMode模模式的功能，用户可以将式的功能，用户可以将WebPart控件从一个区域拖控件从一个区域拖到另一个区域；也可以在同一个区域内拖动，从而到另一个区域；也可以在同一个区域内拖动，从而改变网页的布局。改变网页的布局。EditDisplayMode：有：有DesignDisplayMode模式的模式的功能，用户能编辑功能，用户能编辑WebPart控件的外观和行为。控件的外观和行为。CatalogDisplayMode：有：有DesignDisplayMode模模式的功能，用户能添加和删除式的功能，用户能添加和删除WebPart控件。常用控件。常用于重新启用被用户关闭的于重新启用被用户关闭的WebPart控件。具体实现控件。具体实现时，还需配合使用时，还需配合使用CatalogZone控件。控件。ConnectDisplayMode：有：有DesignDisplayMode模模式的功能，用户能在不同的式的功能，用户能在不同的WebPart控件之间建立控件之间建立连接，实现数据的相互传输。连接，实现数据的相互传输。2区域控件区域控件常用的区域控件有常用的区域控件有WebPartZone控件、控件、CatalogZone控件控件和和EditorPart控件。控件。（1）WebPartZone控件。控件。WebPartZone控件用于承载网页上的控件用于承载网页上的WebPart控件，并控件，并为其包含的控件提供公共的用户界面。为其包含的控件提供公共的用户界面。（2）EditorZone控件。控件。EditorZone控件只有在控件只有在Web部件网页进入部件网页进入EditDisplayMode模式时才变为可见。模式时才变为可见。（3）CatalogZone控件。控件。CatalogZone控件只有在控件只有在Web部件网页进入部件网页进入CatalogDisplayMode模式时才变为可见。模式时才变为可见。3web.config文件文件要建立包含要建立包含Web部件的网页，需要对部件的网页，需要对web.config文文件中的件中的和和配置节进行配置节进行配置。配置。当页面启用当页面启用Windows验证时，建立的验证时，建立的Web部件网页部件网页在浏览时可以直接对在浏览时可以直接对WebPart控件进行个性化设置；控件进行个性化设置；而当页面启用而当页面启用Forms验证时，以匿名用户访问验证时，以匿名用户访问Web部件网页将不能对部件网页将不能对WebPart控件进行个性化设置。控件进行个性化设置。只有当用户登录成功后才能对只有当用户登录成功后才能对Web部件网页中的部件网页中的WebPart控件进行个性化设置。控件进行个性化设置。11.4.3 建立建立Web部件网页部件网页 具体实现请参考源代码下具体实现请参考源代码下ch11_4网站中的网站中的WebParts.aspx文件文件.运行后发现有运行后发现有4种模式种模式可选：可选：Browse、Design、Catalog和和Edit。Catalog模式下会显示模式下会显示CatalogZone区域的区域的信息，信息，Edit会显示会显示EditorZone信息。信息。11.5 导航控件和站点地图导航控件和站点地图在含有大量页面的站点中，构造一个可使在含有大量页面的站点中，构造一个可使用户随意在页面间切换的导航系统可能颇用户随意在页面间切换的导航系统可能颇有难度，尤其是在更改站点时。使用有难度，尤其是在更改站点时。使用ASP.NET站点导航可以创建页面的集中站站点导航可以创建页面的集中站点地图。面向导航的服务器控件包括点地图。面向导航的服务器控件包括Menu、TreeView、SiteMapPath和和SiteMapDataSource控件。这控件。这 11.5.1 站点地图概述站点地图概述站点地图是一种扩展名为站点地图是一种扩展名为.sitemap的标准的标准XML文件，用来定义整个站点的结构、各文件，用来定义整个站点的结构、各页面的链接、相关说明和其他相关定义。页面的链接、相关说明和其他相关定义。站点地图的默认名为站点地图的默认名为Web.sitemap，存储在，存储在应用程序的根目录下。应用程序的根目录下。.sitemap文件的内容文件的内容是以是以XML形式描述的树状结构文件，其中形式描述的树状结构文件，其中包括站点结构信息。包括站点结构信息。TreeView、Menu、SiteMapPath控件的网站导航信息和超链接控件的网站导航信息和超链接的数据都是由的数据都是由.sitemap文件提供的。文件提供的。siteMapNode节点的常用属性节点的常用属性 属属 性性说说 明明url设置用于节点导航的设置用于节点导航的URL地址。地址。title设置节点名称设置节点名称description设置节点说明文字设置节点说明文字keyword定义表示当前节点的关键字定义表示当前节点的关键字roles定义允许查看该站点地图文件的角色集合。定义允许查看该站点地图文件的角色集合。siteMapFile设置包含其他相关设置包含其他相关SiteMapNode元素的站点地图文件元素的站点地图文件Provider定义处理其他站点地图文件的站点导航提供程序名称。定义处理其他站点地图文件的站点导航提供程序名称。11.5.2 使用使用SiteMapPath控件显示控件显示导航导航SiteMapPath控件可以轻松定位所在当前网控件可以轻松定位所在当前网站中的位置。该控件会显示一条导航路径，站中的位置。该控件会显示一条导航路径，用于显示当前页的位置，并显示返回到主用于显示当前页的位置，并显示返回到主页的路径链接。它包含来自地点地图的导页的路径链接。它包含来自地点地图的导航数据，只有在站点地图中列出的页才能航数据，只有在站点地图中列出的页才能在在SiteMapPath控件中显示导航数据。控件中显示导航数据。1SiteMapPath控件概述控件概述SiteMapPath控件用于显示一组文本或图像控件用于显示一组文本或图像超链接，以便在使用最少页面空间的同时超链接，以便在使用最少页面空间的同时轻松地定位当前所在网站中的位置。该控轻松地定位当前所在网站中的位置。该控件会显示一条导航路径，此路径为用户显件会显示一条导航路径，此路径为用户显示当前页的位置，并显示返回到主页的路示当前页的位置，并显示返回到主页的路径链接。它包含来自站点地图的导航数据，径链接。它包含来自站点地图的导航数据，只有在站点地图中列出的页才能在只有在站点地图中列出的页才能在SiteMapPath控件中显示导航数据。控件中显示导航数据。SiteMapPath控件的常用属性控件的常用属性 属属 性性说说 明明CurrentNodeTemplate获得或设置一个控件模板，用于代表当前显示页的站点导航路径节点获得或设置一个控件模板，用于代表当前显示页的站点导航路径节点NodeStyle获取用于站点导航路径中所有节点的显示文本样式获取用于站点导航路径中所有节点的显示文本样式NodeTemplate获取或设置一个控件模板，用于站点导航路径的所有功能节点获取或设置一个控件模板，用于站点导航路径的所有功能节点ParentLevelsDisplayed获取或设置控件显示的相对于当前显示节点的父节点级别数获取或设置控件显示的相对于当前显示节点的父节点级别数PathDirection获取或设置导航路径节点的呈现顺序获取或设置导航路径节点的呈现顺序PathSeparator获取或设置一个字符串，该字符串在呈现的导航路径中分隔获取或设置一个字符串，该字符串在呈现的导航路径中分隔SiteMapPath节点节点PathSeparatorTemplate获取或设置一个控件模板，用于站点导航路径的路径分隔符获取或设置一个控件模板，用于站点导航路径的路径分隔符RootNodeTemplate获取或设置一个控件模板，用于站点导航路径的根节点获取或设置一个控件模板，用于站点导航路径的根节点SiteMapProvider获取或设置用于呈现站点导航控件的获取或设置用于呈现站点导航控件的SiteMapProvider的名称的名称3应用应用SiteMapPath控件实现站控件实现站点导航点导航使用使用SiteMapPath控件无需代码和绑定数据控件无需代码和绑定数据就能创建站点导航。此控件可自动读取和就能创建站点导航。此控件可自动读取和呈现站点地图信息。下面通过实例来说明呈现站点地图信息。下面通过实例来说明SiteMapPath控件的使用方法。控件的使用方法。具体实现请参考源代码下具体实现请参考源代码下ch11_5网站中的网站中的Hardware.aspx,Products.sitemap文件文件.11.5.3 使用使用TreeView控件显示导航控件显示导航TreeView控件用于在树型结构中显示分层控件用于在树型结构中显示分层数据，如目录或文件目录。对于导航文字数据，如目录或文件目录。对于导航文字很多，并且可以对导航内容进行分类的网很多，并且可以对导航内容进行分类的网站来说，可以将页面的导航文字以树形结站来说，可以将页面的导航文字以树形结构形式显示，这样既可以有效地节约页面，构形式显示，这样既可以有效地节约页面，又可以方便用户查看。又可以方便用户查看。1TreeView控件概述控件概述TreeView控件的主要功能如下控件的主要功能如下:（1）支持数据绑定，即允许通过数据绑定方式。）支持数据绑定，即允许通过数据绑定方式。（2）支持站点导航功能。）支持站点导航功能。（3）单击文字可显示为普通文本或超链接文本。）单击文字可显示为普通文本或超链接文本。（4）自定义树型和节点的样式、主题等外观特征。）自定义树型和节点的样式、主题等外观特征。（5）可通过编程方式访问）可通过编程方式访问TreeView对象模型对象模型（6）在客户端浏览器支持的情况下，通过客户端）在客户端浏览器支持的情况下，通过客户端到服务器的回调填充节点。到服务器的回调填充节点。（7）具有在节点旁显示复选框的功能。）具有在节点旁显示复选框的功能。2TreeView控件的常用属性控件的常用属性（1）ExpandDepth属性。属性。设置默认情况下设置默认情况下TreeView服务器控件展开层次数。服务器控件展开层次数。例如，若将该属性设置为例如，若将该属性设置为2，则将展开根节点及根，则将展开根节点及根节点下方紧邻的所有父节点。节点下方紧邻的所有父节点。（2）Nodes属性。属性。使用使用Nodes属性可以获取一个包含树中所有根节点属性可以获取一个包含树中所有根节点的的TreeNodeCollection对象。对象。Nodes属性通常用于快属性通常用于快速循环访问所有根节点，或者访问树中的某个特定速循环访问所有根节点，或者访问树中的某个特定节点，还可以使用节点，还可以使用Nodes属性以编程方式管理树中属性以编程方式管理树中的根节点，即可在集合中添加、插入、移除和检索的根节点，即可在集合中添加、插入、移除和检索TreeNode对象。对象。（3）SelectedNodes属性。属性。该属性用于获取用户选中节点的该属性用于获取用户选中节点的TreeNode对象。当节点显示为超链接文本时，该属对象。当节点显示为超链接文本时，该属性返回值为性返回值为null，不可用。，不可用。3TreeView控件的常用事件和方控件的常用事件和方法法（1）常用事件。）常用事件。SelectedNodeChanged事件。事件。TreeNodeExpanded事件和事件和TreeNodeCollapsed事件。事件。TreeNodePopulate事件。事件。（2）常用方法）常用方法 利用利用TreeView控件的控件的CollapseAll()和和ExpandAll()方法折叠和展开节点。方法折叠和展开节点。利用利用TreeView控件的控件的Nodes.Add()方法添方法添加节点到控件中。图加节点到控件中。图11-19 添加添加TreeView控件控件 利用利用TreeView控件的控件的Nodes.Remove()方方法删除指定的节点。法删除指定的节点。4使用使用TreeView控件动态添加和控件动态添加和移除节点移除节点以下实例利用以下实例利用TreeView控件显示城市结构控件显示城市结构图，并能动态地添加和移除节点、折叠和图，并能动态地添加和移除节点、折叠和展开节点。展开节点。具体实现请参考源代码下具体实现请参考源代码下ch11_5网站中的网站中的myTreeView.aspx 文件文件.5使用使用TreeView控件显示导航控件显示导航与与SiteMapPath控件不同，控件不同，TreeView控件需控件需要数据源控件的支持。它与要数据源控件的支持。它与SiteMapDataSource控件配合使用可以显示控件配合使用可以显示站点导航的树形结构。站点导航的树形结构。具体实现请参考源代码下具体实现请参考源代码下ch11_5网站中的网站中的Home.aspx、Web.sitemap文件文件.11.5.4 Menu控件显示导航控件显示导航利用利用Menu控件可以开发控件可以开发ASP.NET网页的静网页的静态和动态显示菜单。静态菜单意味着态和动态显示菜单。静态菜单意味着Menu控件始终是完全展开的，整个结构都是可控件始终是完全展开的，整个结构都是可视的，用户可以单击菜单的任何部位。在视的，用户可以单击菜单的任何部位。在动态显示的菜单中，只有指定的部分是静动态显示的菜单中，只有指定的部分是静态的，只有用户将鼠标指针悬停在父节点态的，只有用户将鼠标指针悬停在父节点上时才会显示其子菜单项。上时才会显示其子菜单项。1Menu控件的常用属性控件的常用属性属属 性性说说 明明DataSource获取或设置对象，数据绑定控件从该对象中检索其数据项列表获取或设置对象，数据绑定控件从该对象中检索其数据项列表DisappearAfter获取或设置鼠标指针不再悬停于菜单上后显示动态菜单的持续获取或设置鼠标指针不再悬停于菜单上后显示动态菜单的持续时间时间Items获取获取MenuItemCollection对象，该对象包含对象，该对象包含Menu控件中的所控件中的所有菜单项有菜单项ItemWarp获取或设置一个值，该值指示菜单项的文本是否换行获取或设置一个值，该值指示菜单项的文本是否换行Orientation获取或设置获取或设置Menu控件的呈现方向控件的呈现方向2使用使用Menu控件的显示导航控件的显示导航设置设置Menu控件的控件的Orientation属性，可以实属性，可以实现水平和垂直显示菜单。与现水平和垂直显示菜单。与TreeView控件控件类似，它也需要数据源控件的支持，如配类似，它也需要数据源控件的支持，如配合使用合使用SiteMapDataSource控件。控件。具体实现请参考源代码下具体实现请参考源代码下ch11_5网站中的网站中的Home.aspx、Web.sitemap文件文件.11.5.5 在母版页中使用网站导航在母版页中使用网站导航在母版页中使用网站导航控件，可以在母在母版页中使用网站导航控件，可以在母版页中创建包含导航控件的布局，再将母版页中创建包含导航控件的布局，再将母版页应用于所有的内容页。结合前面所创版页应用于所有的内容页。结合前面所创建的建的Web.sitemap文件，具体的实现步骤如文件，具体的实现步骤如下。下。具体实现请参考源代码下具体实现请参考源代码下ch11_5网站中的网站中的SitMapMasterPage.master、Web.sitemap、Services.aspx文件文件.