李太壽,盧昭彬

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

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

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

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

1.1 準備測試數(shù)據(jù)庫

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

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

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

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

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

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

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

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

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

⑵ 在當前項目中將默認的Web窗體Default.aspx更改為Navigation.aspx。

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

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

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

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

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

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

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

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

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

（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ù)操作方法用于對

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

{ SqlConnection sqlconn=new SqlConnection（connstr）；

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

try

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

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

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ù)適配器對象實例化

dataset.Clear（）；

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

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é)點從數(shù)據(jù)表中獲取信息的方法

public DataTable getdatabyparentid（string fp）

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

{ DataBase db=new DataBase（）； //實例類DataBase的對象

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

//查詢字符串

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

}

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

public void ptreeviewnode（TreeNode m， string nid）

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

{ DataTable dt=getdatabyparentid（nid）；

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

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

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

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

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

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

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

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

}

}

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

public void bandroot（TreeView TreeView1）

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

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

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

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

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

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

//為mynode實例化具體的結(jié)點值

TreeView1.Nodes.Add（mynode）；

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

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

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

}

}

3 實現(xiàn)方案

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

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

bandclass bd1=new bandclass（）； //實例化類的對象

if （！Page.IsPostBack）

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

⑶ 運行Navigation.aspx頁面，運行效果如圖3所示。

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

4 結(jié)束語

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

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

參考文獻：

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

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

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