要实现这种树菜单的风格,在asp.net中应怎么编写

zhouxujian 2003-09-08 08:01:41

观看效果:

http://www.39du.net/work/aspmyadmin/Outlook.asp

...全文

35 28 打赏收藏转发到动态举报

写回复

用AI写文章

28 条回复

切换为时间正序

请发表友善的回复…

发表回复

jpyc 2003-09-10

打赏
举报

zxggwan123(需求制造者) 提供的树是无级的，我的论坛里有一棵，我只用了两层：

http://218.56.11.178:8009/

yuanylong 2003-09-10

打赏
举报

http://expert.csdn.net/Expert/topic/2093/2093882.xml?temp=.1967737

neekerss 2003-09-09

打赏
举报

lt.DataBinding += new EventHandler(TemplateControl_DataBinding);
这一句怎么变成vb的代码呀，谢谢！！

zxggwan123 2003-09-09

打赏
举报

谁作出来打个招呼好么？？

zxggwan123 2003-09-09

打赏
举报

本文介绍了如何在ASP.NET中利用嵌套DataList服务器控件的动态数据绑定技术创建一个模仿OutlookBar的滚动分层菜单。

--------------------------------------------------------------------------------

引言：

Outlook左边的那个一点就能上下分开的控制菜单真的是很酷，不仅节约了桌面空间，而且还非常方便和美观，即时通讯工具QQ的主界面也采用了这种分层菜单。

在WEB上也已经有人做出来了这种分层菜单效果，不过是用javascript或vbscript等浏览器端脚本写的，程序非常麻烦难写，也还不能方便的在服务器端动态的改变菜单的内容。

这里介绍一种非常简单的方法，其基本原理就是利用Asp.Net的服务器端控件DataList的选择功能，在生成的选择项模版中再嵌入一个动态生成的DataList，形成一个点击就打开下层的子级菜单效果。

--------------------------------------------------------------------------------

制作方法：

我选择了Sql Server中附带的一个数据库范例Northwind中的数据来作为程序的数据源，它其中有两个表，一个为Categoris（主表）另一个为Products（从表），其中Products的CategoryId字段为外键。它们分别要成为我们将要做的分层菜单中的父级和子级数据。

首先，在Visual Studio .Net中新建一个Web Application，从工具栏中拖上一个DataList控件，设置好大小颜色等属性，切换到HTML文本编辑状态，在DataList的ItemTemplate模版中添加一个LinkButton控件，将该控件的Text属性绑定为CategoryName字段，CommandName属性设置为"select",代码如下：

sp:LinkButton id="Linkbutton" Text='' CommandName="select" runat="server" />

切换回设计状态后应该能看到下图所示：

然后切换到代码页，添加一个实现ITemplate接口模版类：

public class ItemTemp : ITemplate
{
public void InstantiateIn(System.Web.UI.Control container)
{
Literal lt = new Literal();
lt.DataBinding += new EventHandler(TemplateControl_DataBinding);
container.Controls.Add(lt);
}
private void TemplateControl_DataBinding(object sender, System.EventArgs e)
{
Literal lt;
lt = (Literal)sender;
DataListItem container = (DataListItem) lt.NamingContainer;
lt.Text += DataBinder.Eval(container.DataItem, "ProductName");
}
}

然后在类中添加一个数据连接：

SqlConnection conn = new SqlConnection("data source=localhost;initial catalog=Northwind;user id=;password=");

再分别响应DataList控件的ItemCommand和ItemCreated事件：

private void DataList1_ItemCommand(object source, System.Web.UI.WebControls.DataListCommandEventArgs e)
{
DataList1.SelectedIndex = e.Item.ItemIndex;
bind();
}

private void DataList1_ItemCreated(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.SelectedItem)
{
DataList dl = new DataList();
dl.ItemTemplate = new ItemTemp();
dl.Width = new Unit("100%");
if(DataBinder.Eval(e.Item.DataItem, "CategoryId") != null)
{
string id = DataBinder.Eval(e.Item.DataItem, "CategoryId").ToString();
DataSet ds = LoadData("select * from Products where CategoryId = " + id);
dl.DataSource = ds;
dl.DataBind();
e.Item.Controls.Clear();
e.Item.Controls.Add (dl);
}
}
}

这里是上面用到的bind和LoadData方法的代码：

private void bind()
{
DataList1.DataSource = LoadData("select * from categories");
DataList1.DataBind();
}
private DataSet LoadData(string cmdtext)
{
SqlCommand cmd = new SqlCommand(cmdtext, conn);
SqlDataAdapter adapter = new SqlDataAdapter();
adapter.SelectCommand = cmd;
DataSet ds = new DataSet();
adapter.Fill(ds);
return ds;
}

最后在PageLoad中加上目录数据绑定代码：

private void Page_Load(object sender, System.EventArgs e)

{

bind();

}

上面的代码实在是太简单了，不加上说明也基本上都能看懂。

编译程序，运行后可以看见如下图示：

--------------------------------------------------------------------------------

总结：

这样就完了？是的，是不是觉得这么简单的几行代码能生成这种效果简直有点不可思议？可事实上确实是完成了，Asp.Net的控件非常的灵活，怎么去应用只受限于你的想象，慢慢的挖掘，便能发明出一些非常有创意的应用。

这个方法最大的优点就是简单，其次还能非常方便的应用上主/从表的结构，动态的生成菜单的父级和子级（因为DataList可以进行DataBind，哈哈，真是搭来的一个优点），缺点是每次选择的时候都要PostBack一下，会造成性能的损失（不过也正是由于这一点才能最及时的反映出数据库的变化，真是鱼和熊掌不可得兼呀），这个缺点可以通过采用框架网页结构或者是应用在Intranet上来一定程度的缓解。

zxggwan123 2003-09-09