基于原子構(gòu)件的導(dǎo)航欄設(shè)計(jì)

李太壽,盧昭彬

摘 要： 導(dǎo)航欄是Web應(yīng)用程序中一個(gè)最基本的功能，通過單擊導(dǎo)航欄中的菜單項(xiàng)可以鏈接至不同的功能操作頁面。為了實(shí)現(xiàn)動(dòng)態(tài)顯示導(dǎo)航數(shù)據(jù)的功能，設(shè)計(jì)了導(dǎo)航欄構(gòu)件。該構(gòu)件是通過類代碼來實(shí)現(xiàn)，設(shè)計(jì)的基本思路是：將導(dǎo)航數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫中，從數(shù)據(jù)庫中讀取數(shù)據(jù)綁定至導(dǎo)航控件；也可向數(shù)據(jù)庫添加導(dǎo)航數(shù)據(jù)，這樣可以方便地在網(wǎng)站設(shè)計(jì)中使用導(dǎo)航欄原子構(gòu)件。

關(guān)鍵詞： 原子構(gòu)件； 導(dǎo)航欄； 類代碼； 數(shù)據(jù)綁定

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2013）06-78-03

The Navigation Design Based on Atomic Component

Li Taishou， Lu Zhaobin

（Warehousing Center，Guangdong Shaoguan Baosteel Group SISG Co.， ltd， Shaoguan， Guangdong， 512126）

Abstract： The navigation bar is the most basic function of Web applications. By clicking on the menu items in the navigation bar， the operation pages for different functions can be linked. The functions of its component are just designed in order to display dynamically the navigation data. With class codes， this component can be implemented. The basic idea of its design is that the navigation data are stored in the database， from which the data will be read and bound to the navigation control. As well， by adding navigation data to the database， the navigation bar can be used conveniently when designing Webs.

Key words： atomic components； navigation bar； class code； data binding

0 引言

導(dǎo)航，顧名思義就是在站點(diǎn)中起到引導(dǎo)作用的一項(xiàng)功能，通過設(shè)置符合站點(diǎn)運(yùn)營(yíng)需要的內(nèi)容導(dǎo)航、操作導(dǎo)航等，可以讓會(huì)員迅速地找到和發(fā)布自已感興趣的內(nèi)容，增加站點(diǎn)的頁面瀏覽量和瀏覽深度[1]。導(dǎo)航欄是Web應(yīng)用程序中一個(gè)最基本的功能，通過單擊導(dǎo)航欄中的菜單項(xiàng)可以鏈接至不同的操作頁面。本文所介紹的導(dǎo)航欄構(gòu)件就是為了實(shí)現(xiàn)動(dòng)態(tài)顯示導(dǎo)航數(shù)據(jù)而設(shè)計(jì)的。本構(gòu)件是通過類代碼來實(shí)現(xiàn)，設(shè)計(jì)的基本思路是：將導(dǎo)航數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫中，從數(shù)據(jù)庫中讀取數(shù)據(jù)綁定至導(dǎo)航控件，也可向數(shù)據(jù)庫添加導(dǎo)航數(shù)據(jù)，這樣可以方便地在網(wǎng)站設(shè)計(jì)中使用導(dǎo)航欄[2]。

1 原子構(gòu)件的開發(fā)設(shè)計(jì)

1.1 準(zhǔn)備測(cè)試數(shù)據(jù)庫

為了說明導(dǎo)航欄構(gòu)件的使用，程序至少需要一個(gè)測(cè)試數(shù)據(jù)庫。要求該數(shù)據(jù)庫至少有一個(gè)用于存放導(dǎo)航信息的數(shù)據(jù)表。下面首先創(chuàng)建一個(gè)測(cè)試數(shù)據(jù)庫，創(chuàng)建測(cè)試數(shù)據(jù)庫的步驟是：

⑴ 在Sql2005中新建一個(gè)名稱為T_LinkData.mdf的數(shù)據(jù)庫；

⑵ 在數(shù)據(jù)庫T_LinkData.mdf中創(chuàng)建一個(gè)名為“T_nav”數(shù)據(jù)表；

⑶ 在數(shù)據(jù)表T_nav中，創(chuàng)建幾個(gè)字段：id（編號(hào)）、fname（名稱）、fparent（父結(jié)點(diǎn)編號(hào)）等，數(shù)據(jù)庫表T_nav的結(jié)構(gòu)如圖1所示。

圖1 數(shù)據(jù)表T_nav結(jié)構(gòu)圖

⑷ 為了便于測(cè)試，我們事先添加11條記錄，如圖2所示。

圖2 在數(shù)據(jù)表T_nav添加11條測(cè)試記錄

1.2 設(shè)計(jì)導(dǎo)航欄原子構(gòu)件

