在ASP.NET2.0中如何创建母版页和站点导航-创新互联

这篇文章将为大家详细讲解有关在ASP.NET 2.0中如何创建母版页和站点导航,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

武夷山网站建设公司创新互联建站,武夷山网站设计制作,有大型网站制作公司丰富经验。已为武夷山上千多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的武夷山做网站的公司定做!

导言

通常,用户友好的个性化站点都有着一致的,站点统一的页面布局和导航体系。Asp.net 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具,它们是母板页和站点导航。母板页允许开发者创建统一的站点模板和指定的可编辑区域。这样,aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了,所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中。这种模式允许开发者可以统一的管理和定义站点的页面布局,因此可以容易的得到拥有统一的视觉和感觉的页面并且还易于更新。

站点导航系统允许开发者定义站点地图并提供了API以便通过程序查询站点地图信息。新的导航控件包括Menu,TreeView和SiteMapPath,这样可以很容易的在一个一般的导航用户界面元素里呈现全部或者部分站点地图。我们将使用默认的站点导航提供者,这意味着我们的站点地图将定义在一个xml格式的文件中。

为说明这些观念并且使我们的教程的示例站点可用性更佳,让我们通过本次课程定义一个站点统一的页面布局,实现一个站点地图,并且添加导航UI。在这个课程结束时我们的课程示例站点就拥有一个优美的设计效果了。

在ASP.NET 2.0中如何创建母版页和站点导航

图1:本课程的最终成果

步骤1:创建母板页

第一步是为我们的站点创建母板页。到目前为止我们的站点只有一个类型化的DataSet(Northwind.xsd,位于App_Code文件夹),业务逻辑层类库(ProductsBLL.cs,CategoriesBLL.cs等等,这些都在App_Code文件夹里),数据库(NORTHWIND.MDF,位于App_Data文件夹),配置文件(web.config),和一个CSS文件(Style.css)。
我整理这些页面和文件以说明前面两次课程中介绍的数据访问层和业务逻辑层将会在以后课程的更多细节中重用这些示例。

在ASP.NET 2.0中如何创建母版页和站点导航

图2:我们项目中的文件

要创建一个母板页,用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母板类型并且命名为Site.master

在ASP.NET 2.0中如何创建母版页和站点导航

图3:添加一个母板页到站点中

在母板页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件,你还可以手动的在代码视图中添加标记。在我们的母板页中使用了定义在外部文件Style.css中的层叠样式表来定义位置和风格。也许你不知道下面这些标记怎样显示,样式表规则定义了导航用的

标签中的内容绝对定位在页面的左边并且宽度固定为200像素。

Site.master

<%@ Master Language="C#" AutoEventWireup="true"
 CodeFile="Site.master.cs" Inherits="Site" %>





 Working with Data Tutorials
 


 

 

  
  Working with Data Tutorials
  
   TODO: Breadcrumb will go here...
  
               
     TODO: Menu will go here...   
   

一个母板页定义了固定的布局和可以被那些使用了母板页的aspx页面填充的可编辑区域
这个可编辑区域是通过ContentPlaceHolder控件显示,位于

标记中。我们的母板页中只有一个ContentPlaceHolder(MainContent),但是母板页中是可以包含多个ContentPlaceHolder控件的。

输入上面的标记,切换到设计视图观察母板页的布局。所有的使用了这个母板页的aspx页面都会有这样统一的布局,而MainContent区域是留给aspx页面展现自己才华的地方。

在ASP.NET 2.0中如何创建母版页和站点导航

图4:在设计视图中显示的母板页

步骤2:给站点添加一个主页

定义母板页后,我们准备给站点添加一些aspx页面。让我们从添加我们的首页Degault.aspx开始吧。在解决方案管理器中右键点击项目名称并且选择添加新建项目。从模板列表中选择Web Form选项并且命名为Default.aspx。并且,勾上“选择母板页”的复选框。

在ASP.NET 2.0中如何创建母版页和站点导航

图5:添加一个新Web Form并且勾上“选择母板页”的复选框

点击确定按钮后,将会询问你新建的这个aspx页面使用哪个母板页。也许你有多个母板页在你的项目中,但是我们只有一个。

在ASP.NET 2.0中如何创建母版页和站点导航

图6:选择你要使用的母板页

选择母板页后,新建的aspx会包含下面这些标记:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

在@Page指令中有一个指向母板页的引用(MasterPageFile=”~/Site.master”),并且aspx页面的标记中包含了一个Content控件对应母板页中定义的ContentPlaceHolder控件,这个Content控件的ContentPlaceHolderID属性映射到指定的ContentPlaceHolder控件。你可以在Content控件中放置你想显示在相应ContentPlaceHolder控件位置的标记。

设置@Page指令的Title属性为Home并且添加一些欢迎词到Content控件中:


Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>

 

Welcome to the Working with Data Tutorial Site

 

