使用 XML 数据源的导航菜单
4.13/5 (9投票s)
使用 XML 作为数据源的导航菜单：ASP.NET 服务器控件
引言
在我的 Web 设计生涯中，我一直需要具有动态内容且易于编辑和自定义的导航菜单。上个月，我决定编写一个简单的菜单控件，该控件使用 CSS 进行样式设置，并使用 XML 作为菜单项的来源。
导航菜单服务器控件
<?xml version="1.0" encoding="utf-8" ?>
<menuitems>
<item id="1" url="Default.aspx" linkname="Main Page"
description="Main Page of web siter"/>
<item id="2" url="Default2.aspx"
linkname="Company" description="Company Details"/>
<item id="3" url="Default3.aspx"
linkname="Photos" description="Photo Gallery"/>
<item id="4" url="Default4.aspx"
linkname="Contact" description="Contact Form"/>
</menuitems>
这是菜单项和链接的 XML 模板。
在 Visual Studio 菜单中，按照以下树形结构操作：文件 - 新建 - 项目 - Web - ASP.NET 服务器控件，并创建一个新的服务器控件项目。默认情况下，会安装 ServerControl1.cs。右键单击项目，并添加一个名为 xmlreader.cs 的新类。在这个类中，首先我们定义一个代表菜单项的对象。为了简单起见，我们称之为 menuitem。
using System.Linq;
using System.Xml;
using System.Xml.Linq;
using System.Text;
using System.Collections;
public class menuitem
{
public menuitem() { }
private string id; //id of item
private string url; // url for menu link
private string linkname; //name of the link that will be displayed
private string description; // description displayed when mouse hover
public string Id { get { return id; } set { id = value; } }
public string Url { get { return url; } set { url = value; } }
public string Linkname { get { return linkname; } set { linkname = value; } }
public string Description { get { return description; }
set { description = value; } }
}
定义 menuitem 后，我们将创建一个名为 getMenu 的 arraylist 类实例到 xmlreader 类中。在 getMenu 方法中，我们使用 XLINQ 读取 XML。此方法接受两个参数
路径xmlFilename
public ArrayList getMenu(string xmlPath, string xmlFileName)
{
//array List to get menu items from xml
ArrayList menuitems = new ArrayList();
try
{
XElement xmenu = XElement.Load(xmlPath + xmlFileName);
if (xmenu != null)
{
//get data from xml for menu items using XLINQ
var xc = from c in xmenu.Elements("item")
orderby c.Attribute("id").Value
select new
{
ID = c.Attribute("id"),
URL = c.Attribute("url"),
LINKNAME = c.Attribute("linkname"),
DESCRIPTION = c.Attribute("description")
};
foreach (var l in xc)
{
menuitem itm = new menuitem();
//item id
itm.Id = l.ID.Value;
//menu item url
itm.Url = l.URL.Value;
//menu item name
itm.Linkname = l.LINKNAME.Value;
//menu description
itm.Description = l.DESCRIPTION.Value;
menuitems.Add(itm);
}
}
}
catch (Exception ex)
{
throw ex;
}
//return menu items
return menuitems;
}
在上述方法中，我们创建了一个 arraylist。现在我们必须创建我们的 HTML 代码。为此，我们转到 ServerControl1.cs 类。
menuHtmlGenerator 方法是获取 arraylist 中的项目，使用 xmlreader 中的 getMenu 构建，并创建 HTML 页面的标记代码的方法。
protected string menuHtmlGenerator(ArrayList aList)
{
StringBuilder s = new StringBuilder();
//looping through Arraylist collection of Links.
for (int i = 0; i < aList.Count; i++)
{
s.Append(System.Environment.NewLine);
s.Append("<li >");
s.Append("<a href ='" + ((menuitem)aList[i]).Url + "' ");
s.Append("title='" + ((menuitem)aList[i]).Description + "' ");
//if menu will show different class for currently selected item
if (useDiffCssForCrrntItem)
{
if (((menuitem)aList[i]).Id == currentItemId)
s.Append("class='" + currentItemClass + "' ");
}
s.Append(">");
s.Append("<span>" + ((menuitem)aList[i]).Linkname + "</span> ");
s.Append("</a>");
s.Append("</li>");
s.Append(System.Environment.NewLine);
}
//Return Full HTML Code As String
return s.ToString();
}
}
生成 HTML 代码后，我们使用从 WebControl 派生的方法。在该方法中，我们首先声明菜单的属性。它们将用作设计时属性来定制控件。
public class ServerControl1 : WebControl
{
#region 7 properties for design-time attritubes
private string xmlPath; // xml file path
private string xmlFileName; // xmlfile name
private string menuClass; // CSS class to ship the menu
private string menuId; // main div id that will surround menu
// will menu show selected link differently?
private bool useDiffCssForCrrntItem = false;
private string currentItemClass; //currently selected item's class
private string currentItemId; //id that will determine which item is selected
#endregion
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
#region 4 Member properties Used as Design-Time Attributes for
Our Server Control
public string XmlPath { get { return xmlPath; } set { xmlPath = value; } }
public string XmlFileName { get { return xmlFileName; }
set { xmlFileName = value; } }
public string MenuClass { get { return menuClass; }
set { menuClass = value; } }
public string MenuId { get { return menuId; }
set { menuId = value; } }
public bool UseDiffCssForCrrntItem { get { return useDiffCssForCrrntItem; }
set { useDiffCssForCrrntItem = value; } }
public string CurrentItemClass { get { return currentItemClass; }
set { currentItemClass = value; } }
public string CurrentItemId { get { return currentItemId; }
set { currentItemId = value; } }
#endregion
//render method. THIS IS MAIN METHOD WHERE ALL THE HTML CODE IS GENERATED AND
//PASSED TO HTML PAGE
protected override void RenderContents(HtmlTextWriter output)
{
try
{
// make instance from Data Class
xmlreader myData = new xmlreader();
//Write menu div
output.Write("<div class='" + menuClass +
"' id='" + menuId + "'>");
//Open Ul Tag
output.Write("<ul>");
//write the Links Tag which is returned by GetNew(connectionStr) Method
//menuHtmlGenerator method is explained below
output.Write(menuHtmlGenerator(myData.getMenu(xmlPath, xmlFileName)));
//ul Close Tag
output.Write("</ul>");
//div Close Tags
output.Write("</d i v></div>");
}
catch (Exception ex)
{
output.Write(ex);
}
}
在 Visual Studio 中构建项目后，右键单击工具箱的标题，然后单击“选择项”，并从 bin 文件夹中选择 DLL 文件。
之后，将新项目拖放到页面上。设置属性。准备示例项目中的 XML 文件。
关注点
此菜单控件是您可以使用服务器控件所能做的事情的一个示例。它们功能强大且速度快。
历史
- 2008 年 8 月 8 日：初始版本