论文部分内容阅读
摘 要： 导航栏是Web应用程序中一个最基本的功能，通过单击导航栏中的菜单项可以链接至不同的功能操作页面。为了实现动态显示导航数据的功能，设计了导航栏构件。该构件是通过类代码来实现，设计的基本思路是：将导航数据存储在数据库中，从数据库中读取数据绑定至导航控件；也可向数据库添加导航数据，这样可以方便地在网站设计中使用导航栏原子构件。
关键词： 原子构件； 导航栏； 类代码； 数据绑定
中图分类号：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 引言
导航，顾名思义就是在站点中起到引导作用的一项功能，通过设置符合站点运营需要的内容导航、操作导航等，可以让会员迅速地找到和发布自已感兴趣的内容，增加站点的页面浏览量和浏览深度[1]。导航栏是Web应用程序中一个最基本的功能，通过单击导航栏中的菜单项可以链接至不同的操作页面。本文所介绍的导航栏构件就是为了实现动态显示导航数据而设计的。本构件是通过类代码来实现，设计的基本思路是：将导航数据存储在数据库中，从数据库中读取数据绑定至导航控件，也可向数据库添加导航数据，这样可以方便地在网站设计中使用导航栏[2]。
1 原子构件的开发设计
1.1 准备测试数据库
为了说明导航栏构件的使用，程序至少需要一个测试数据库。要求该数据库至少有一个用于存放导航信息的数据表。下面首先创建一个测试数据库，创建测试数据库的步骤是：
⑴ 在Sql2005中新建一个名称为T_LinkData.mdf的数据库；
⑵ 在数据库T_LinkData.mdf中创建一个名为“T_nav”数据表；
⑶ 在数据表T_nav中，创建几个字段：id（编号）、fname（名称）、fparent（父结点编号）等，数据库表T_nav的结构如图1所示。
图1 数据表T_nav结构图
⑷ 为了便于测试，我们事先添加11条记录，如图2所示。
图2 在数据表T_nav添加11条测试记录
1.2 设计导航栏原子构件
⑴ 启动VS2005（或者VS2008），新建一个网站，名称为“导航、友情链接构件”，系统进入网站设计界面。
⑵ 在当前项目中将默认的Web窗体Default.aspx更改为Navigation.aspx。
⑶ 选择“解决方案资源管理器”中的“App_Data”，右击，在出现的快捷菜单中选择“添加现有项”，将上一步骤中准备的数据库添加到当前项目的“App_Data”目录下。
⑷ 选择“解决方案资源管理器”中的项目文件夹名称，右击，在出现的快捷菜单中选择“添加新项”（或者在“网站”菜单中选择“添加新项”），在出现的模板窗口中选择“类”，在名称中输入“DataBase”，新建一个“DataBase”类。
⑸ 单击“添加”命令，出现一个提示窗口，选择“是”，系统自动在当前项目中新建一个名称为“App_Code”的文件夹，并且将新建的类存放在“App_Code”文件夹中。
⑹ 进入类代码视图，在代码视图的最前面，输入代码“using System.Data.SqlClient；”，导入命名空间，此命名空间主要与数据库操作有关。
⑺ 在DataBase类中增加数据成员：dataConnection（建立连接对象），dataAdapter（数据适配器对象），dataset（数据集对象），connstr（数据库连接字符串）。
⑻ 在DataBase类中添加方法GetDataFromDB（），该方法的功能为公共查询，对传递过来的查询字符串进行查询，如果查询成功，则返回符合查询条件的记录构成的数据表，否则返回空。 ⑼ 在DataBase类中添加方法UpdateDB（），功能用于对数据进行添加、修改和删除操作。
（10） 在项目中新建一个“bandclass”类，方法同上。在该类中添加方法getdatabyparentid（），功能是依据父结点从数据表中获取信息。
（11） 在bandclass类中添加方法ptreeviewnode（），功能在TreeView控件中遍历指定结点的所有子结点。
（12） 在bandclass类中添加方法bandroot（），功能为将数据绑定到TreeView控件。
（13） 在bandclass类中添加方法SetData（），功能为向数据库添加导航数据。
2 关键技术
⑴ 公共数据操作方法
public bool UpdateDB（string sqlstr） //公共数据操作方法用于对
数据进行添加、修改和删除操作
{ SqlConnection sqlconn=new SqlConnection（connstr）；
//建立数据库连接对象
try
{ SqlCommand cmdTable=new SqlCommand（sqlstr， sqlconn）；
//实例执行SQL语句的对象
cmdTable.CommandType=CommandType.Text；
//指定如何解释命令字符串
sqlconn.Open（）； //打开连接
cmdTable.ExecuteNonQuery（）； //执行SQL语句
return true；
}
catch （Exception ex）
{ sqlconn.Close（）；
return false；
}
}
⑵ 公共查询方法
public DataTable GetDataFromDB（string sqlStr）//公共查询方法
{ try
{ dataConnection.ConnectionString=connstr；
//设置用于打开数据库的字符串
dataAdapter=new SqlDataAdapter（sqlStr， dataConnection）；
//将成员数据适配器对象实例化
dataset.Clear（）；
dataAdapter.Fill（dataset）； //填充数据集对象
dataConnection.Close（）； //关闭数据的连接
}
catch （Exception ex）
dataConnection.Close（）；
if （dataset.Tables[0].Rows.Count！=0） //如果记录不为空，则返回符合条件记录构成的数据表
return dataset.Tables [0]；
else return null；
}
⑶ 依据父结点从数据表中获取信息的方法
public DataTable getdatabyparentid（string fp）
//依据父结点从数据表中获取信息
{ 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）；
//依据nid从数据表中获取信息
TreeNode mn1=new TreeNode（）； //创建结点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的所有子结点
}
}
⑸ 将数据绑定到TreeView控件的方法
public void bandroot（TreeView TreeView1）
//绑定根结点（TreeView控件）
{ DataTable dt=getdatabyparentid（"0"）； //根结点的父结点为0
TreeNode mynode=new TreeNode（）； //创建一个结点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 实现方案
⑴ 进入Navigation.aspx的设计页面，从工具箱拖放一个TreeView控件至Web窗体。
⑵ 在事件处理代码页面，在Page_Load事件中添加代码如下：
bandclass bd1=new bandclass（）； //实例化类的对象
if （！Page.IsPostBack）
bd1.bandroot（TreeView1）； //调用方法完成导航的设计
⑶ 运行Navigation.aspx页面，运行效果如图3所示。
⑷ 如果将方法绑定Menu控件完成导航栏设计，必须在类bandclass中重载方法ptreeviewnode（）和bandroot（），代码略。具体导航栏设计由读者自己完成。
4 结束语
此构件是通过类代码来实现，将导航栏数据存储在数据库中，从数据库中读取数据绑定至TreeView控件中，可以方便地在网站中设计导航栏。在以后设计导航栏时就可引用此原子构件，不需再另行设计界面和代码，它就象一块积木一样应用在所设计的网页中。我们已经在很多网页设计中使用了此构件，效果非常好，制作导航栏方便快捷。当然读者也可以对此构件进行修改，使它更适合个性需要。
图3 导航栏界面
参考文献：
[1] 许宾，胡勇辉，凌志勇.ASP.NET2.0（C#）应用开发技术与典型实例[M].
清华大学出版社，2008.
[2] 耿肇英等.C#应用程序设计教程[M].人民邮电出版社，2008.
关键词： 原子构件； 导航栏； 类代码； 数据绑定
中图分类号：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 引言
导航，顾名思义就是在站点中起到引导作用的一项功能，通过设置符合站点运营需要的内容导航、操作导航等，可以让会员迅速地找到和发布自已感兴趣的内容，增加站点的页面浏览量和浏览深度[1]。导航栏是Web应用程序中一个最基本的功能，通过单击导航栏中的菜单项可以链接至不同的操作页面。本文所介绍的导航栏构件就是为了实现动态显示导航数据而设计的。本构件是通过类代码来实现，设计的基本思路是：将导航数据存储在数据库中，从数据库中读取数据绑定至导航控件，也可向数据库添加导航数据，这样可以方便地在网站设计中使用导航栏[2]。
1 原子构件的开发设计
1.1 准备测试数据库
为了说明导航栏构件的使用，程序至少需要一个测试数据库。要求该数据库至少有一个用于存放导航信息的数据表。下面首先创建一个测试数据库，创建测试数据库的步骤是：
⑴ 在Sql2005中新建一个名称为T_LinkData.mdf的数据库；
⑵ 在数据库T_LinkData.mdf中创建一个名为“T_nav”数据表；
⑶ 在数据表T_nav中，创建几个字段：id（编号）、fname（名称）、fparent（父结点编号）等，数据库表T_nav的结构如图1所示。
图1 数据表T_nav结构图
⑷ 为了便于测试，我们事先添加11条记录，如图2所示。
图2 在数据表T_nav添加11条测试记录
1.2 设计导航栏原子构件
⑴ 启动VS2005（或者VS2008），新建一个网站，名称为“导航、友情链接构件”，系统进入网站设计界面。
⑵ 在当前项目中将默认的Web窗体Default.aspx更改为Navigation.aspx。
⑶ 选择“解决方案资源管理器”中的“App_Data”，右击，在出现的快捷菜单中选择“添加现有项”，将上一步骤中准备的数据库添加到当前项目的“App_Data”目录下。
⑷ 选择“解决方案资源管理器”中的项目文件夹名称，右击，在出现的快捷菜单中选择“添加新项”（或者在“网站”菜单中选择“添加新项”），在出现的模板窗口中选择“类”，在名称中输入“DataBase”，新建一个“DataBase”类。
⑸ 单击“添加”命令，出现一个提示窗口，选择“是”，系统自动在当前项目中新建一个名称为“App_Code”的文件夹，并且将新建的类存放在“App_Code”文件夹中。
⑹ 进入类代码视图，在代码视图的最前面，输入代码“using System.Data.SqlClient；”，导入命名空间，此命名空间主要与数据库操作有关。
⑺ 在DataBase类中增加数据成员：dataConnection（建立连接对象），dataAdapter（数据适配器对象），dataset（数据集对象），connstr（数据库连接字符串）。
⑻ 在DataBase类中添加方法GetDataFromDB（），该方法的功能为公共查询，对传递过来的查询字符串进行查询，如果查询成功，则返回符合查询条件的记录构成的数据表，否则返回空。 ⑼ 在DataBase类中添加方法UpdateDB（），功能用于对数据进行添加、修改和删除操作。
（10） 在项目中新建一个“bandclass”类，方法同上。在该类中添加方法getdatabyparentid（），功能是依据父结点从数据表中获取信息。
（11） 在bandclass类中添加方法ptreeviewnode（），功能在TreeView控件中遍历指定结点的所有子结点。
（12） 在bandclass类中添加方法bandroot（），功能为将数据绑定到TreeView控件。
（13） 在bandclass类中添加方法SetData（），功能为向数据库添加导航数据。
2 关键技术
⑴ 公共数据操作方法
public bool UpdateDB（string sqlstr） //公共数据操作方法用于对
数据进行添加、修改和删除操作
{ SqlConnection sqlconn=new SqlConnection（connstr）；
//建立数据库连接对象
try
{ SqlCommand cmdTable=new SqlCommand（sqlstr， sqlconn）；
//实例执行SQL语句的对象
cmdTable.CommandType=CommandType.Text；
//指定如何解释命令字符串
sqlconn.Open（）； //打开连接
cmdTable.ExecuteNonQuery（）； //执行SQL语句
return true；
}
catch （Exception ex）
{ sqlconn.Close（）；
return false；
}
}
⑵ 公共查询方法
public DataTable GetDataFromDB（string sqlStr）//公共查询方法
{ try
{ dataConnection.ConnectionString=connstr；
//设置用于打开数据库的字符串
dataAdapter=new SqlDataAdapter（sqlStr， dataConnection）；
//将成员数据适配器对象实例化
dataset.Clear（）；
dataAdapter.Fill（dataset）； //填充数据集对象
dataConnection.Close（）； //关闭数据的连接
}
catch （Exception ex）
dataConnection.Close（）；
if （dataset.Tables[0].Rows.Count！=0） //如果记录不为空，则返回符合条件记录构成的数据表
return dataset.Tables [0]；
else return null；
}
⑶ 依据父结点从数据表中获取信息的方法
public DataTable getdatabyparentid（string fp）
//依据父结点从数据表中获取信息
{ 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）；
//依据nid从数据表中获取信息
TreeNode mn1=new TreeNode（）； //创建结点mn1
for （int i=0； dt！=null && i
//为mn1赋予具体的结点值
m.ChildNodes.Add（mn1）； //mn1作为m的子结点
ptreeviewnode（mn1， dt.Rows[i]["id"].ToString（））；
//遍历mn1的所有子结点
}
}
⑸ 将数据绑定到TreeView控件的方法
public void bandroot（TreeView TreeView1）
//绑定根结点（TreeView控件）
{ DataTable dt=getdatabyparentid（"0"）； //根结点的父结点为0
TreeNode mynode=new TreeNode（）； //创建一个结点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 实现方案
⑴ 进入Navigation.aspx的设计页面，从工具箱拖放一个TreeView控件至Web窗体。
⑵ 在事件处理代码页面，在Page_Load事件中添加代码如下：
bandclass bd1=new bandclass（）； //实例化类的对象
if （！Page.IsPostBack）
bd1.bandroot（TreeView1）； //调用方法完成导航的设计
⑶ 运行Navigation.aspx页面，运行效果如图3所示。
⑷ 如果将方法绑定Menu控件完成导航栏设计，必须在类bandclass中重载方法ptreeviewnode（）和bandroot（），代码略。具体导航栏设计由读者自己完成。
4 结束语
此构件是通过类代码来实现，将导航栏数据存储在数据库中，从数据库中读取数据绑定至TreeView控件中，可以方便地在网站中设计导航栏。在以后设计导航栏时就可引用此原子构件，不需再另行设计界面和代码，它就象一块积木一样应用在所设计的网页中。我们已经在很多网页设计中使用了此构件，效果非常好，制作导航栏方便快捷。当然读者也可以对此构件进行修改，使它更适合个性需要。
图3 导航栏界面
参考文献：
[1] 许宾，胡勇辉，凌志勇.ASP.NET2.0（C#）应用开发技术与典型实例[M].
清华大学出版社，2008.
[2] 耿肇英等.C#应用程序设计教程[M].人民邮电出版社，2008.