21、探索ASP.NET控件：导航、广告轮播与数据展示

ruby5

于 2025-10-10 09:30:59 发布

阅读量25

点赞数

CC 4.0 BY-SA版权

分类专栏： Expression Web 4实战指南文章标签： ASP.NET 导航控件菜单

本文链接：https://blog.youkuaiyun.com/ruby5/article/details/153303238

Expression Web 4实战指南专栏收录该内容

26 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

探索ASP.NET控件：导航、广告轮播与数据展示

1. 网站导航控件的使用

在ASP.NET开发中，工具箱面板的ASP.NET控件部分有一个名为“导航”的组，其中包含三种类型的网站导航控件：菜单（Menu）、站点地图路径（SiteMapPath）和树视图（TreeView）。这些控件的导航信息都来自于名为Web.sitemap的XML文件，该文件保存在网站的根目录下。
- 菜单（Menu） ：这是一种动态HTML类型的菜单控件。当指向有子页面的链接时，会出现二级菜单。
- 树视图（TreeView） ：它以层次结构组织项目，类似于浏览msdn.microsoft.com这样的网站时看到的结构，适合组织具有多级层次信息的大型网站。
- 站点地图路径（SiteMapPath） ：提供“面包屑导航”，指示浏览器当前显示的页面以及导航结构中该页面之前和之后的页面。

以下是添加ASP.NET导航控件的具体步骤：
1. 打开之前创建的Chapter9.aspx文件，若SampleSite站点未打开则先打开它。
2. 点击Chapter9.aspx代码面板上方的主页面（default.master）链接，在工作区中打开主页面。
3. 切换回Chapter9.aspx文件，在设计面板中点击导航区域（ContentPlaceHolder2）进行选择。
4. 点击其右上角的“内容任务”按钮，然后点击“创建自定义内容”。此时，Expression Web会在Chapter9.aspx中插入一个ASP.NET内容控件，并将default.master文件中ContentPlaceHolder内的内容填充到该控件中，使该内容在该页面上可编辑。
5. 在设计面板中，点击页面顶部导航区域的“Home”，点击快速标签选择器上的 <ul> 标签以选择整个标签及其内容，然后按键盘上的Delete键将其删除。
6. 在工具箱面板中，展开ASP.NET控件组，再展开“导航”，双击“菜单”以将ASP.NET菜单控件插入页面。
7. 从“文件”菜单中选择“新建”，然后选择“页面”，点击左侧的ASP.NET类别，再双击“站点地图”，创建Web.sitemap文件。
8. 双击站点/files文件夹中的Sitemap.txt文件，将其全部内容复制到剪贴板，关闭Sitemap.txt文件并返回Web.sitemap，设置光标位置，按Ctrl + A选择所有内容，再按Ctrl + V将文本文件的内容粘贴到站点地图中。
9. 点击常用工具栏上的“保存”，将文件保存为Web.sitemap到站点的根文件夹，然后切换回Chapter9.aspx文件。
10. 点击菜单控件右上角的“菜单任务”按钮，在“菜单任务”弹出窗口的“选择数据源”框中，点击“新建数据源”，在“数据源配置向导”中点击“站点地图”，然后点击“确定”。
11. 在设计面板中点击菜单控件进行选择，在“标签属性”面板中，向下滚动到“行为”组，在“静态显示级别”字段中输入2，再向下滚动到“布局”组，确保“方向”字段设置为“垂直”。
12. 点击“保存”，然后点击常用工具栏上的“预览”，启动ASP.NET开发服务器并在浏览器中预览页面。
13. 关闭浏览器并返回Expression Web，将菜单控件从Chapter9.aspx文件移动到主页面，然后将Chapter9.aspx文件重置为主页面的内容。
14. 创建一个新页面Chapter9b.aspx，并将其添加到站点地图文件中。具体操作是在Web.sitemap文件中找到原chapter9.aspx文件的条目代码：

<siteMapNode url="Chapter9.aspx" title="Chapter 9 (ASP.NET)"  
   description="Chapter 9 (ASP.NET)" />

在该节点下方添加以下代码：

<siteMapNode url="Chapter9b.aspx" title="Chapter 9B (ASP.NET)"  
   description="Chapter 9B (ASP.NET)" />

保存更改后，在浏览器中预览Chapter9b.aspx页面，新页面将显示在站点导航控件中。

2. 使用广告轮播控件（AdRotator）

