×
400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

在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://mzwzsj.com/article/dsspeh.html">http://mzwzsj.com/article/dsspeh.html</a> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li><a href="/article/dohpscs.html">关于linux如何命令下载的信息</a></li><li><a href="/article/dohpscp.html">wordpress购物车 如何使用wordpress建一个购物网站</a></li><li><a href="/article/dohpsds.html">phpci查询数据库 php数据库查询结果处理</a></li><li><a href="/article/dohpsog.html">关于vbnet表格实例的信息</a></li><li><a href="/article/dohpsdg.html">帝国cms下载 帝国cms下载页改大</a></li> </ul> </div> </div> <div class="oneE"> <div class="oneEa container wow fadeInUp"> <ul> <li> <dd><img src="/Public/Home/img/oe1.png" alt=""></dd> <h3>网站建设专属方案</h3> </li> <li> <dd><img src="/Public/Home/img/oe2.png" alt=""></dd> <h3>网站定制化设计</h3> </li> <li> <dd><img src="/Public/Home/img/oe3.png" alt=""></dd> <h3>7X24小时服务</h3> </li> <li> <dd><img src="/Public/Home/img/oe4.png" alt=""></dd> <h3>N对管家服务</h3> </li> </ul> </div> <div class="oneEb container wow fadeInUp"> <h2>让你的专属顾问为你服务</h2> <form action=""> <input type="text" placeholder="需求"> <input type="text" placeholder="输入你的联系方式(微信或电话号码)"> <button>立即联系</button> </form> </div> </div> <footer> <div class="foot container"> <div class="footl"> <img src="/Public/Home/img/logo.png" alt=""> <p>用前卫的视觉</p> <p>把握好每一个细节</p> </div> <div class="footc"> <dl> <dt>服务项目</dt> <dd><a href="">网站建设</a></dd> <dd><a href="">网站优化</a></dd> <dd><a href="">网站设计</a></dd> <dd><a href="">小程序开发</a></dd> <dd><a href="">电商平台</a></dd> </dl> <dl> <dt>客户案例</dt> <dd><a href="">网站案例</a></dd> <dd><a href="">优化案例</a></dd> <dd><a href="">外贸网站案例</a></dd> </dl> <dl> <dt>资讯中心</dt> <dd><a href="">建站动态</a></dd> <dd><a href="">网站知识</a></dd> <dd><a href="">网站运营</a></dd> </dl> <dl> <dt>快捷导航</dt> <dd><a href="">关于浩康</a></dd> <dd><a href="">联系方式</a></dd> </dl> </div> <div class="footr"> <h3>联系方式</h3> <p>地址：成都市太升南路288号锦天国际A幢1002号</p> <div class="tel"> <i><img src="/Public/Home/img/ftel.png" alt=""></i><a href="tel:13518219792">电话：13518219792</a> </div> </div> </div> <div class="yqlink container"> 标签： <a href="http://www.zsjierui.cn/" target="_blank">资阳</a> <a href="http://www.wzjierui.cn/" target="_blank">温江</a> <a href="http://www.ndjierui.cn/" target="_blank">南部</a> <a href="http://www.ptjierui.cn/" target="_blank">郫县</a> <a href="http://www.hzjierui.cn/" target="_blank">彭州</a> <a href="http://www.ncjierui.cn/" target="_blank">彭山</a> <a href="http://www.whjierui.cn/" target="_blank">乐山</a> <a href="http://www.ahjierui.cn/" target="_blank">简阳</a> <a href="http://www.csjierui.cn/" target="_blank">绵阳</a> <a href="http://www.qhjierui.cn/" target="_blank">德阳</a> <a href="http://www.scjierui.cn/" target="_blank">四川</a> <a href="http://www.tjjierui.cn/" target="_blank">什邡</a> <a href="http://www.tyjierui.cn/" target="_blank">绵竹</a> <a href="http://www.xzjierui.cn/" target="_blank">眉山</a> <a href="http://www.sxjierui.cn/" target="_blank">双流</a> <a href="http://www.ptruijie.cn/" target="_blank">新都</a> <a href="http://www.xjjierui.cn/" target="_blank">新津</a> <a href="http://www.jljierui.cn/" target="_blank">龙泉</a> <a href="http://www.gyruijie.cn/" target="_blank">广汉</a> <a href="http://www.csruizhi.cn/" target="_blank">崇州</a> <a href="http://www.zjjierui.cn/" target="_blank">广元</a> <a href="http://www.zzjierui.cn/" target="_blank">广安</a> <a href="http://www.hnjierui.cn/" target="_blank">巴中</a> <a href="http://www.fjjierui.cn/" target="_blank">达州</a> <a href="http://www.gyjierui.cn/" target="_blank">南充</a> <a href="http://www.fzjierui.cn/" target="_blank">遂宁</a> <a href="http://www.cdjierui.cn/" target="_blank">广安</a> <a href="http://www.jxjierui.cn/" target="_blank">内江</a> <a href="http://www.jxruijie.cn/" target="_blank">自贡</a> <a href="http://www.hyruijie.cn/" target="_blank">泸州</a> <a href="http://www.gzruizhi.cn/" target="_blank">宜宾</a> </div> <div class="copy container"> <div class="copyl"> © Copyright 2013-2025 成都浩康科技有限公司 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#FFFFFF">蜀ICP备17025366号-9</a> 版权所有 <a href="https://www.cdcxhl.com/menu.html">网站地图</a> <a href="https://www.cdcxhl.com/articles/" rel="nofollow">其他文章分类</a> <a href="http://www.mzwzsj.com">梅州浩康建站</a> </div> <div class="copyr"> <i><img src="/Public/Home/img/foot1.png" alt=""></i> <i><img src="/Public/Home/img/foot2.png" alt=""></i> <i><img src="/Public/Home/img/foot3.png" alt=""></i> <i><img src="/Public/Home/img/foot4.png" alt=""></i> </div> </div> <div class="bq_tag container"> 热门推荐： <a href="http://m.cdxwcx.com/" target="_blank">成都网站建设</a><a href="https://www.cdxwcx.com/cloud/" target="_blank">成都云服务器</a><a href="http://www.kswsj.cn/" target="_blank">成都网站建设</a><a href="https://www.cdxwcx.com/" target="_blank">网站制作</a><a href="http://www.cdxwcx.cn/tuoguan/yaan.html" target="_blank">雅安机房托管</a><a href="http://www.myfdjwx.com/" target="_blank">myfdjwx.com</a><a href="http://www.4006tel.net/mobile/" target="_blank">Android开发</a><a href="http://www.scdazhu.cn/" target="_blank">scdazhu.cn</a><a href="https://www.cdxwcx.com/wangzhan/mbshangcheng.html" target="_blank">商城网站</a><a href="http://www.qhjierui.cn/" target="_blank">德阳定制网站建设</a><a href="http://www.cqwzjz.cn/" target="_blank">cqwzjz.cn</a><a href="http://www.ljwzsj.com/" target="_blank">ljwzsj.com</a> </div> </footer> <div class="footbarline"></div> <div id="footbar" class="uin0"> <ul> <li class="on" data-href="/"><a><i><svg t="1638436981291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2991" width="48" height="48"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="2992" fill="#2c2c2c"></path></svg><p>首页</p></i></a></li> <li><a href="tel:13518219792"><i><svg t="1638437906526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4519" width="48" height="48"><path d="M705.74 604.873333a53.4 53.4 0 0 0-75.426667 0l-37.713333 37.713334c-21.333333 21.333333-90.413333 0.1-150.846667-60.34S360.046667 452.76 381.413333 431.4l0.046667-0.046667 37.666667-37.666666a53.4 53.4 0 0 0 0-75.426667l-165.94-165.933333a53.393333 53.393333 0 0 0-75.42 0l-37.713334 37.713333c-27.866667 27.866667-44.84 64.52-50.46 108.946667-5.213333 41.206667-0.406667 87.42 14.28 137.333333C133.333333 536.586667 199.773333 642 290.9 733.1S487.42 890.666667 587.653333 920.126667c36.926667 10.86 71.813333 16.32 104.146667 16.32a264.333333 264.333333 0 0 0 33.213333-2.04c44.426667-5.62 81.08-22.593333 108.946667-50.46l37.713333-37.713334a53.393333 53.393333 0 0 0 0-75.42z m135.76 211.193334l-37.706667 37.713333c-42.58 42.573333-115.06 51.6-204.1 25.413333-93.506667-27.5-192.453333-90.1-278.62-176.266666s-148.766667-185.113333-176.266666-278.62c-26.186667-89.033333-17.16-161.52 25.413333-204.1l37.713333-37.706667a10.666667 10.666667 0 0 1 15.086667 0l165.933333 165.933333a10.666667 10.666667 0 0 1 0 15.086667l-37.713333 37.706667C329.113333 423.333333 324.666667 458.82 338.766667 501.073333c12.426667 37.273333 38.286667 76.813333 72.813333 111.333334s74.073333 60.386667 111.333333 72.813333c16.213333 5.406667 31.42 8.08 45.26 8.08 22.233333 0 40.946667-6.913333 54.586667-20.553333l37.706667-37.713334a10.666667 10.666667 0 0 1 15.086666 0l165.933334 165.933334a10.666667 10.666667 0 0 1 0.013333 15.1zM576 234.666667a21.333333 21.333333 0 0 1 21.333333-21.333334 213.333333 213.333333 0 0 1 213.333334 213.333334 21.333333 21.333333 0 0 1-42.666667 0c0-94.106667-76.56-170.666667-170.666667-170.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z m0 128a21.333333 21.333333 0 0 1 21.333333-21.333334 85.426667 85.426667 0 0 1 85.333334 85.333334 21.333333 21.333333 0 0 1-42.666667 0 42.713333 42.713333 0 0 0-42.666667-42.666667 21.333333 21.333333 0 0 1-21.333333-21.333333z m362.666667 64a21.333333 21.333333 0 0 1-42.666667 0c0-164.666667-134-298.666667-298.666667-298.666667a21.333333 21.333333 0 0 1 0-42.666667 341.073333 341.073333 0 0 1 341.333334 341.333334z" fill="#2c2c2c" p-id="4520"></path></svg><p>电话</p></i></a></li> <li><a class="opwx"><i><svg t="1638438138558" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10851" width="48" height="48"><path d="M498.816 345.056c26.336 0 43.936-17.632 43.936-43.904 0-26.56-17.568-43.744-43.936-43.744s-52.832 17.184-52.832 43.744C446.016 327.424 472.48 345.056 498.816 345.056zM253.088 257.408c-26.336 0-52.96 17.184-52.96 43.744 0 26.272 26.624 43.904 52.96 43.904 26.24 0 43.808-17.632 43.808-43.904C296.864 274.592 279.328 257.408 253.088 257.408zM1024 626.112c0-138.88-128.832-257.216-286.976-269.536 0.224-1.728 0.32-3.52-0.064-5.312-31.712-147.84-190.688-259.296-369.824-259.296C164.704 91.968 0 233.12 0 406.624c0 93.088 47.52 176.96 137.568 243.104l-31.392 94.368c-2.016 6.144-0.192 12.896 4.704 17.152 2.976 2.56 6.72 3.904 10.496 3.904 2.432 0 4.896-0.576 7.168-1.696L246.4 704.48l14.528 2.944c36.288 7.456 67.616 13.92 106.208 13.92 11.36 0 22.88-0.512 34.176-1.472 4.576-0.384 8.448-2.688 11.072-6.016 42.496 106.336 159.616 183.104 297.44 183.104 35.296 0 71.04-8.512 103.104-16.544l90.848 49.664c2.4 1.312 5.056 1.984 7.68 1.984 3.584 0 7.168-1.216 10.048-3.552 5.056-4.096 7.136-10.848 5.248-17.024l-23.2-77.152C981.344 772.864 1024 699.328 1024 626.112zM398.592 687.968c-10.4 0.896-20.96 1.344-31.424 1.344-35.328 0-65.216-6.112-99.776-13.248L247.296 672c-3.456-0.736-7.104-0.256-10.272 1.376l-88.288 44.192 22.944-68.928c2.24-6.752-0.224-14.112-6.016-18.176C76.96 568.64 32 493.312 32 406.624c0-155.84 150.336-282.656 335.136-282.656 163.36 0 308 99.392 337.856 231.584-171.296 2.24-309.888 122.656-309.888 270.56 0 21.504 3.264 42.336 8.768 62.432C402.208 688.128 400.448 687.808 398.592 687.968zM875.456 815.552c-5.344 4.032-7.616 10.976-5.696 17.376l15.136 50.336-62.112-33.984c-2.368-1.312-5.024-1.984-7.68-1.984-1.312 0-2.624 0.16-3.904 0.512-33.312 8.416-67.776 17.088-101.344 17.088-155.904 0-282.72-107.136-282.72-238.816 0-131.68 126.816-238.784 282.72-238.784 152.928 0 282.144 109.344 282.144 238.784C992 691.744 950.624 759.04 875.456 815.552zM612.992 511.968c-17.568 0-35.136 17.696-35.136 35.232 0 17.664 17.568 35.104 35.136 35.104 26.4 0 43.84-17.44 43.84-35.104C656.832 529.632 639.392 511.968 612.992 511.968zM806.016 511.968c-17.312 0-34.88 17.696-34.88 35.232 0 17.664 17.568 35.104 34.88 35.104 26.304 0 44.064-17.44 44.064-35.104C850.08 529.632 832.352 511.968 806.016 511.968z" p-id="10852" fill="#2c2c2c"></path></svg><p>微信</p></i></a></li> <li data-href="/about/"><a><i><svg t="1638438056011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9170" width="48" height="48"><path d="M896 405.333333v128c0 34.133333-29.866667 64-64 64S768 567.466667 768 533.333333v-128c0-17.066667 8.533333-34.133333 17.066667-42.666666C733.866667 251.733333 640 170.666667 516.266667 170.666667H512c-128 0-221.866667 81.066667-273.066667 192 8.533333 8.533333 17.066667 25.6 17.066667 42.666666v128c0 34.133333-29.866667 64-64 64S128 567.466667 128 533.333333v-128C128 371.2 157.866667 341.333333 192 341.333333h4.266667c51.2-123.733333 174.933333-213.333333 315.733333-213.333333s264.533333 89.6 315.733333 213.333333h4.266667c34.133333 0 64 29.866667 64 64zM896 896H128c0-98.133333 170.666667-213.333333 384-213.333333s384 115.2 384 213.333333z m-59.733333-42.666667c-42.666667-59.733333-170.666667-128-324.266667-128s-281.6 68.266667-324.266667 128h648.533334zM512 682.666667c-119.466667 0-213.333333-93.866667-213.333333-213.333334s93.866667-213.333333 213.333333-213.333333 213.333333 93.866667 213.333333 213.333333-93.866667 213.333333-213.333333 213.333334z m170.666667-213.333334c0-93.866667-76.8-170.666667-170.666667-170.666666s-170.666667 76.8-170.666667 170.666666 76.8 170.666667 170.666667 170.666667 170.666667-76.8 170.666667-170.666667z" fill="#2c2c2c" p-id="9171"></path></svg><p>联系</p></i></a></li> </ul> <div class="fbrbg"><img src="/Public/Home/img/fbarbg.png"></div> </div> </body> </html> <script src="/Public/Home/js/jquery.min.js"></script> <script src="/Public/Home/js/wow.min.js"></script> <script src="/Public/Home/js/common.js"></script> <script> $(".ny_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); } }); </script>