ExtAspNet应用技巧（五） - 动态创建工具栏菜单

文章截图 - 更好的排版

问题描述
shguo 网友在一封邮件中提到，希望能够动态创建工具栏菜单。

我理解的大致步骤如下：
1. 提供一个 menu.xml 文件：

<?xml version="1.0" encoding="utf-8" ?>
<menu>
<menuItem text="首页" navigateurl="default.aspx" />
<menuItem text="新闻" >
<menuItem text="国内新闻" navigateurl="News.aspx?type=guonei" />
<menuItem text="国际新闻" navigateurl="News.aspx?type=guoji" >
<menuItem text="亚洲新闻" navigateurl="News.aspx?type=yazhou" />
<menuItem text="欧洲新闻"  navigateurl="News.aspx?type=ouzhou" />
</menuItem>
</menuItem>
</menu>

2. 页面上放置一个Panel和一个Toolbar控件：

<ext:PageManager ID="PageManager1" runat="server" />
<ext:Panel ShowBorder="false" ShowHeader="false" runat="server">
<ext:Toolbar runat="server">
</ext:Toolbar>
</ext:Panel>

3. 生成这样的页面：



以页面声明的方式实现
这种方式比较简单，需要注意的有一点：一个工具栏项 - 首页 - 希望点击能够转到一个链接地址。
但是如果使用 ext:HyperLink 控件的话，页面显示效果不好。所以我们还是使用 ext:Button，但是通过这样的方式来达到链接的目的：

EnablePostBack="false" OnClientClick="window.open('default.aspx', '_blank');"

全部源代码：

<ext:Panel ShowBorder="false" ShowHeader="false" runat="server">
<ext:Toolbar runat="server">
<ext:Button EnablePostBack="false" OnClientClick="window.open('default.aspx', '_blank');"
Text="首页" runat="server">
</ext:Button>
<ext:Button EnablePostBack="false" Text="新闻" runat="server">
<Menu>
<ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="news.aspx?guonei"
Text="国内新闻">
</ext:MenuHyperLink>
<ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="news.aspx?guoji" Text="国际新闻">
<Menu>
<ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="news.aspx?yazhou"
Text="亚洲新闻">
</ext:MenuHyperLink>
<ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="news.aspx?ouzhou"
Text="欧洲新闻">
</ext:MenuHyperLink>
</Menu>
</ext:MenuHyperLink>
</Menu>
</ext:Button>
</ext:Toolbar>
</ext:Panel>

以编程的方式实现
1. 首先加载XML配置文件到XmlDocument：

private XmlDocument LoadXml()
{
// 加载XML配置文件
string xmlPath = Server.MapPath("~/other/menu.xml");
string xmlContent = String.Empty;
using (StreamReader sr = new StreamReader(xmlPath))
{
xmlContent = sr.ReadToEnd();
}
XmlDocument doc = new XmlDocument();
doc.LoadXml(xmlContent);
return doc;
}

2. 生成Toolbar的工具栏按钮

XmlDocument doc = LoadXml();
// 根节点的子节点们
XmlNodeList nodes = doc.DocumentElement.ChildNodes;
foreach (XmlNode node in nodes)
{
ExtAspNet.Button btn = new Button();
btn.Text = node.Attributes["text"].Value;
btn.EnablePostBack = false;
Toolbar1.Items.Add(btn);
// 如果此节点没有子节点
if (node.ChildNodes.Count == 0)
{
XmlAttribute attrURL = node.Attributes["navigateurl"];
if (attrURL != null)
{
btn.OnClientClick = String.Format("window.open('{0}','_blank')", attrURL.Value);
}
}
else
{
// 递归添加所有的菜单
ResolveMenu(btn, node.ChildNodes);
}
}

3. 最后是递归添加所有的菜单

private void ResolveMenu(IMenu btn, XmlNodeList nodes)
{
foreach (XmlNode node in nodes)
{
XmlAttribute attrURL = node.Attributes["navigateurl"];
if (attrURL != null)
{
ExtAspNet.MenuHyperLink lnk = new ExtAspNet.MenuHyperLink();
lnk.Text = node.Attributes["text"].Value;
lnk.NavigateUrl = attrURL.Value;
lnk.Target = "_blank";
btn.Menu.Items.Add(lnk);
if (node.ChildNodes.Count > 0)
{
ResolveMenu(lnk, node.ChildNodes);
}
}
}
}

注意：ResolveMenu的第一个参数是一个接口 IMenu，可以接受所有具有Menu属性的类实例。
这是使用接口是为了兼容Toolbar的工具按钮和MenuHyperLink。

请到http://extaspnet.codeplex.com/SourceControl/ListDownloadableCommits.aspx下载最新源代码，此示例在other\menu_dynamic_run.aspx。

更深一步，为工具栏按钮添加后台事件处理函数

protected void Page_Load(object sender, EventArgs e)
{
LoadToolbar();
ExtAspNet.Button btn = new Button();
btn.Text = "获取工具栏按钮个数";
btn.Click += new EventHandler(btn_Click);
Toolbar1.Items.Add(btn);
}
private void btn_Click(object sender, EventArgs e)
{
Alert.Show("工具栏按钮个数：" + Toolbar1.Items.Count);
}