创建动态页眉、页脚、侧边菜单

• 下载源文件 - 76.5 Kb

引言

创建网站页眉和页脚的方法有很多。大多数时候，有一种为页眉和页脚创建静态菜单的方式。当反复查看相同的菜单时，用户或至少是客户会感到厌烦。为什么不给客户一个可以让他玩得开心，并且可以按他自己的方式进行更改的菜单呢？

几乎有无数种方法可以创建动态菜单并在我们的表示层上显示它。 JavaScript、DHTML、XML 和许多其他脚本都帮助我们为页眉和页脚创建菜单。作为一个 ASP 人员，我尝试使用 ASP.NET (C#) 和 XML 创建一个易于理解且方便的菜单。 我在网上找到了一个页眉/页脚示例，它允许您将菜单添加到您的页面，而无需添加任何 ASCX 控件。这启发我创建了这个示例应用程序，可以在没有 ASCX 的情况下完成这项工作。

使用代码

将文件解压缩到名为HeaderFooter的文件夹中。使用您的 IIS 创建一个名为HeaderFooter的虚拟目录。 在您的浏览器中，使用以下地址打开页面：https:///HeaderFooter/index.aspx。 您将找到三个负责此美观菜单工作的类文件。

ClsCreateHeader.cs

public System.Web.UI.WebControls.DataList dlheader;
//name of the xml file. The file is called from the web.config

private string xmlfile;
//SetMenu function is all you will have to call from your

//aspx page. Parameter passed is the type of menu you want to display

//header, footer, leftbar, rightbar – these are the data table names in

//the xml file (xmenu.xml)

//SetMenu("Header")

public DataList SetMenu(string menu)
{                                   
   //creates and binds the data from the xml file

   ListProperties(menu);
   return dlheader;
}           
//There are some default properties set for the datalist.

//You can alter the properties on the calling page itself

//ListProperties("Header")

public void ListProperties(string menu)
{
   dlheader = new System.Web.UI.WebControls.DataList();
   //DatalistLinkColumn() class inherits the ITemplate interface 

   //This class is used to build the Hyperlink column to be inserted 

   //in the ItemTemplate of datalist 

   dlheader.ItemTemplate = new DatalistLinkColumn();
   //DatalistSeparateColumn() class inherits the ITemplate interface

   //This class is used to build the Hyperlink column to be inserted 

   //in the SeparatorTemplate of datalist

   dlheader.SeparatorTemplate = new DatalistSeparateColumn();
   //Properties of datalist. Can be altered from the page

   dlheader.RepeatDirection=RepeatDirection.Vertical;
   dlheader.RepeatColumns=20;
   dlheader.DataSource = GetMenu(menu);
   dlheader.DataBind();
}

//GetMenu creates a view for datasource to datalist.

//GetMenu("Header")

public DataView GetMenu(string xmltable)
{
   DataSet dsMenu = new DataSet(); 
   dsMenu.ReadXml
    (System.Web.HttpContext.Current.Server.MapPath(GetConfigSettings()));
   DataView dvfilterheader = new DataView(dsMenu.Tables[xmltable]);
   dvfilterheader.RowFilter="bview=true";
   dvfilterheader.Sort = "vworder ASC";
   return dvfilterheader;
}

//GetConfigSettings() 

//gets the value (name) of the XML file added to web.config

<configuration>
    <appSettings>
    <add key="xmlfile" value="XMenu.xml"></add>
    </appSettings>
</configuration>

private string GetConfigSettings()
{
   NameValueCollection config =
      (NameValueCollection)ConfigurationSettings.GetConfig("appSettings");
   xmlfile = config["xmlfile"];
   return xmlfile;
}

DatalistLinkColumn.cs

//The InstantiateIn method of ITemplate creates a hyperlink and 

//bounds its properties using DataBinding method of the hyperlink

//InstantiateIn("dlheader" //datalist)

public void InstantiateIn(Control container)
{
 HyperLink hlheader = new HyperLink();
 hlheader.DataBinding += new EventHandler(this.BindLinkColumn);
 container.Controls.Add(hlheader);
}

public void BindLinkColumn(object sender, EventArgs e)
{
 HyperLink hl = (HyperLink)sender;
 DataListItem container = (DataListItem)hl.NamingContainer ;
 //This is how we can set the text value of the hyperlink column 

 //in the datalist's ItemTemplate.

 //Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 

                                                            "vwtext"));
 String strVals = 
   Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                            "vwtext"));
 hl.Text = strVals;
 if(Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                       "vwas"))=="txt")
 hl.Text = 
   Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                            "vwtext"));
 if(Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                        "vwas"))=="img")
 hl.ImageUrl = 
   Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                            "vwimage")); 
 if(Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                  "vwoverimage")) != "")
 {
   hl.Attributes[ "onMouseOver" ] = "this.firstChild.src = '" 
     + Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                  "vwoverimage")) + "'";
   hl.Attributes[ "onMouseOut" ] = "this.firstChild.src = '"
    + Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                      "vwimage")) + "'";
 }
 hl.NavigateUrl = 
     Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                                 "url"));
 hl.ToolTip = 
     Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                             "tooltip"));
 hl.CssClass = 
     Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                               "class"));
 hl.Target = 
     Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                              "target"));
}