广告轮播控件（AdRotator）使用XML文件中的信息在ASP.NET页面上显示广告横幅。以下是插入ASP.NET广告轮播控件并修改其XML信息文件的步骤：
1. 双击文件夹列表面板中的default.master文件，在设计面板中点击页面左侧的一个W3C验证图像，点击快速标签选择器上 <p#w3cvalidity> 标签的下拉箭头，然后点击“选择标签内容”。
2. 在工具箱面板中，展开ASP.NET控件，再展开“标准”组，双击“广告轮播器”，将该控件插入到段落标签内容所在的位置。
3. 点击广告轮播器的“任务”按钮，在“广告轮播器任务”弹出窗口的“选择数据源”框中，点击“新建数据源”，在“数据源配置向导”中点击“XML文件”，然后点击“确定”，在“配置数据源”对话框中，点击“浏览”，选择站点/files文件夹中的banners.xml文件，然后点击“打开”。
4. 在“配置数据源”对话框中点击“确定”，点击工具栏上的“保存”，保存对主页面所做的更改，点击文件夹列表面板中的Chapter9.aspx文件，然后点击常用工具栏上的“预览”。
5. 在浏览器中滚动到广告轮播器的显示位置，多次刷新浏览器，会发现每次页面加载时横幅图像都会改变。
6. 关闭浏览器并返回Expression Web，双击文件夹列表面板中站点/files文件夹内的Banners.xml文件将其打开。
7. 在关闭的 </Advertisements> 标签之前插入以下代码：

<Ad> 
   <ImageUrl>~/images/studio-banner.jpg</ImageUrl> 
   <NavigateUrl>http://www.microsoft.com/expression/products/overview.aspx?key=studio</NavigateUrl> 
   <AlternateText>Visit Microsoft’s Expression Studio Site</AlternateText> 
   <Height>300</Height> 
   <Width>150</Width> 
   <Keywords> 
   </Keywords> 
   <Impressions> 
   </Impressions> 
</Ad>

点击常用工具栏上的“保存”，点击文件夹列表面板中的Chapter9.aspx文件，然后点击常用工具栏上的“预览”，多次刷新浏览器，确保最终能看到Expression Studio图像。
关闭浏览器窗口并返回Expression Web，从“窗口”菜单中点击“关闭所有页面”。

3. 链接数据源并使用数据控件

ASP.NET可以与多种数据库和文件类型配合使用，如Microsoft Access数据库、Microsoft SQL Server数据库、XML文件、Microsoft Excel文件，甚至Oracle、IBM DB2和MySQL数据库。以下是使用GridView和ListView控件显示Access数据库信息的步骤：

3.1 使用GridView控件

双击文件夹列表面板中的Chapter9.aspx文件进行编辑，在设计面板中点击ContentPlaceHolder1，然后点击其右上角的“内容任务”按钮，在“内容任务”弹出窗口中点击“创建自定义内容”。
输入“Contact Our People”，在设计面板中选中该文本，点击常用工具栏上“样式”下拉列表中的“标题1
”，将光标置于标题末尾并按Enter键创建新段落。
在工具箱面板的ASP.NET控件组中，展开“数据”部分，双击“GridView”以插入ASP.NET GridView控件。
点击GridView控件右上角的“GridView任务”按钮，在“GridView任务”弹出窗口的“选择数据源”框中，点击“新建数据源”，在“数据源配置向导”中点击“Access数据库”。
在向导中点击“确定”，在“配置数据源”对话框中点击“浏览”，选择站点/files文件夹中的ContactList.mdb文件，然后点击“打开”。
点击“下一步”，在“名称”字段中确保下拉列表设置为“employees”，在“列”下选择“FirstName”、“LastName”、“E-mail Address”、“Business Phone”和“Job Title”复选框。
再次点击“下一步”，在“测试查询”页面点击“测试查询”以确保连接到数据库。
点击“完成”关闭“配置数据源向导”。
点击常用工具栏上的“保存”，然后点击“预览”按钮在浏览器中查看页面及其GridView控件。
关闭浏览器窗口，返回Expression Web中的Chapter9.aspx文件，检查插入的GridView控件。点击GridView控件右上角的“GridView任务”按钮，在“GridView任务”弹出窗口中点击“编辑列”以打开“字段”对话框。
在“选定字段”列表中，点击“Business_Phone”，在“BoundField属性”的“标题文本”字段中，将“Business_Phone”替换为“Phone”，重复此过程，将“Job_Title”替换为“Title”，“FirstName”替换为“First Name”，“LastName”替换为“Last Name”，“column1”替换为“E-mail”。
在“字段”对话框中点击“确定”，在“GridView任务”弹出窗口中选择“启用分页”和“启用排序”复选框。
仍选中GridView控件，在“标签属性”面板的“布局”组中，在“宽度”字段中输入“700px”。
点击“保存”，然后点击常用工具栏上的“预览”以预览工作成果。

