asp.net2.0用户控件的应用:导航条

导航条
对于常用的内容或者控件，可以将它们设计成为用户控件，然后便可以在多个网页中重复使用该用户控件，从而省却许多重复性的工作。例如，网页的横幅，对于某个网站来说，几乎所有网页都有相同的网页横幅，可以将横幅设计成用户控件，然后添加到所有需要的网页中即可。所以，只要设计了一次横幅，却可以无限次使用。下面将向读者介绍如何利用用户控件来实现导航条控件。实例运行结果如图1所示。

图1  导航条用户控件
本实例主要是通过在Web用户控件menu.ascx上添加HyperLink控件实现的。对于HyperLink控件的主要属性及其用法请读者参看13.5.6节。
（1）在Web用户控件menu.ascx上，再添加9个HyperLink控件，用于显示导航的相关信息。
（2）单击每个HyperLink控件，将链接到的URL地址赋给相应的HyperLink属性NavigateUrl。程序主要代码如下所示：
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="～/index.aspx" >主页
/asp:HyperLink></td>
完整程序代码如下：
★★★★menu.ascx用户控件设计文件完整程序代码网站源代码★★★★★
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="menu.ascx.cs" Inherits="WebUserControl" %>
<table style="width: 801px; height: 18px; font-size: 10pt; color: #000099; margin-top: 0px; padding-top: 0px;" class="css" border="0" cellspacing="0">
<tr>
<td align="right" colspan="10" style="background-image: url(image/1.gif); height: 28px">
&nbsp;
&nbsp;&nbsp;
<asp:Label ID="Label1" runat="server" Text="Label" Width="200px" ForeColor="White"></asp:Label>&nbsp;</td>
</tr>
<tr>
<td align="right" colspan="10" style="background-image: url(image/2.gif); color: #ffff66;
height: 7px" class="txt">
输入关键字： &nbsp;
<asp:TextBox ID="TextBox1" runat="server" Width="240px" Height="17px"></asp:TextBox>&nbsp;
<asp:DropDownList ID="DropDownList1" runat="server" Width="78px" CssClass="txt" Height="3px">
<asp:ListItem>时政要闻</asp:ListItem>
<asp:ListItem>环境保护</asp:ListItem>
<asp:ListItem>招商信息</asp:ListItem>
<asp:ListItem>科学教育</asp:ListItem>
<asp:ListItem>法治频道</asp:ListItem>
<asp:ListItem>社会现象</asp:ListItem>
<asp:ListItem>股市信息</asp:ListItem>
<asp:ListItem>时尚娱乐</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="cmdSearch" runat="server" Text="站内搜索" OnClick="cmdSearch_Click" Height="20px" />
&nbsp; &nbsp; &nbsp;</td>
</tr>
<tr>
<td align="center" rowspan="1" style="background-image: url(image/301.gif); width: 151px;">
</td>
<td align="center" style="background-image: url(image/302.gif); width: 72px;">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/newsList.aspx?id=News" Font-Underline="False" ForeColor="#333333">主页</asp:HyperLink></td>
<td align="center" style="background-image: url(image/302.gif); width: 72px;">
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/newsList.aspx?id=News" Font-Underline="False" ForeColor="#333333">新闻</asp:HyperLink></td>
<td align="center" style="background-image: url(image/302.gif); width: 72px;">
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/newsList.aspx?id=Water" Font-Underline="False" ForeColor="#333333">环境</asp:HyperLink></td>
<td align="center" style="background-image: url(image/302.gif); width: 72px;">
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/newsList.aspx?id=Monery" Font-Underline="False" ForeColor="#333333">招商</asp:HyperLink></td>