DatalistSeparateColumn.cs

//The InstantiateIn method of ITemplate 

//creates a hyperlink and bounds 

//its properties using DataBinding method of the hyperlink

//InstantiateIn("dlheader" //datalist) 

public void InstantiateIn(Control container)
{
 HyperLink hlseparate = new HyperLink();
 hlseparate.DataBinding += new EventHandler(this.BindSeparateColumn);
 container.Controls.Add(hlseparate);
}
 
public void BindSeparateColumn(object sender, EventArgs e)
{
 HyperLink hl = (HyperLink)sender;
 DataListItem container = (DataListItem)hl.NamingContainer ; 
 SeparatorText = "";
 hl.Text = SeparatorText;
 //Below commented code can be used to get 

 //image or text for the separator 

 //if(Convert.ToString(DataBinder.Eval

 //(((DataListItem)container).DataItem, "vwas"))=="txt") 

 //hl.Text = Convert.ToString(DataBinder.Eval

 //(((DataListItem)container).DataItem, "vwtext")); 

 //if(Convert.ToString(DataBinder.Eval

 //(((DataListItem)container).DataItem, "vwas"))=="img") 

 // hl.ImageUrl = Convert.ToString(DataBinder.Eval

 //(((DataListItem)container).DataItem, "vwimage")); 

}

以上两个类都使用ITemplate接口在Datalist的ItemTemplate和SeparateItemTemplate中创建控件。当使用在.aspx文件中声明了内联模板的控件时，ITemplate 定义了使用子控件实现填充 ASP.NET 服务器控件的方法。

index.aspx.cs

这里您需要一个占位符来显示您的菜单

//Taking an instance of ClsCreateHeader 

private ClsCreateHeader clsch = new ClsCreateHeader(); 
private void Page_Load(object sender, System.EventArgs e)
{ 
 //Creating the menu using the datalist. 

 //You don’t need to take a new datalist to show the menu. 

 //I will show two different ways to add 

 //the menu to place holder.

 //1. You can directly call the function 

 //   clsch.SetMenu(“Header”) 

 //in the place holder as:

 phheader.Controls.Clear(); 
 phheader.Controls.Add(clsch.SetMenu("Header"));
 //2. You can create a new DataList and set 

 //   different properties as you like 

 //and add the DataList to the place holder as: 

 DataList dlmenu = new DataList(); 
 dlmenu = clsch.SetMenu("Header"); 
 dlmenu.BackColor=Color.Goldenrod;
 dlmenu.RepeatColumns=10; 
 phheader.Controls.Add(dlmenu);
}

在示例index.aspx文件中，显示了四个不同的菜单

• 页眉 – 您会找到指向不同页面的简单直接的链接。这里要注意的一件事是在同一个菜单中使用文本链接和图像链接。
• 左侧栏 – 菜单设置为弹出不同的网站（没有被滥用……只是在推广它们）。
• 右侧栏 – 显示各种 JavaScript 函数的用法。
• 页脚 – 将 Web 控件加载到索引文件中。

Xmenu.xml

<Menu> 
<Header 
id="1" –a simple id for numbering the items
vwtext="HOME" –text to be displayed.
vworder="1" –view order default set to ascending. Can be altered
bview="true" –want to view or hide this item?
vwimage="images/hello.jpg" –alternative for text (good hmm)
vwoverimage ="images/mouseover.jpg" –this will be your mouseover image 
target="_self" –must be set. _self, _blank, _top
url="index.aspx" –url for the link
vwas="txt" –can be “txt” or “img” 
(though vwtext and vwimage values are inserted, 
this will set how to view the link)
class="A" //cssheader.css file class
tooltip="HOME PAGE" –tool tip to be viewed with link
></Header>
</Menu>

Web.Config

这很重要，因为您也可以添加您自己的 XML 文件（不更改XMenu.xml中的属性）。

<appSettings>
< add key ="xmlfile" value ="XMenu.xml"></ add> 
</appSettings>

关注点

一个小但很好的图像交换用法。 检查页脚超链接并在DatalistLinkColumn.cs中找到代码。我很少在网上找到关于此的文章。我承认我使用了一个帮助论坛来完成这个特定的任务。

hl.Attributes[ "onMouseOver" ] = "this.firstChild.src = 
   '" + Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                        "vwoverimage")) + "'"; 
hl.Attributes[ "onMouseOut" ] = "this.firstChild.src = 
   '" + Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, 
                                                            "vwimage")) + "'";

但我仍然不知道使用 this.firstChild.src 的方法以及它的工作原理。这里要注意一个重要点。 对于图像控件，使用 this.src 将会很好地工作，而超链接则并非如此。