[原创]VS2003中ASP.NET实现自定义用户导航控件

转载请注明出处。
继续我的ASP.NET的系列。
看到很多网站都有导航的功能，可以轻松实现用户的导航，方便用户查看和查找不同的网页。于是我就准备为我的网站设计一个导航控件，然后每个网页都放入这个自定义的控件，这样就实现了导航了。

首先，创建一个自定义控件，在vs2003中的项目中添加自定义控件步骤：右键点击需添加的项目名称->
添加->添加WEB用户控件，然后取个名字就ok了。自定义用户控件的后缀名是ascx。

接下来就是编辑这个控件了，其实它和普通的aspx页面没有多大的区别，你可以像编辑aspx一样编辑ascx，它也支持控件的拖放。这里要实现导航的功能，我参考了Starter Kit里面的例子，我用datalist控件
实现不同菜单的选项。当然也有其它的方法，例如超链接按钮，table等。不过方法都是类似的，所以我只用datalist来做了。

首先，在ascx中添加一个panel，把你要用的控件放入这个panel中。panel可以设置一个你喜欢的背景图片。然后添加datalist，右键选择编辑项模板，在ItemTemplate中放入超链接控件，绑定超链接的文本或者图片和要连接的URL，绑定的数据源稍后设置。绑定后，超链接就可以显示你的数据源中的内容并跳转到相应的页面了，至于你要显示哪些导航菜单，以及点击后如何跳转，这些就取决于你的数据源了。

关键就是数据源的设计和绑定了。于是我设计了tabitem类，里面有name，path和image三个属性，分别存储了超链接的文本，跳转url和图片数据。
public class TabItem
 {
 private string _name;
 private string _path;
 private string _image;

public TabItem(string newName,string newPath)
{
_name = newName;
_path = newPath;
 _image = "";
}

public TabItem(string newName,string newPath,string newImage)
 {
 _name = newName;
 _path = newPath;
 _image = newImage;
}
 public string Name
 {
 get
{
 return _name;
}
set
{
 _name = value;
 }
}
 public string Path
{
get
{
 return _path;
}
set
 {
 _path = value;
}
}
 public string Image
 {
get
 {
return _image;
}
set
{
 _image = value;
}
}
}
然后，在ascx文件中先引用这个类，在声明一个数据源接口：ArrayList tabItems = new ArrayList();

以下添加超链接的显示文字和链接地址，并绑定到datalist控件
tabItems.Add(new TabItem("主页","defaultbody.aspx","image/01.jpg"));
tabItems.Add(new TabItem("查询","Search/Welcome.aspx","image/02.jpg"));
 tabItems.Add(new TabItem("分部管理","DepManage/Welcome.aspx","image/03.jpg"));
tabItems.Add(new TabItem("总部管理","HQManage/Welcome.aspx","image/04.jpg"));

GuideHeaderDataList.DataSource = tabItems;
GuideHeaderDataList.DataBind();
接下来的超链接绑定表达式就是：
DataBinder.Eval(Container.DataItem, "Image");
DataBinder.Eval(Container.DataItem, "Name");
DataBinder.Eval(Container.DataItem, "Path");

至此就大功告成了。在需要的网页中直接把控件拖到页面中就可以用了。
效果图：（我还加了其它功能，不过主要的是导航，所以其它的就不介绍了）