3.2 使用ListView控件

关闭浏览器并返回Expression Web，双击文件夹列表面板中的Chapter9b.aspx文件进行编辑。
在设计面板中点击ContentPlaceHolder1，点击其右上角的“常用任务”按钮，然后点击“创建自定义内容”。
输入“Our Staff”，在设计面板中选中该文本，点击常用工具栏上“样式”下拉列表中的“标题1
”，将光标置于标题末尾并按Enter键创建新段落。
在工具箱面板的ASP.NET控件的“数据”组中，双击“ListView”以插入ASP.NET ListView控件。
点击设计面板中的红色警告（asp:listview）链接，在确认警报中点击“是”，然后点击常用工具栏上的“保存”。若此时ListView控件没有可视化表示，按键盘上的F5刷新工作区中的页面。
点击“ListView任务”按钮，在“ListView任务”弹出窗口的“选择数据源”下拉列表中点击“新建数据源”，在“数据源配置向导”中点击“Access数据库”，然后点击“确定”，浏览到SampleSite的/files文件夹中的ContactList.mdb数据库并双击它。
在“选择数据库”对话框中点击“下一步”，在“配置选择语句”对话框中选择“FirstName”、“LastName”、“Job Title”和“Notes”复选框。
点击“下一步”，然后点击“完成”。
在“ListView任务”弹出窗口中点击“配置ListView”，在“选择布局”标签下，点击“项目符号列表”，选择“启用分页”复选框，并确保其下方字段为“Next/Previous Pager”。
点击“确定”关闭“配置ListView”对话框，点击“保存”，然后点击常用工具栏上的“预览”以测试新的ListView控件。
关闭浏览器窗口，返回Expression Web，点击ListView控件上的“ListView任务”按钮，在“ListView任务”弹出窗口中将“当前视图”更改为“ItemTemplate”。
点击设计面板中的ListView控件，将焦点集中在代码面板中的代码上。编辑 <AlternatingItemTemplate> 节点，将其代码从：

<AlternatingItemTemplate> 
      <li style="">FirstName: 
      <asp:Label id="FirstNameLabel" runat="server"  
        Text='<%# Eval("FirstName") %>' /> 
      <br /> 
      LastName: 
      <asp:Label id="LastNameLabel" runat="server"  
        Text='<%# Eval("LastName") %>' /> 
      <br /> 
      Job_Title: 
      <asp:Label id="Job_TitleLabel" runat="server"  
        Text='<%# Eval("Job_Title") %>' /> 
      <br /> 
      Notes: 
      <asp:Label id="NotesLabel" runat="server"  
        Text='<%# Eval("Notes") %>' /> 
      <br /> 
      </li>
    </AlternatingItemTemplate>

修改为：

<AlternatingItemTemplate> 
      <li style=""> 
      <asp:Label id="FirstNameLabel" runat="server"  
         Text='<%# Eval("FirstName") %>' />  
      <asp:Label id="LastNameLabel" runat="server"  
        Text='<%# Eval("LastName") %>' /> 
      <br /> 
      <asp:Label id="Job_TitleLabel" runat="server"  
        Text='<%# Eval("Job_Title") %>' /> 
      <br /> 
      <asp:Label id="NotesLabel" runat="server"  
        Text='<%# Eval("Notes") %>' /> 
      </li> 
    </AlternatingItemTemplate>

在代码面板中滚动到 <ItemTemplate> 节点，进行与 <AlternatingItemTemplate> 节点相同的修改，将其代码从：

<ItemTemplate> 
      <li style="">FirstName: 
        <asp:Label id="FirstNameLabel" runat="server"  
          Text='<%# Eval("FirstName") %>' /> 
        <br /> 
        LastName: 
        <asp:Label id="LastNameLabel" runat="server"  
          Text='<%# Eval("LastName") %>' /> 
        <br /> 
        Job_Title: 
        <asp:Label id="Job_TitleLabel" runat="server"  
          Text='<%# Eval("Job_Title") %>' /> 
        <br /> 
        Notes: 
        <asp:Label id="NotesLabel" runat="server" Text='<%# Eval("Notes") %>' /> 
        <br /> 
      </li> 
    </ItemTemplate>

修改为：

<ItemTemplate> 
  <li style=""> 
    <asp:Label id="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />  
    <asp:Label id="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /> 
    <br /> 
    <asp:Label id="Job_TitleLabel" runat="server" Text='<%# Eval("Job_Title") %>' /> 
    <br /> 
    <asp:Label id="NotesLabel" runat="server" Text='<%# Eval("Notes") %>' /> 
   </li> 
