基于原子構件的導航欄設計

李太壽,盧昭彬

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

關鍵詞： 原子構件； 導航欄； 類代碼； 數(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 引言

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

1 原子構件的開發(fā)設計

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

為了說明導航欄構件的使用，程序至少需要一個測試數(shù)據(jù)庫。要求該數(shù)據(jù)庫至少有一個用于存放導航信息的數(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（父結點編號）等，數(shù)據(jù)庫表T_nav的結構如圖1所示。

圖1 數(shù)據(jù)表T_nav結構圖

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

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

1.2 設計導航欄原子構件

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

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

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

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

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

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

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

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

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

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

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

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

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

2 關鍵技術

⑴ 公共數(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ù)據(jù)庫的字符串

dataAdapter=new SqlDataAdapter（sqlStr， dataConnection）；

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

dataset.Clear（）；

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

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

}

catch （Exception ex）

dataConnection.Close（）；

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

return dataset.Tables [0]；

else return null；

}

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

public DataTable getdatabyparentid（string fp）

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

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

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

//查詢字符串

return db.GetDataFromDB （sqlstr ）；//調用類DataBase的方法

}

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

public void ptreeviewnode（TreeNode m， string nid）

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

{ DataTable dt=getdatabyparentid（nid）；

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

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

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

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

//為mn1賦予具體的結點值

m.ChildNodes.Add（mn1）； //mn1作為m的子結點

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

//遍歷mn1的所有子結點

}

}

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

public void bandroot（TreeView TreeView1）

//綁定根結點（TreeView控件）

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

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

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

//遍歷所有根結點

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

//為mynode實例化具體的結點值

TreeView1.Nodes.Add（mynode）；

//將結點mynode添加到TreeView控件中

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

//遍歷mynode的所有子結點

}

}

3 實現(xiàn)方案

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

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

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

if （！Page.IsPostBack）

bd1.bandroot（TreeView1）； //調用方法完成導航的設計

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

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

4 結束語

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

圖3 導航欄界面

參考文獻：

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

清華大學出版社，2008.

[2] 耿肇英等.C#應用程序設計教程[M].人民郵電出版社，2008.