⑴ 啟動(dòng)VS2005（或者VS2008），新建一個(gè)網(wǎng)站，名稱為“導(dǎo)航、友情鏈接構(gòu)件”，系統(tǒng)進(jìn)入網(wǎng)站設(shè)計(jì)界面。

⑵ 在當(dāng)前項(xiàng)目中將默認(rèn)的Web窗體Default.aspx更改為Navigation.aspx。

⑶ 選擇“解決方案資源管理器”中的“App_Data”，右擊，在出現(xiàn)的快捷菜單中選擇“添加現(xiàn)有項(xiàng)”，將上一步驟中準(zhǔn)備的數(shù)據(jù)庫添加到當(dāng)前項(xiàng)目的“App_Data”目錄下。

⑷ 選擇“解決方案資源管理器”中的項(xiàng)目文件夾名稱，右擊，在出現(xiàn)的快捷菜單中選擇“添加新項(xiàng)”（或者在“網(wǎng)站”菜單中選擇“添加新項(xiàng)”），在出現(xiàn)的模板窗口中選擇“類”，在名稱中輸入“DataBase”，新建一個(gè)“DataBase”類。

⑸ 單擊“添加”命令，出現(xiàn)一個(gè)提示窗口，選擇“是”，系統(tǒng)自動(dòng)在當(dāng)前項(xiàng)目中新建一個(gè)名稱為“App_Code”的文件夾，并且將新建的類存放在“App_Code”文件夾中。

⑹ 進(jìn)入類代碼視圖，在代碼視圖的最前面，輸入代碼“using System.Data.SqlClient；”，導(dǎo)入命名空間，此命名空間主要與數(shù)據(jù)庫操作有關(guān)。

⑺ 在DataBase類中增加數(shù)據(jù)成員：dataConnection（建立連接對(duì)象），dataAdapter（數(shù)據(jù)適配器對(duì)象），dataset（數(shù)據(jù)集對(duì)象），connstr（數(shù)據(jù)庫連接字符串）。

⑻ 在DataBase類中添加方法GetDataFromDB（），該方法的功能為公共查詢，對(duì)傳遞過來的查詢字符串進(jìn)行查詢，如果查詢成功，則返回符合查詢條件的記錄構(gòu)成的數(shù)據(jù)表，否則返回空。

⑼ 在DataBase類中添加方法UpdateDB（），功能用于對(duì)數(shù)據(jù)進(jìn)行添加、修改和刪除操作。

（10） 在項(xiàng)目中新建一個(gè)“bandclass”類，方法同上。在該類中添加方法getdatabyparentid（），功能是依據(jù)父結(jié)點(diǎn)從數(shù)據(jù)表中獲取信息。

（11） 在bandclass類中添加方法ptreeviewnode（），功能在TreeView控件中遍歷指定結(jié)點(diǎn)的所有子結(jié)點(diǎn)。

（12） 在bandclass類中添加方法bandroot（），功能為將數(shù)據(jù)綁定到TreeView控件。

（13） 在bandclass類中添加方法SetData（），功能為向數(shù)據(jù)庫添加導(dǎo)航數(shù)據(jù)。

2 關(guān)鍵技術(shù)

⑴ 公共數(shù)據(jù)操作方法

public bool UpdateDB（string sqlstr） //公共數(shù)據(jù)操作方法用于對(duì)

數(shù)據(jù)進(jìn)行添加、修改和刪除操作

{ SqlConnection sqlconn=new SqlConnection（connstr）；

//建立數(shù)據(jù)庫連接對(duì)象

try

{ SqlCommand cmdTable=new SqlCommand（sqlstr， sqlconn）；

//實(shí)例執(zhí)行SQL語句的對(duì)象

cmdTable.CommandType=CommandType.Text；

//指定如何解釋命令字符串

sqlconn.Open（）； //打開連接

cmdTable.ExecuteNonQuery（）； //執(zhí)行SQL語句

return true；

}

catch （Exception ex）

{ sqlconn.Close（）；

return false；

}

}

⑵ 公共查詢方法

public DataTable GetDataFromDB（string sqlStr）//公共查詢方法

{ try

{ dataConnection.ConnectionString=connstr；

//設(shè)置用于打開數(shù)據(jù)庫的字符串

dataAdapter=new SqlDataAdapter（sqlStr， dataConnection）；

//將成員數(shù)據(jù)適配器對(duì)象實(shí)例化

dataset.Clear（）；

dataAdapter.Fill（dataset）； //填充數(shù)據(jù)集對(duì)象

dataConnection.Close（）； //關(guān)閉數(shù)據(jù)的連接

}

catch （Exception ex）

dataConnection.Close（）；

if （dataset.Tables[0].Rows.Count！=0） //如果記錄不為空，則返回符合條件記錄構(gòu)成的數(shù)據(jù)表

return dataset.Tables [0]；

else return null；

}

