一、效果簡介
當點擊一級欄目時（如金喜正規買球），被點擊的一級欄目的單元格背景色發生變色，如果該一級欄目下有二級欄目，則會在下一行顯示出來，否則二級欄目這一行不會顯示任何東西，但會占一定的高度。當點擊二級欄目時，其所屬的一級欄目單元格背景色發生變化，同時被點擊的二級欄目名稱會加粗，并在前方加一個“。”號，表示現在正在訪問該欄目。當前位置會隨著欄目的變化而變化。為了讓該控件更靈活，我用了xml，這樣就可以和數據庫脫離開來，目前該用戶控件只能適應一個頁面一個鏈接這種類型的網站，如果有“article.aspx?id=”這種形式的鏈接，則該控件不可用。
二、思路分析
用 Request.Url.AbsolutePath.ToString() 可以獲得當前訪問的地址，比如當前訪問地址為：//localhost/temp/default.aspx，該方法即可獲得 temp/default.aspx 這一段,然后用LastIndexOf(@"/") 方法把訪問的文件名截出來，這里就是指 default.aspx 這部份。有了訪問文件，就可以查出這個文件對應的那條記錄，根據該記錄判斷它是一級欄目還是二級欄目，即可知道當前點擊的是一級欄目還是二級欄目。然后顯示相應的一級欄目和二級欄目即可實現上圖的效果。下面來具體分析實現代碼。
三、實現過程
1.xml文件代碼
<?xml version="1.0" encoding="gb2312" ?>
<siteMap>
<siteMapNode LinkUrl="default.aspx" Title="金喜正規買球" Parents="root" OrderID="1" />
<siteMapNode LinkUrl="soft.aspx" Title="軟件應用" Parents="root" OrderID="2" />
<siteMapNode LinkUrl="hardsoft.aspx" Title="硬件相關" Parents="root" OrderID="5" />
<siteMapNode LinkUrl="system.aspx" Title="操作系統" Parents="root" OrderID="9" />
<siteMapNode LinkUrl="duomeiti.aspx" Title="多媒體類" Parents="root" OrderID="10" />
<siteMapNode LinkUrl="qq.aspx" Title="QQ專區" Parents="root" OrderID="11" />
<siteMapNode LinkUrl="security.aspx" Title="網絡安全" Parents="root" OrderID="12" />
<siteMapNode LinkUrl="other.aspx" Title="其它分類" Parents="root" OrderID="13" />
<siteMapNode LinkUrl="soft.aspx" Title="軟件技巧" Parents="軟件應用" OrderID="3" />
<siteMapNode LinkUrl="softuse.aspx" Title="軟件使用" Parents="軟件應用" OrderID="4"></siteMapNode>
<siteMapNode LinkUrl="hardsoft1.aspx" Title="硬件保養" Parents="硬件相關" OrderID="6"></siteMapNode>
<siteMapNode LinkUrl="hardsoft2.aspx" Title="硬件維護" Parents="硬件相關" OrderID="7"></siteMapNode>
<siteMapNode LinkUrl="hardsoft_other.aspx" Title="硬件其它" Parents="硬件相關" OrderID="8"></siteMapNode>
</siteMap>
Title 指的是欄目名稱，LinkUrl 指的是鏈接地址，Parents 指的是上級欄目，OrderID 指排序 ID。具體用法請看壓縮包內的使用說明。
2.添加用戶自定義控件及后臺代碼
通過“新建->項目->Visual C#項目->Asp.net Web 應用程序”新建一個項目命令為 HeadControl，新建用戶自定義控件，命名為 Head.ascx。向 Head.ascx 頁面加入兩個 label 控件，上面的命名為 lblCode，用來顯示后臺生成的一級欄目和二級欄目的代碼。下面的命名為 lblPosition，用來顯示當前位置這一部份。如果沒有在 CSS 中定義頁面的上下左右距離，則需要手動設置 Head.ascx頁面四邊的距離，要保證控件寬度在 Head.ascx 里為100%。也就是說，這個用戶控件不能有固定寬度，否則就不能適應各種寬度網頁的需要。
接下來要在 Head.ascx.cs 中編碼，由于源碼較長，這里我就拿關鍵部份進行解釋。
先在成員中創建一個 DataSet 對象,代碼中好多地方要用到這個 DataSet。
//創建 DataSet 對象
private DataSet ds = new DataSet();
然后定義讀取 xml 中的數據的方法，該方法傳入 xml 文件的相對路徑，查詢的條件以及排列方式，返回 DataView。
public DataView ReadXmlDataView(string strXmlPath,string strWhere,string strSort)
{
DataSet ds = new DataSet();
//讀入xml 的架構
ds.ReadXmlSchema(Server.MapPath(strXmlPath));
//將 OrderID 列轉成整型(原本為字符串，影響排序)，如果你排序不用 OrderID，請將這里的 OrderID 改成別的名稱，同時 xml 文件里的 OrderID 也要改名
ds.Tables[0].Columns["OrderID"].DataType = System.Type.GetType("System.Int32");
//讀取 xml 文件
ds.ReadXml(Server.MapPath(strXmlPath));
DataView dv = new DataView();
//指定 DataView 的 Table 為 DataSet 的 Table
dv.Table = ds.Tables[0];
//指定 DataView 中的數據的排序方式
dv.Sort = strSort;
//指定 DataView 過濾數據條件，也就是進行篩選
dv.RowFilter = strWhere;
//返回 DataView
return dv;
; }
現在已經可以讀出欄目數據了，接下來要寫五個方法來顯示欄目，分別為：
方法1：顯示所有一級欄目
該方法是點擊“金喜正規買球”時或者是第一次打開網頁的時候調用的，實現的效果為加粗“金喜正規買球”兩字，并改變“金喜正規買球”所在的單元格的背景。該方法命名為：showFirstMenu()，代碼如下：
public void showFirstMenu()
{
//讀取所有 Parents為root 的記錄(也就是所有一級欄目)，升序排列，下同
DataView dv = ReadXmlDataView("HeadMenu.xml","Parents = root","OrderID asc");
//保存從 xml 中讀取出來的欄目的鏈接地址
string strLinkUrl;
//保存讀出來的欄目名稱
; string strTitle;
//判斷是否有一級欄目
if(dv.Count > 0)
; {
//先清空 label 的內容，防止上次生成的內容遺留下來
lblCode.Text = "";
; //生成一級欄目表格-------------------------------
lblCode.Text = "<table width=100% border=0 align=center cellpadding=0 cellspacing=0 class=Cn12Black>";
lblCode.Text += "<tr><td width=100% height=3 class=bgGray></td></tr>";
lblCode.Text += "<tr><td class=bgGray>";
lblCode.Text += "<table height=30 border=0 cellpadding=3 cellspacing=0>";
lblCode.Text += "<tr>";
//循環讀出一級欄目
; for(int i=0; i < dv.Count; i++)
{
strLinkUrl = dv[i]["LinkUrl"].ToString().Trim();
strTitle = dv[i]["Title"].ToString().Trim();
; //如果是金喜正規買球，加粗及改變其單元格背景色，如果你的金喜正規買球不是 default.aspx，則修改為你的金喜正規買球,xml 中也要修改
; if(strLinkUrl.Equals("default.aspx"))
{
lblCode.Text += "<td class=Cn12Gray>|<;/td>";
//改變金喜正規買球單元格背景的顏色，該顏色用 css中bgGray1 定義。
lblCode.Text += "<td class=bgGray1>";
//金喜正規買球指定的鏈接
; lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
; //加粗金喜正規買球兩個字
lblCode.Text += "<strong>" + strTitle + "</strong>";
lblCode.Text += "</a>";
lblCode.Text += "</td>";
}
; ; else
{
lblCode.Text += "<td class=Cn12Gray>|</td>";
; lblCode.Text += "<td>";
lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
; lblCode.Text += strTitle;
lblCode.Text += "</a>";
lblCode.Text += "</td>";
}
}
; lblCode.Text += "</tr></table>";
//顯示二級欄目
lblCode.Text += "</td></tr>";
//一級欄目 html 代碼到這里結束--------------------------
; //顯示二級欄目，由于訪問金喜正規買球時二級欄目為空，所以此行高度調小，并且無內容顯示
lblCode.Text += "<tr><td height=10 class=bgGray1>";
; lblCode.Text += "</td></tr>";
; lblCode.Text += "</table>";
;
//顯示當前位置為金喜正規買球
lblPosition.Text = "";
lblPosition.Text += "<table width=100% border=0 cellspacing=0 cellpadding=6><tr><td class=Cn12BlackStrong>";
//如果在“當前位置”前不想要圖片，把<img src=images/icon_alert.gif width=16 height=16 align=absbottom>去掉就行了
lblPosition.Text += "<img src=images/icon_alert.gif width=16 height=16 align=absbottom>當前位置:<a href=default.aspx>金喜正規買球</a>";
lblPosition.Text += "</td></tr></table>";
}
方法2：重新顯示一級欄目
該方法是點擊除了“金喜正規買球”這一鏈接以外的一級欄目時調用的，實現的效果為重新顯示一級欄目，加粗當前點擊的一級欄目名稱，并改變其單元格背景顏色。同時顯示屬于該一級欄目的二級欄目。方法命名為：showFirstMenuByFile(strNowViewFile)，傳入的參數為當前瀏覽的文件名稱。代碼如下：
public void showFirstMenuByFile(string strNowViewFile)
{
//讀取所有 Parents 為 root 的記錄
DataView dv = ReadXmlDataView("HeadMenu.xml","Parents = root","OrderID asc");
//保存欄目的鏈接地址
string strLinkUrl;
//保存欄目名稱
string strTitle;
if(dv.Count > 0)
; {
lblCode.Text = "";
//生成表格
lblCode.Text = "<table width=100% border=0 align=center cellpadding=0 cellspacing=0 class=Cn12Black>";
lblCode.Text += "<tr><td width=100% height=3 class=bgGray></td></tr>";
lblCode.Text += "<tr><td class=bgGray>";
; lblCode.Text += "<table height=30 border=0 cellpadding=3 cellspacing=0>";
lblCode.Text += "<tr>";
for(int i=0; i < dv.Count; i++)
{
strLinkUrl = dv[i]["LinkUrl"].ToString().Trim();
strTitle = dv[i]["Title"].ToString().Trim();
//如果讀出來的欄目名稱為當前訪問的一級欄目的名稱，加粗并改變其單元格背景色
if(strLinkUrl.Equals(strNowViewFile))
; {
lblCode.Text += "<td class=Cn12Gray>|</td>";
lblCode.Text += "<td class=bgGray1>";
; lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
lblCode.Text += "<strong>" + strTitle + "</strong>";
lblCode.Text += "</a>";
lblCode.Text += "</td>";
; ; //改變當前位置-------------------------------------
lblPosition.Text = "";
lblPosition.Text += "<table width=100% border=0 cellspacing=0 cellpadding=6><tr><td class=Cn12BlackStrong>";
lblPosition.Text += "<img src=images/icon_alert.gif width=16 height=16 align=absbottom>當前位置:<a href=default.aspx>金喜正規買球</a>";
lblPosition.Text += " >> <a href=" + strLinkUrl + ">" + strTitle + ";</a>";
lblPosition.Text += "</td></tr></table>";
}
; else
{
; lblCode.Text += "<td class=Cn12Gray>|</td>";
; lblCode.Text += "<td>";
; lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
lblCode.Text += strTitle;
lblCode.Text += "</a>";
lblCode.Text += "</td>";
}
}
lblCode.Text += "</tr></table>";
//一級欄目 html 代碼到這里結束
lblCode.Text += "</td></tr>";
; }
; }
方法3：顯示屬于當前訪問的一級欄目的二級欄目
該方法只顯示一級欄目下的二級欄目，并不需要實現加粗和改變單元格背景這效果。該方法命名為：showSecondMenu(strNowViewFile)。代碼如下：
public void showSecondMenu(string strNowViewFile)
; {
//根據傳入的當前該問的文件查找當前訪問的欄目名稱
DataView dvNowMenu = ReadXmlDataView("HeadMenu.xml","LinkUrl = " + strNowViewFile + "","OrderID asc");
//當前訪問的欄目名稱
string strTitle = dvNowMenu[0]["Title"].ToString();
; //讀取所有屬于該欄目的二級欄
DataView dvSecond = ReadXmlDataView("HeadMenu.xml","Parents = " + strTitle + "","OrderID asc");
if(dvSecond.Count > 0)
{
; //輸出二級欄目
lblCode.Text += "<tr>";
lblCode.Text += "<td height=30 class=bgGray1>";
for(int i=0; i < dvSecond.Count; i++)
; {
//如果讀出來的那條記錄的鏈接地址是當前訪問的文件，加粗當前訪問的欄目名稱并在前面加上·符號
if(dvSecond[i]["LinkUrl"].ToString().Trim().Equals(strNowViewFile))
{
lblCode.Text += "&nbsp; ·<a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">";
lblCode.Text += "<strong>" + dvSecond[i]["Title"].ToString().Trim() + "</strong>";
lblCode.Text += "</a>";
; ;
//改變當前位置值，重新顯示一級欄目的方法已經顯示了當前的一級欄目位置，這里加上當前所在的二級欄目的位置
lblPosition.Text += " >> <a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">" + strTitle + "</a>";
//到這里當前位置的表格顯示已完成，剛好和重新顯示一級欄目方法里的當前位置的表格代碼接起來
lblPosition.Text += "</span></td></tr></table>";;
}
else
{
lblCode.Text += " <a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">";
lblCode.Text += dvSecond[i]["Title"].ToString().Trim();
lblCode.Text += "</a>";
}
; }
lblCode.Text += "</td>";
lblCode.Text += "</tr>";
lblCode.Text += "</table>";
; }
}
方法4：訪問二級欄目的時候重新顯示一級欄目
該方法是訪問二級欄目時調用的，訪問二級欄目的時候，其父級欄目需要加粗并改變單元格背景。該方法命令為：showFirstMenuBySecondFile(strNowViewFile)。由于該方法與 showFirstMenuByFile()方法大同小異，這里就不詳細介紹了。具體可以查看源代碼。
方法5：訪問二級欄目的時候顯示二級欄目
該方法是訪問二級欄目的時候調用的，用來顯示所有二級欄目，加粗當前訪問的二級欄目，并改變當前位置，方法命名為：showSecondMenuByGrade(strNowViewFile)。該方法與 showSecondMenu()方法也是大同小異，所以也不詳細介紹了。
接下來只要在 Page_Load 事件中通過顯示或隱藏一級欄目和二級欄目就能達到圖上的效果。Page_Load 事件的代碼如下：
private void Page_Load(object sender, System.EventArgs e)
{
// 在此處放置用戶代碼以初始化頁面
if(!Page.IsPostBack)
{
//先根據地址欄的地址獲取訪問的文件，如：default.aspx
//獲得url的相對路徑
string strRequestUrl = Request.Url.AbsolutePath.ToString().Trim();
//獲得當前訪問的文件名
string strNowViewFile = strRequestUrl.Substring((strRequestUrl.LastIndexOf(@"/") + 1)).Trim();
; //根據取得的訪問文件查找其對應的記錄，以判斷當前訪問一級欄目還是二級欄目
//讀取當前訪問文件名對應的那條信息
DataView dv = ReadXmlDataView("HeadMenu.xml","LinkUrl = " + strNowViewFile + "","OrderID asc");
//當前訪問欄目的上級欄目名稱
string strParent = dv[0]["Parents"].ToString().Trim();
;
//如果訪問的是金喜正規買球
if(strNowViewFile.Equals("default.aspx") || strNowViewFile == null)
{
//顯示所有一級欄目
; showFirstMenu();
}
//如果訪問的是一級欄目，并且不是金喜正規買球
else if(strParent.Equals("root"))
{ ;
//重新顯示一級欄目 ;
showFirstMenuByFile(strNowViewFile);
//讀取所有屬于該一級欄目的二級欄目
showSecondMenu(strNowViewFile); ;
}
//否則當前訪問的就是二級欄目
else
{
; //顯示一級欄目，同時加粗二級欄目所屬的一級欄目，并改變該一級欄目的單元格背景
showFirstMenuBySecondFile(strNowViewFile);
//顯示二級欄目，加粗并在當前訪問的二級欄目名稱前加。符號
; showSecondMenuByGrade(strNowViewFile);
}
}
}
以上就是頂部導航自定義控件的核心部份了，看完了后是不是覺得很簡單？由于寫的時候是為了應付項目的需要，因此匆匆忙忙就完工了，大家如果發現什么BUG，或是有什么好的意見可以聯系我。控件的具體用法請看壓縮包內的說明。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：網絡轉載
金喜正規買球 
110次
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線