This site is being built as part of a set of tutorials that illustrate some of the new data access and databinding features in ASP.NET 2.0 and Visual Web Developer.

 

Over time, it will include a host of samples that demonstrate:

 
     
  • Building a DAL (data access layer),
  •  
  • Using strongly typed TableAdapters and DataTables
  •  
  • Master-Detail reports
  •  
  • Filtering
  •  
  • Paging,
  •  
  • Two-way databinding,
  •  
  • Editing,
  •  
  • Deleting,
  •  
  • Inserting,
  •  
  • Hierarchical data browsing,
  •  
  • Hierarchical drill-down,
  •  
  • Optimistic concurrency,
  •  
  • And more!
  •  

@Page指令中的Title属性允许我们可以在aspx页面定义标题,即使母板页中已经定义了元素。我们还可以使用Page.Title的编程方式设置页面的标题。需要注意的是母板页中引用的样式表(如Style.css)会自动校正以应用到每个aspx页面中,这是与aspx页面的目录和母板页目录之间的关系无关。</p><p>切换到设计视图我们会看到我们的页面将在浏览器中的显示效果。注意:在设计视图里,aspx页面的内容只有可编辑区域可以被修改,在母板页定义的非ContentPlaceHolder部分标记被显示成灰色。</p><p><img src="/upload/otherpic7/32299.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图7:在设计视图中显示的可编辑区域及非可编辑区域</strong></p><br/><p>当Default.aspx页面被浏览器访问时,asp.net引擎会合并母板页的内容和aspx页的内容,并且将合并的内容呈现为最终的HTML发送到浏览器。当母板页的内容被更新,所有使用了这个母板页的aspx页面会在下次被请求时重新和新的母板页内容合并。简单的说,母板页模型允许定义一个统一的布局模板(母板页),当它改变时整个站点会反应这种改变。<br/>添加更多的页面到站点中<br/>让我们花一点时间添加另外的页面到站点中,以便支持最终的各种各样的课程的示例。这里总共会有超过35个示例,所以我们先创建一部分。以后会有很多类别的示例,为了更好的管理这些示例我们给每个分类添加一个文件夹。现在我们添加三个文件夹:<br/>· BasicReporting<br/>· Filtering<br/>· CustomFormatting<br/>最后,如图8所示向解决方案管理器中添加新文件。每添加一个文件的时候记住要勾上“选择母板页”的复选框。</p><p><img src="/upload/otherpic7/32300.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图8:添加下列文件</strong></p><p><strong>第三步:添加站点地图</strong></p><br/><p>管理一个由大量网页组成的网站的其中一个挑战是要为访问者浏览网站提供一个捷径。作为开始,站点的导航结构必须被定义。下一步,这个结构必须转换成适于导航的用户界面元素,比如菜单或者位置导航。当有新页面添加到站点和已有的页面被移除的时候这个过程将要修改和校正。</p><p>在asp.net 2.0以前,开发者需要自己创<a href="https://www.cdcxhl.com/" target="_blank">建站</a>点导航结构,维护它并且将它转化为适于导航的用户界面元素。在asp.net 2.0里,开发者可以利用非常灵活的且内置的站点导航系统。Asp.net 2.0站点导航系统允许开发者定义一个站点地图并且提供了可以访问这些信息的API。</p><p>默认的Asp.net站点地图提供者期望站点地图信息存储在xml格式的文件中。但是,建立在提供者模型上的站点导航系统是可以被扩展的以支持多种方式储存的站点地图。Jeff Prosise的文章,The SQL Site Map Provider You've Been Waiting For展示了怎样创建将站点地图存储在SQL Server数据库里的提供者;另外一个选择是基于文件系统的站点地图提供者。<br/>在这个指南中,我们仍然使用ASP.NET2.0里默认的站点地图提供者。要创建站点地图,在解决方案管理器里右键点击项目名称,选择添加新项,然后选择站点地图类型。命名为Web.sitemap然后单击添加按钮。</p><p><img src="/upload/otherpic7/32301.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图9:向你的项目中添加站点地图</strong></p><br/><p>站点地图文件是一个xml文件。注意:Visual Studio可以为站点地图结构提供智能感知。站点地图文件必须含有<siteMap>作为根节点,它必须至少含有一个<siteMapNode>子节点。这个<siteMapNode>元素又可以包含任意数量的<siteMapNode>子元素。</p><br/><p>站点地图模拟了文件系统。为每个文件夹添加一个<siteMapNode>元素,并且为每个aspx页面添加一个<siteMapNode>子元素,如此:</p><p>Web.sitemap:</p><pre><?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >  <siteMapNode url="~/Default.aspx" title="Home" description="Home">  <siteMapNode title="Basic Reporting"  url="~/BasicReporting/Default.aspx"  description="Basic Reporting Samples">  <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"   title="Simple Display"   description="Displays the complete contents   of a database table." />  <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"   title="Declarative Parameters"   description="Displays a subset of the contents   of a database table using parameters." />  <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"   title="Setting Parameter Values"   description="Shows how to set parameter values   programmatically." />  </siteMapNode>  <siteMapNode title="Filtering Reports"  url="~/Filtering/Default.aspx"  description="Samples of Reports that Support Filtering">  <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"   title="Filter by Drop-Down List"   description="Filter results using a drop-down list." />  <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"   title="Master-Details-Details"   description="Filter results two levels down." />  <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"   title="Details of Selected Row"   description="Show detail results for a selected item in a GridView." />  </siteMapNode>  <siteMapNode title="Customized Formatting"   url="~/CustomFormatting/Default.aspx"   description="Samples of Reports Whose Formats are Customized">  <siteMapNode url="~/CustomFormatting/CustomColors.aspx"   title="Format Colors"   description="Format the grid s colors based   on the underlying data." />  <siteMapNode   url="~/CustomFormatting/GridViewTemplateField.aspx"   title="Custom Content in a GridView"   description="Shows using the TemplateField to   customize the contents of a field in a GridView." />  <siteMapNode   url="~/CustomFormatting/DetailsViewTemplateField.aspx"   title="Custom Content in a DetailsView"   description="Shows using the TemplateField to customize   the contents of a field in a DetailsView." />  <siteMapNode url="~/CustomFormatting/FormView.aspx"   title="Custom Content in a FormView"   description="Illustrates using a FormView for a   highly customized view." />  <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"   title="Summary Data in Footer"   description="Display summary data in the grids footer." />  </siteMapNode>  </siteMapNode> </siteMap></pre><p>站点地图定义了这个站点的导航结构,它是层次结构的以便描述站点中各种各样的区域。在Web.sitemap中的每个<siteMapNode>元素描述了一个站点结构中的一个区域。</p><p><img src="/upload/otherpic7/32302.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图10:站点地图描述了一个层次的导航结构</strong></p><br/><p>Asp.net通过DotNET 框架中的SiteMap类显示站点地图的结构。这个类有一个CurrentNode属性,它返回当前用户正在访问的节点的信息;RootNode属性返回站点地图的根节点信息(在我们的站点地图中是Home)。CurrentNode呵RootNode属性都返回SiteMapNode实例,SiteMapNode包含ParentNode,ChildNodes,NextSibling,PreviousSibling等属性,这些属性允许站点地图的层次可以被遍历。</p><p><strong>步骤4:利用站点地图显示菜单</strong></p><p>在asp.net 2.0中我们可以像asp.net 1.x一样,有多种编程方式可以访问数据,还可以通过新的数据源控件访问。<br/>这里有多个内置的数据源控件,比如用来访问关系数据库数据的SqlDataSource控件,用来访问类所提供的数据的ObjectDataSoruce控件等等。你还可以创建你自己的自定义数据源控件。</p><p>数据源控件作为你的aspx页面和底层数据的代理。为了显示数据源控件查询到的数据,我们要添加其他Web控件到页面上,并且将它和数据源控件绑定。要绑定一个Web控件到一个数据源控件,只需要简单的设置这个Web控件的DataSourceID属性值为数据源控件的ID属性值。</p><p>为了获取站点地图中的数据,asp.net提供了SiteMapDataSource控件,它允许我们绑定一个Web控件来显示我们的站点地图。TreeView和Menu这两个Web控件常常用来提供导航用户界面。要绑定站点地图中的数据到这两个控件,添加一个SiteMapDataSource控件到页面中,设置TreeView或者Menu控件的DataSourceID属性值为SiteMapDataSource控件的ID属性值就可以了。举个例子,我们可以用下面这些标记将Menu控件到母板页中:</p><pre><div id="navigation">  <asp:Menu ID="Menu1" runat="server"  DataSourceID="SiteMapDataSource1">  </asp:Menu>  <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> </div></pre><p>为了生成优化的HTML,我们可以绑定SiteMapDataSource控件到Repeater控件,如下:</p><pre><div id="navigation">  <ul>  <li><asp:HyperLink runat="server" ID="lnkHome"   NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>  <asp:Repeater runat="server" ID="menu"   DataSourceID="SiteMapDataSource1">   <ItemTemplate>   <li>    <asp:HyperLink runat="server"    NavigateUrl='<%# Eval("Url") %>'>    <%# Eval("Title") %></asp:HyperLink>   </li>   </ItemTemplate>  </asp:Repeater>  </ul>  <asp:SiteMapDataSource ID="SiteMapDataSource1"  runat="server" ShowStartingNode="false" /> </div></pre><p>SiteMapDataSource控件每次返回站点地图层次中的一级,从站点地图中的根节点开始(在我们的站点地图中是Home),然后是下一个级(Basic Reporting,Filtering Reports和Customized Formatting)等等。<br/>当将SiteMapDataSource绑定到Repeater时,它遍历第一级并且用ItemTemplate显示第一级的每个SiteMapNode实例。我们可以使用Eval(属性名称)访问SiteMapNode的细节,这样我们就可以得到SiteMapNode的Url和Title属性给HyperLink控件。<br/>下面显示的是上面使用Repeater控件例子生成的HTML标记:</p><pre><li>  <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a> </li> <li>  <a href="/Code/Filtering/Default.aspx">Filtering Reports</a> </li> <li>  <a href="/Code/CustomFormatting/Default.aspx">  Customized Formatting</a> </li></pre><p>从上面可以看出,站点地图的第二级节点(Basic Reporting,Filtering Reports和Customized Formatting)被显示而不是第一个。</p><br/><p>这是因为SiteMapDataSource控件的ShowStartingNode属性被设为false,导致SiteMapDataSource跳过了站点地图的根节点取而代之的是从站点地图的层次的第二级开始返回信息。<br/>为了显示Basic Reporting,Filtering Reports和Customized Formatting的子SiteMapNode,我们可以向先前的Repeater的ItemTemplate里添加另外一个Repeater。第二个Repeater将绑定到SiteMapNode实例的子结点属性,如下:</p><pre><asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">  <ItemTemplate>  <li>   <asp:HyperLink runat="server"   NavigateUrl='<%# Eval("Url") %>'>   <%# Eval("Title") %></asp:HyperLink>   <asp:Repeater runat="server"   DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>   <HeaderTemplate>    <ul>   </HeaderTemplate>   <ItemTemplate>    <li>    <asp:HyperLink runat="server"     NavigateUrl='<%# Eval("Url") %>'>     <%# Eval("Title") %></asp:HyperLink>    </li>   </ItemTemplate>   <FooterTemplate>    </ul>   </FooterTemplate>   </asp:Repeater>  </li>  </ItemTemplate> </asp:Repeater></pre><p>这两个Repeater生成的HTML标记(为了节省篇幅一些标记被移除了):</p><pre><li>  <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>  <ul>  <li>   <a href="/Code/BasicReporting/SimpleDisplay.aspx">   Simple Display</a>  </li>  <li>   <a href="/Code/BasicReporting/DeclarativeParams.aspx">   Declarative Parameters</a>  </li>  <li>   <a href="/Code/BasicReporting/ProgrammaticParams.aspx">   Setting Parameter Values</a>  </li>  </ul> </li> <li>  <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>  ... </li> <li>  <a href="/Code/CustomFormatting/Default.aspx">  Customized Formatting</a>  ... </li></pre><p>使用的CSS风格选择自Rachel Andrew的书:The CSS Anthology: 101 Essential Tips, Tricks, & Hacks,<ul>和<li>元素的风格将显示如下:</p><p><img src="/upload/otherpic7/32303.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图11:用两个Repeater和一些CSS显示的菜单</strong></p><br/><p>这个菜单在母板页中定义的,绑定了在Web.sitemap中定义的站点地图,这意味着所有站点地图的修改会立即反应到所有使用了Site.master母板页的页面。</p><p>关掉视图状态</p><p>所有的asp.net控件可以随意的保持它们的状态到View State(译注:当原文中采用的是开头字母大写的ViewState将不翻译)中,最终生成HTML时它被系列化并保存在一个隐藏的表单域中。控件用ViewState来记忆它们在页面返回时被程序改变的状态,比如Web控件绑定的数据。如果视图状态允许信息可以在页面返回时保持,它会增大发送到客户端HTML代码的尺寸,如果在没有确切的监控下会使页面膨胀得很厉害。数据显示控件-尤其是GridView控件-会显著地增加大量的额外的标记到页面中。当然,这些增长可能对宽带用户毫无影响,但是视图状态会给拨号上网的用户增加几秒钟的延迟。</p><p>要观察视图状态的影响,在浏览器里打开这个页面然后查看页面的源代码(对于Internet Explorer,点击”查看”菜单并且选择源代码选项)。你还可以打开页面跟踪选项以观察这个页面上每个控件的视图状态。视图状态的信息被系列化并放在位于跟随在<form>标签后面的<div>元素里的名为_VIEWSTATE的隐藏表单域中。</p><p>视图状态只在页面上使用了Form时才会被保持;如果你的aspx页面没有包含<br/><form runat=”server”>的声明,那么最后产生的HTML标记中将不含有VIEWSTATE隐藏表单域。</p><p>母板页产生的VIEWSTATE隐藏表单域大概有1800个字节。这些额外的数据主要是SiteMapDataSource控件为Repeater控件提供的数据内容产生的。也许1800字节左右看起来还不算很多,但是使用了GridView并且使用了很多字段和记录的视图状态很容易就膨胀10倍或更多。</p><p>可以将EnableViewState属性设为false在页面级或者控件级关闭视图状态,从而可以减少产生的标记的大小。Web控件利用视图状态在页面返回时保持要绑定到数据显示控件的数据,当关闭了数据显示控件的视图状态后,在每次页面返回时都必须重新绑定数据到控件。在asp.net 1.x的时候这个职责落到开发者身上;在asp.net 2.0里,页面返回时,数据显示控件会在必要的时候重新绑定数据。</p><p>设置Repeater控件的EnableViewState为false可以减少页面的视图状态。可以通过属性窗口设置或者在代码视图里手动修改。通过这些改变,Repeater标记将会像这样:</p><pre><asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"  EnableViewState="False">  <ItemTemplate>  ... <i>ItemTemplate contents omitted for brevity</i> ...  </ItemTemplate> </asp:Repeater></pre><p>经过这些变化,页面产生的视图状态减少到52个字节,减少了97%的视图状态数据!在这个指南系列里我会关闭所有数据控件的视图状态以减少产生标记的大小。在大多数例子里会在没有提示的情况下将EnableViewState属性设为false。</p><p>仅有当数据Web控件必须打开它的视图状态才能提供期望的功能的情况下我们才讨论。</p><p><strong>步骤5:添加breadcrumb导航</strong></p><p>为完成母板页,让我们给每个页面添加一个breadcrumb导航UI元素。breadcrum导航会快速的显示用户当前在站点中的位置。添加一个breadcrumb导航在asp.net 2.0中是简单的-只要添加一个SiteMapPath控件到页面上就可以了;不需要更多的代码。<br/>在我们的站点中,添加这个控件到头部的<div>标签中:</p><pre><span class="breadcrumb">  <asp:SiteMapPath ID="SiteMapPath2" runat="server">  </asp:SiteMapPath> </span></pre><p>breadcrum导航控件显示了用户当前访问的页面以及它的父级节点,直至到根节点(在我们的站点地图中是Home)。</p><p><img src="/upload/otherpic7/32304.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图12:利用位置导航控件显示在站点地图层次中的当前页面及其父页面</strong></p><p><strong>步骤6:给每个部分添加默认页面</strong></p><p>在我们的站点中这个课程被分成不同的分类-Basic Reporting,Filtering,Custom Formatting等等-每个分类有一个文件夹并且有对应课程的aspx页面。并且,每个文件夹里包含一个Default.aspx页面。在这个默认页面中,将显示这个部分的所有课程。比如,我们可以通过BasicReporting文件夹里的Default.aspx页面连接到SimpleDisplay.aspx,DeclarativeParams.aspx和ProgrammaticParams.aspx。这里,我们可以再次使用SiteMap类和一个数据显示控件显示定义在Web.sitemap文件内的站点地图的信息。</p><p>让我们再次使用Repeater显示一个无序列表,不过这次我们会显示指南的标题和描述。我们需要在每个Default.aspx页面重复这些标记和代码,我们可以将这个UI逻辑封装成一个User Control。在站点中添加一个名为UserControls的文件夹并添加一个名为SectionLevelTutorialListing.ascx的Web用户控件,它包含一下标记:</p><p><img src="/upload/otherpic7/32305.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图13:向UserControls文件夹里添加新Web用户控件</strong></p><p>SectionLevelTutorialListing.ascx</p><pre><%@ Control Language="CS" AutoEventWireup="true"  CodeFile="SectionLevelTutorialListing.ascx.cs"  Inherits="UserControls_SectionLevelTutorialListing" %> <asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">  <HeaderTemplate><ul></HeaderTemplate>  <ItemTemplate>  <li><asp:HyperLink runat="server"   NavigateUrl='<%# Eval("Url") %>'   Text='<%# Eval("Title") %>'></asp:HyperLink>   - <%# Eval("Description") %></li>  </ItemTemplate>  <FooterTemplate></ul></FooterTemplate> </asp:Repeater></pre><p>SectionLevelTutorialListing.ascx.cs</p><pre>using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class UserControls_SectionLevelTutorialListing : UserControl {  protected void Page_Load(object sender, EventArgs e)  {  // If SiteMap.CurrentNode is not null,  // bind CurrentNode ChildNodes to the GridView  if (SiteMap.CurrentNode != null)  {   TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;   TutorialList.DataBind();  }  } }</pre><p>在前面的Repeater例子中我将SiteMap的数据绑定到Repeater上;当然,这个SectionLevelTutorialListing用户控件也将使用这种方法。在Page_Load事件里,有一个检测程序以确保这是否是第一次访问该页面(不是返回)并且这个页面的URL要映射到站点地图中的一个节点。如果页面使用了这个用户控件,那么就没有对应的<br/><siteMapNode>,SiteMap.CurrentNode会返回null并且将没有数据绑定到Repeater控件。假设我们有一个CurrentNode,我可以将它的ChildNodes集合绑定到这个Repeater。每个部分的Default.aspx页面是这个部分内教程的父节点,这些代码会展示每个部分内教程的连接和描述,下面是屏幕截图:<br/>一旦这个Repeater创建好后,在设计视图里打开每个文件夹的Default.aspx页面,将这个用户控件拖到你要显示的地方。</p><p><img src="/upload/otherpic7/32306.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图14:用户控件已经添加到Default.aspx页面上</strong></p><p><img src="/upload/otherpic7/32307.png" alt="在ASP.NET 2.0中如何创建母版页和站点导航"></p><p><strong>图15:Basic Reporting指南的列表</strong></p><p>关于“在ASP.NET 2.0中如何创建母版页和站点导航”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。</p> <br> 文章名称:在ASP.NET2.0中如何创建母版页和站点导航-创新互联 <br> URL地址:<a href="http://hzjierui.cn/article/dsspeh.html">http://hzjierui.cn/article/dsspeh.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dejidpo.html">c语言中延迟函数怎么写 c语言中延迟函数怎么写的</a> </li><li> <a href="/article/dejidep.html">企业级的路由器 企业级的路由器可以家里用吗</a> </li><li> <a href="/article/dejidid.html">什么改路由器密码 想改路由器的密码怎么改</a> </li><li> <a href="/article/dejidjc.html">成都企业网站制作重点是哪些</a> </li><li> <a href="/article/dejidpj.html">路由器的寿命一般是多久 路由器的寿命多长</a> </li> </ul> </div> </div> <div class="f_service_con"> <div class="h_fumin"> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service01.png"></div> <p>售后响应及时</p><span>7×24小时客服热线</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service02.png"></div> <p>数据备份</p><span>更安全、更高效、更稳定</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service03.png"></div> <p>价格公道精准</p><span>项目经理精准报价不弄虚作假</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service04.png"></div> <p>合作无风险</p><span>重合同讲信誉,无效全额退款</span> </div> </div> </div> <div class="footerbar"> <div class="footer-t"> <div class="f-box"> <div class="f-1"> <div class="f-t"> <h2>联系我们</h2> <span>TEL</span> </div> <div class="f-b"> <h1><a href="tel:13518219792" rel="nofollow">135-1821-9792</a></h1> <h1><a href="tel:028-86922220" rel="nofollow">028-86922220</a></h1> <p>地址:成都市太升南路288号锦天国际</p> </div> </div> <div class="f-2"> <div class="f-t"> <h2>快捷导航</h2> <span>Shortcut</span> </div> <div class="f-b"> <ul > </ul> <ul > <li><a href="/jianshe" title="彭州网站建设">彭州网站建设</a></li> <li><a href="/jianshe#ym_websiteBox2" title="品牌网站建设">品牌网站建设</a></li> <li><a href="/jianshe#ym_websiteBox1" title="企业网站建设">企业网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4" title="集团网站建设">集团网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4_2" title="外贸网站建设">外贸网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4_5" title="企业宣传视频">企业宣传视频</a></li> </ul> <ul > <li><a href="/weixin" title="微信开发">微信开发</a></li> <li><a href="/weixin#item1" title="公众号开发">公众号开发</a></li> <li><a href="/weixin#item2" title="微商城建设">微商城建设</a></li> <li><a href="/weixin#item3" title="微官网建设">微官网建设</a></li> <li><a href="/weixin#item4" title="小程序开发">小程序开发</a></li> </ul> <ul> <li><a href="/case/" title="网站作品案例">网站作品案例</a></li> <li><a href="/case/" title="品牌网站案例">品牌网站案例</a></li> <li><a href="/case/" title="集团网站案例">集团网站案例</a></li> <li><a href="/case/" title="企业网站案例">企业网站案例</a></li> <li><a href="/case/" title="外贸网站案例">外贸网站案例</a></li> <li><a href="/case/" title="营销网站案例">营销网站案例</a></li> </ul> <ul style="margin:0;"> <li><a href="/about/">广皓图文建站</a></li> <li><a href="/about/">公司简介</a></li> <li><a href="/about#ab_item3">企业文化</a></li> <li><a href="/contact">联系我们</a></li> <li><a href="/Pay.html">付款方式</a></li> <li><a href="/jianshe#ym_websiteBox8">售后服务</a></li> </ul> <div style="clear:both;"></div> </div> </div> <div class="f-3"> <div class="f-t"> <h2>二维码</h2> <span>QR CODE</span> </div> <div class="f-b"> <ul> <li><img src="/Public/Home/images/fewm.png"> <p>微信公众号</p> </li> <li style="margin: 0"><img src="/Public/Home/images/fewm2.png"> <p>手机端网站</p> </li> <div style="clear:both;"></div> </ul> </div> </div> <div style="clear:both;"></div> </div> </div> <div class="footer-about"> <div class="w1200">彭州广皓图文建站工作室是一家专注从事于高品质视觉体验及互联网设计开发,<a href="/" target="_blank">彭州网站建设</a>,<a href="/jianshe" target="_blank">彭州网站设计</a>,<a href="/jianshe" target="_blank">彭州网页设计</a>,<a href="/jianshe" target="_blank">彭州网站制作</a>,<a href="/jianshe#ym_websiteBox2" target="_blank">品牌网站建设</a>,<a href="/jianshe#ym_websiteBox3" target="_blank">营销网站建设</a>,<a href="/jianshe#ym_websiteBox4" target="_blank">集团网站建设</a>,<a href="/jianshe#ym_websiteBox1" target="_blank">企业网站建设</a>,<a href="/jianshe#ym_websiteBox4_2" target="_blank">外贸网站建设</a>,<a href="/jianshe#ym_websiteBox4_3" target="_blank">响应式网站建设</a>,<a href="/weixin#item4" target="_blank">小程序开发</a>,<a href="/weixin" target="_blank">微信开发</a>,<a href="/jianshe#ym_websiteBox4_4" target="_blank">企业形象设计</a>,<a href="/jianshe#ym_websiteBox4_5" target="_blank">企业宣传视频</a>等服务,广皓图文建站位于彭州市龙岗区大运软件小镇,广皓图文建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员,具备各种规模与类型网站建设的雄厚实力,在网站建设领域树立了自己独特的设计风格。 </div> <div class="friend-links"> <h6 class="clearfix"> <span class="tilte">友情链接</span> <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a> </h6> <div class="link-list clearfix"> <div class="link-slider"> <a href="https://www.cdxwcx.com/tuiguang/" title="网站优化排名" target="_blank">网站优化排名</a>   <a href="http://chengdu.cdcxhl.cn/jianshe/ " title="品牌网站建设" target="_blank">品牌网站建设</a>   <a href="http://www.gzxishu.com/" title="南充网站维护公司" target="_blank">南充网站维护公司</a>   <a href="https://www.cdcxhl.com/" title="成都创新互联" target="_blank">成都创新互联</a>   <a href="http://www.cdhcym.com/" title="成都除甲醛" target="_blank">成都除甲醛</a>   <a href="http://www.cdhuace.com/zhuangxiu.html" title="成都店面装修公司" target="_blank">成都店面装修公司</a>   <a href="http://www.wcggcd.com/" title="成都广告制作" target="_blank">成都广告制作</a>   <a href="http://www.cdxwcx.cn/tuoguan/dazhou.html" title="达州托管服务器" target="_blank">达州托管服务器</a>   <a href="http://www.hbxxgc.cn/" title="乐山中领科信" target="_blank">乐山中领科信</a>   <a href="http://www.xhgfhy.com/ " title="成都封阳台" target="_blank">成都封阳台</a>    </div> </div> </div> </div> <div class="footer-b"> <div class="f-box"> <ul> <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li> <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li> <li><a href="/about/" target="_blank">联系我们</a></li> <li><a href="https://www.cdxwcx.com/pay/" target="_blank">付款方式</a></li> <li><a href="https://www.cdcxhl.com/menu.html" target="_blank">网站地图</a></li> <li><a href="#" target="_blank">sitemap</a></li> <li> <p> <script data-cfasync="false" src="/Public/Home/js/email-decode.min.js"></script> </p> </li> <div style="clear:both;"></div> </ul> <p class="copy">Copyright © 2025 青羊区广皓图文设计工作室(个体工商户) 彭州建站工作室 All Rights Reserved   <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2025118593号-4</a> </p> <div style="clear:both;"></div> </div> </div> <div class="sj_footer"> <div class="f-box"> <ul> <li><a href="/jianshe" target="_blank">网站建设</a></li> <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li> <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li> <li><a href="https://www.cdxwcx.com/pay/" target="_blank">付款方式</a></li> <li><a href="/about/" target="_blank">关于我们</a></li> <li><a href="https://www.cdcxhl.com/menu.html" target="_blank">网站地图</a></li> <div style="clear:both;"></div> </ul> <p class="copy">Copyright © 2025 青羊区广皓图文设计工作室(个体工商户) 广皓图文网站建设——彭州站</p> <p class="copy"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2025118593号-4</a>  <a href="###" target="_blank"><img src="/Public/Home/images/govicon.gif" width="20" height="28" border="0" style="border-width:0px;border:hidden; border:none;"></a></p> <div style="clear:both;"></div> </div> </div> </div> <script type='text/javascript' src='/Public/Home/js/qqkefu.js'></script> <div class="qqkefu"> <ul> <li class="qq_czaa" id="130"><b class="a"></b>135-1821-9792</li> <li class="qq_czaa" id="130"><a href="tencent://message/?uin=1683211881"><b class="b"></b>业务咨询QQ</a></li> <li class="qq_czaa" id="130"><a href="javascript:showDiv()"><b class="f"></b>提交合作意向表</a></li> <li class="qq_czb"> <b class="c"></b> <div class="erweima"> <p><img src="/Public/Home/images/right_erweima.png"></p> </div> </li> <li class="top"><span></span></li> </ul> </div> <div id="popDiv" class="mydiv" style="display:none;"> <a class="mydiv_clk" href="javascript:closeDiv()">X</a> <div class="mydiv_list"> <div class="c_f_title"><span class="c_f_t">合作意向表</span></div> <div class="c_f_con"> <form id="form1" name="form1" class="mess_form" method="post" action="/post_order"> <input name='enews' type='hidden' value='AddFeedback'> <input name="bid" value="1" type="hidden"> <input type="hidden" name="ecmsfrom" value="9"> <input type="hidden" name='title' value="客户提交需求"> <li class="c_n"><span>公司名称</span> <dl><input name='gsname' id='gsname' type="text"></dl> </li> <li class="c_n"><span>邮箱</span> <dl><input name='gemail' id='gemail' type="text"></dl> </li> <li class="c_n xmm"> <div class="xmm_01"><span>姓名</span> <dl class="c_n_i"><input name='name' id='name' type="text"></dl> </div> <div class="xmm_01"><span style="text-align:center">电话</span> <dl class="c_n_i"><input name="tel" type="text"></dl> </div> </li> <li class="c_tser">您需要的服务</li> <li class="clearfix"> <dd><label><input type="radio" name='hobby' id='hobby' value="高端网站建设"><span>高端网站建设</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做微信营销"><span>我需要做微信营销</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="要找长期合作,需要年度服务"><span>要找长期合作,需要年度服务</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做购物商城"><span>我需要做购物商城</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要网站改版"><span>我需要网站改版</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="其他"><span>其他</span></label></dd> </li> <li class="c_tser">您关注的地方</li> <li class="clearfix"> <dd><label><input type="radio" name='hobby2' id='hobby2' value="对功能要求比较高"><span>对功能要求比较高</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="对设计创意要求比较高"><span>对设计创意要求比较高</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="需要可以购物支付"><span>需要可以购物支付</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="搜索引擎排名"><span>搜索引擎排名</span></label></dd> </li> <li class="c_tser">预算</li> <li class="clearfix clearfix2"> <dd><label><input type="radio" name='hobby3' id='hobby3' value="一万以内"><span>一万以内</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="1-3万"><span>1-3万</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="3-5万"><span>3-5万</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="5万以上"><span>5万以上</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="需招投标"><span>需招投标</span></label> </dd> </li> <li class="c_n" style="border-top:1px solid #eee; padding-top:10px"><span>验证码</span> <dl class="c_n_i yzmm"><input type="text" name='code' id='code' value=""></dl><span style="text-align:center"><img src="/Public/Home/images/1661eb19783442c38063791555cd0d80.gif" onclick="this.src=this.src + '?'" width="100" height="40"></span> </li> <li class="clearfix"> <dd class="submit"><input name='submit' type="submit" value="提交需求"></dd> </li> </form> </div> </div> </div> <div id="bg" class="bg" style="display:none;"></div> <div id='popIframe' class='popIframe' frameborder='0'></div> <script> //提交需求选项 $(document).ready(function (e) { $(".mess_form").submit(function () { if ($("#gsname").val() == "") { alert("请填写您的公司名称!"); $("#gsname").focus(); return false; } if ($("#gemail").val() == "") { alert("请填写您的邮箱"); $("#gemail").focus(); return false; } if ($("#name").val() == "") { alert("请填写您的姓名!"); $("#name").focus(); return false; } if ($("#tel").val() == "") { alert("请填写您的电话!"); $("#tel").focus(); return false; } if ($("#hobby").val() == "") { alert("请选择您需要的服务!"); $("#hobby").focus(); return false; } if ($("#hobby2").val() == "") { alert("请选择您关注的地方!"); $("#hobby2").focus(); return false; } if ($("#hobby3").val() == "") { alert("请选择您的预算!"); $("#hobby3").focus(); return false; } if ($("#code").val() == "") { alert("请填写正确的验证码!"); $("#code").focus(); return false; } }); }); </script> <script language="javascript" type="text/javascript"> //提交需求窗口 function showDiv() { document.getElementById('popDiv').style.display = 'block'; document.getElementById('popIframe').style.display = 'block'; document.getElementById('bg').style.display = 'block'; } function closeDiv() { document.getElementById('popDiv').style.display = 'none'; document.getElementById('bg').style.display = 'none'; document.getElementById('popIframe').style.display = 'none'; } </script> <script type="text/javascript" src="/Public/Home/js/scrolltopcontrol.js"></script> <script type="text/javascript" src="/Public/Home/js/su_new.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>