⑶ 依據(jù)父結(jié)點(diǎn)從數(shù)據(jù)表中獲取信息的方法

public DataTable getdatabyparentid（string fp）

//依據(jù)父結(jié)點(diǎn)從數(shù)據(jù)表中獲取信息

{ DataBase db=new DataBase（）； //實(shí)例類DataBase的對(duì)象

string sqlstr="select*from T_nav where fparent="+fp；

//查詢字符串

return db.GetDataFromDB （sqlstr ）；//調(diào)用類DataBase的方法

}

⑷ 在TreeView控件中遍歷指定結(jié)點(diǎn)的所有子結(jié)點(diǎn)的方法

public void ptreeviewnode（TreeNode m， string nid）

//遍歷指定結(jié)點(diǎn)的所有子結(jié)點(diǎn)（TreeView控件）

{ DataTable dt=getdatabyparentid（nid）；

//依據(jù)nid從數(shù)據(jù)表中獲取信息

TreeNode mn1=new TreeNode（）； //創(chuàng)建結(jié)點(diǎn)mn1

for （int i=0； dt！=null && i

{ mn1=new TreeNode（dt.Rows[i]["fname"].ToString（））；

//為mn1賦予具體的結(jié)點(diǎn)值

m.ChildNodes.Add（mn1）； //mn1作為m的子結(jié)點(diǎn)

ptreeviewnode（mn1， dt.Rows[i]["id"].ToString（））；

//遍歷mn1的所有子結(jié)點(diǎn)

}

}

⑸ 將數(shù)據(jù)綁定到TreeView控件的方法

public void bandroot（TreeView TreeView1）

//綁定根結(jié)點(diǎn)（TreeView控件）

{ DataTable dt=getdatabyparentid（"0"）； //根結(jié)點(diǎn)的父結(jié)點(diǎn)為0

TreeNode mynode=new TreeNode（）； //創(chuàng)建一個(gè)結(jié)點(diǎn)mynode

for （int i=0； dt！=null && i

//遍歷所有根結(jié)點(diǎn)

{ mynode=new TreeNode（dt.Rows[i]["fname"].ToString（））；

//為mynode實(shí)例化具體的結(jié)點(diǎn)值

TreeView1.Nodes.Add（mynode）；

//將結(jié)點(diǎn)mynode添加到TreeView控件中

ptreeviewnode（mynode， dt.Rows[i]["id"].ToString（））；

//遍歷mynode的所有子結(jié)點(diǎn)

}

}

3 實(shí)現(xiàn)方案

⑴ 進(jìn)入Navigation.aspx的設(shè)計(jì)頁面，從工具箱拖放一個(gè)TreeView控件至Web窗體。

⑵ 在事件處理代碼頁面，在Page_Load事件中添加代碼如下：

bandclass bd1=new bandclass（）； //實(shí)例化類的對(duì)象

if （！Page.IsPostBack）

bd1.bandroot（TreeView1）； //調(diào)用方法完成導(dǎo)航的設(shè)計(jì)

⑶ 運(yùn)行Navigation.aspx頁面，運(yùn)行效果如圖3所示。

⑷ 如果將方法綁定Menu控件完成導(dǎo)航欄設(shè)計(jì)，必須在類bandclass中重載方法ptreeviewnode（）和bandroot（），代碼略。具體導(dǎo)航欄設(shè)計(jì)由讀者自己完成。

4 結(jié)束語

此構(gòu)件是通過類代碼來實(shí)現(xiàn)，將導(dǎo)航欄數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫中，從數(shù)據(jù)庫中讀取數(shù)據(jù)綁定至TreeView控件中，可以方便地在網(wǎng)站中設(shè)計(jì)導(dǎo)航欄。在以后設(shè)計(jì)導(dǎo)航欄時(shí)就可引用此原子構(gòu)件，不需再另行設(shè)計(jì)界面和代碼，它就象一塊積木一樣應(yīng)用在所設(shè)計(jì)的網(wǎng)頁中。我們已經(jīng)在很多網(wǎng)頁設(shè)計(jì)中使用了此構(gòu)件，效果非常好，制作導(dǎo)航欄方便快捷。當(dāng)然讀者也可以對(duì)此構(gòu)件進(jìn)行修改，使它更適合個(gè)性需要。

圖3 導(dǎo)航欄界面

參考文獻(xiàn)：

[1] 許賓，胡勇輝，凌志勇.ASP.NET2.0（C#）應(yīng)用開發(fā)技術(shù)與典型實(shí)例[M].

清華大學(xué)出版社，2008.

[2] 耿肇英等.C#應(yīng)用程序設(shè)計(jì)教程[M].人民郵電出版社，2008.