</ItemTemplate>

点击“保存”，然后点击常用工具栏上的“预览”在浏览器中检查修改结果。

通过以上步骤，我们可以看到利用ASP.NET的这些控件，结合简单的XML文件和少量的操作，就能实现功能强大且易于定制的网站导航、广告展示和数据显示功能，大大提高了开发效率。

探索ASP.NET控件：导航、广告轮播与数据展示

4. 总结与拓展

在前面的内容中，我们详细介绍了如何使用ASP.NET的多种控件来实现网站的导航、广告展示和数据显示功能。下面对这些内容进行一个简单的总结，并探讨一些拓展应用。

4.1 内容总结

网站导航控件 ：菜单（Menu）、站点地图路径（SiteMapPath）和树视图（TreeView）这三种导航控件都依赖于Web.sitemap文件来获取导航信息。通过一系列操作，我们可以将原本的导航链接替换为ASP.NET菜单控件，并根据需要对其进行样式和功能的调整。
广告轮播控件（AdRotator） ：该控件通过读取XML文件中的信息，在ASP.NET页面上动态显示广告横幅。我们可以轻松地向XML文件中添加新的广告信息，实现广告的动态更新。
数据控件 ：GridView和ListView控件可以方便地与Access数据库进行连接，显示数据库中的数据。通过配置数据源和对控件属性的调整，我们可以实现数据的分页、排序等功能。

4.2 拓展应用

导航控件的拓展 ：除了上述的基本操作，我们还可以根据实际需求对导航控件进行更复杂的定制。例如，通过修改Web.sitemap文件的结构，实现多级菜单的嵌套显示；利用Tag Properties面板中的更多属性，对菜单的样式进行个性化设置，使其与网站的整体风格更加协调。
广告轮播控件的拓展 ：虽然AdRotator控件通常用于显示广告横幅，但它的应用场景并不局限于此。我们可以利用该控件来展示网站的重要通知、活动信息等，吸引用户的注意力。同时，通过对XML文件的优化，可以实现广告的按权重显示、定时切换等功能。
数据控件的拓展 ：除了Access数据库，ASP.NET还支持与其他多种数据库和文件类型进行连接。在实际应用中，我们可以根据项目的需求选择合适的数据源，并对GridView和ListView控件进行相应的配置。此外，还可以结合其他ASP.NET控件，如DataPager、SortExpression等，进一步增强数据显示的功能。

5. 操作流程回顾与对比

为了方便大家更好地理解和掌握这些操作，下面将对前面介绍的三种控件的操作流程进行回顾，并通过表格的形式进行对比。

控件类型	操作步骤
网站导航控件（菜单）	1. 打开相关文件 2. 选择导航区域并创建自定义内容 3. 删除原导航链接 4. 插入菜单控件 5. 创建并配置Web.sitemap文件 6. 设置菜单控件属性 7. 预览并调整
广告轮播控件（AdRotator）	1. 打开主页面文件 2. 插入AdRotator控件 3. 配置数据源（XML文件） 4. 预览并检查广告显示效果 5. 向XML文件中添加新广告信息 6. 再次预览确认
数据控件（GridView和ListView）	GridView ： 1. 打开文件并创建自定义内容 2. 插入GridView控件 3. 配置数据源（Access数据库） 4. 选择要显示的列 5. 测试查询并完成配置 6. 编辑列标题和设置分页、排序属性 7. 预览并调整 ListView ： 1. 打开文件并创建自定义内容 2. 插入ListView控件 3. 配置数据源（Access数据库） 4. 选择要显示的列 5. 配置ListView布局和分页属性 6. 编辑模板代码 7. 预览并检查修改结果

通过这个表格，我们可以更清晰地看到不同控件的操作流程的异同，便于在实际应用中进行参考和对比。

6. 流程图展示

下面是使用mermaid语法绘制的网站导航控件（菜单）的操作流程图：

graph TD;
    A[打开相关文件] --> B[选择导航区域并创建自定义内容];
    B --> C[删除原导航链接];
    C --> D[插入菜单控件];
    D --> E[创建并配置Web.sitemap文件];
    E --> F[设置菜单控件属性];
    F --> G[预览并调整];

这个流程图直观地展示了网站导航控件（菜单）的操作步骤，从打开文件开始，经过一系列的操作，最终实现菜单控件的插入和配置，并进行预览和调整。

通过以上的总结、拓展和流程展示，我们对ASP.NET的导航、广告轮播和数据控件有了更深入的理解和掌握。在实际的网站开发中，我们可以根据具体的需求，灵活运用这些控件，实现功能丰富、用户体验良好的网站。