TreeView控件
MultiView控件
Javascript方式的选项卡
WiZard控件
MasterPage母板页
TreeView控件
在我们的开发中经常会遇到一些有树形层次关系的数据,比如显示无限级分类和显示某个文件下的所有文件及文件夹,对于这些带有树形层次关系的数据的显示用TreeView控件是一个比较不错的选择。TreeView控件支持数据绑定也支持以编程的方式动态添加节点。在TreeView控件中每个节点都是一个TreeNode对象,我们可以通过TreeNode对象的Nodes属性来添加其它的TreeNode对象,使之成为这个TreeNode对象的子节点。
TreeView对象有以下常见属性:
属性名 | 说明 |
CheckedNodes | 获取选中了复选框的节点 |
CollapseImageUrl | 节点折叠时的图象 |
DataSource | 绑定到TreeView控件的数据源 |
DataSourceID | 绑定到TreeView控件的数据源控件的ID |
EnableClientScript | 是否允许客户端处理展开和折叠事件 |
ExpandDepth | 第一次显示时所展开的级数 |
ExpandImageUrl | 节点展开的时的图象 |
NoExpandImageUrl | 不可折叠(即无字节点)的节点的图象 |
PathSeparator | 节点之间的值的路径分隔符 |
SelectedNode | 当前选中的节点 |
SelectedValue | 当前选中的值 |
ShowCheckBoxes | 是否在节点前显示复选框 |
<?xmlversion="1.0"encoding="utf-8"?>
<Area>
<ProvinceiAreaID="1"cAreaName="北京市"/>
<ProvinceiAreaID="2"cAreaName="上海市"/>
<ProvinceiAreaID="3"cAreaName="天津市"/>
<ProvinceiAreaID="4"cAreaName="重庆市"/>
<ProvinceiAreaID="5"cAreaName="湖北省">
<CityiAreaID="51"cAreaName="武汉市"/>
<CityiAreaID="52"cAreaName="黄冈市"/>
<CityiAreaID="53"cAreaName="荆州市"/>
<CityiAreaID="54"cAreaName="武穴市"/>
<CityiAreaID="55"cAreaName="十堰市"/>
<CityiAreaID="56"cAreaName="黄石市"/>
</Province>
<ProvinceiAreaID="6"cAreaName="河北省">
<CityiAreaID="61"cAreaName="石家庄市"/>
<CityiAreaID="62"cAreaName="唐山市"/>
</Province>
<ProvinceiAreaID="7"cAreaName="山西省">
<CityiAreaID="71"cAreaName="太原市"/>
<CityiAreaID="72"cAreaName="大同市"/>
</Province>
</Area>
前台代码:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="TreeDemo.aspx.cs"Inherits="TreeDemo"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>TreeView控件的例子</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:TreeViewID="treeAreaList"runat="server"AutoGenerateDataBindings="False"OnSelectedNodeChanged="Tree_SelectedNodeChanged">
</asp:TreeView>
</div>
</form>
</body>
</html>
后台代码如下:
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Xml;
usingSystem.Xml.XPath;
publicpartialclassTreeDemo:System.Web.UI.Page
{
XmlDocumentxmlDoc;
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!Page.IsPostBack)
{
MakeParentNode();
}
}
#region //生成父结点
///<summary>
///生成
///</summary>
protectedvoidMakeParentNode()
{
treeAreaList.Nodes.Clear();
xmlDoc=newXmlDocument();
xmlDoc.Load(Server.MapPath("area.xml"));//动态加载XML文档
XmlNodeListnodeList=xmlDoc.SelectSingleNode("Area").ChildNodes;//获取Area节点下的所有子结点
//定义Area结点
TreeNodetopNode=newTreeNode();//定义顶级节点
topNode.Text="area";
// tn.Value="-1";
topNode.Expanded=true;
treeAreaList.Nodes.Add(topNode);//添加"区域"父结点
XmlElementelement=null;
TreeNodetreeNode=null;
//遍历区域下的所有省和直辖市
foreach(XmlNodenodeinnodeList)
{
element=(XmlElement)node;
treeNode=newTreeNode();
treeNode.Text=element.GetAttribute("cAreaName");//在树控件上显示省或直辖市的名称
treeNode.Value=element.GetAttribute("iAreaID");//获取节点值
treeNode.Expanded=true;
topNode.ChildNodes.Add(treeNode);//将省或直辖市级结点添加到顶级节点中
MakeChildNode(node.ChildNodes,treeNode);//通过递归将所有子节点添加到节点集合中
}
}
#endregion
#region //生成子结点
///<summary>
///递归将子节点添加到当前节点下
///</summary>
///<paramname="nodeList">XmlNodeList的实例</param>
///<paramname="treeNode">要添加子节点的父节点</param>
protectedvoidMakeChildNode(XmlNodeListnodeList,TreeNodetreeNode)
{
XmlElementelement=null;
TreeNodesubTreeNode=null;
//遍历省级节点下的所有市,市辖区
foreach(XmlNodenodeinnodeList)
{
element=(XmlElement)node;
subTreeNode=newTreeNode();
subTreeNode.Text=element.GetAttribute("cAreaName");//在树控件上显示市或市辖区的名称
subTreeNode.Value=element.GetAttribute("iAreaID");//这里设置节点Value
subTreeNode.Expanded=true;
treeNode.ChildNodes.Add(subTreeNode);//将子结点添加到父结点下面
MakeChildNode(node.ChildNodes,subTreeNode);//递归调用本方法
}
}
#endregion
protectedvoidTree_SelectedNodeChanged(objectsender,EventArgse)
{
Response.Write("节点的值:"+treeAreaList.SelectedNode.Value+"<br/>");
Response.Write("节点的路径:"+treeAreaList.SelectedNode.ValuePath+"<br/>");
Response.Write("节点的数据路径:"+treeAreaList.SelectedNode.DataPath+"<br/>");
}
}
有关XML文件的读取是一个比较复杂的问题,这里在代码中仅对程序中所使用的代码进行了详尽的注释。这个页面的运行效果如下:
因为我们给TreeView控件的SelectedNodeChanged事件添加了处理方法,所以当我们点击节点时会进行相关的处理,下面是点击黄冈市的效果:
MultiView控件
MultiView控件是一个比较复杂一点控件,它有点类似于WinForm中的TabControl控件,它是View控件的容器,而View控件则可以当作控件的容器,类似于WinForm中的TabPage控件。
一次只能设置一个View控件为活动视图,只有处于活动状态的View才会呈现到客户端。如果没有设置任何View为活动视图则不向客户端呈现任何内容。可以通过设计视图或者编码的方式设置活动视图。
MultiView有两个常见属性:
ActiveViewIndex: 当前活动的View索引,我们通常就是通过设置ActiveViewIndex来控制View的显示的。
Views:当前MultiView控件的View集合
下面是一个利用MultiView控件实现的类似于Windows应用程序中的选项卡式效果。前台设计代码如下:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="MultiViewDemo.aspx.cs"Inherits="MultiViewDemo"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>MultiView应用实例</title>
<styletype="text/css">
body
{
font-size:11pt;
font-family:宋体;
}
.mainTitle
{
font-size:12pt;
font-weight:bold;
font-family:宋体;
}
.commonText
{
font-size:11pt;
font-family:宋体;
}
.littleMainTitle
{
font-size:10pt;
font-weight:bold;
font-family:宋体;
}
.TopTitle
{
border:0px;
font-size:10pt;
font-weight:bold;
text-decoration:none;
color:Black;
display:inline-block;
width:100%;
}
.SelectedTopTitle
{
border:0px;
font-size:10pt;
text-decoration:none;
color:Black;
display:inline-block;
width:100%;
background-color:White;
}
.ContentView
{
border:0px;
padding:3px3px3px3px;
background-color:White;
display:inline-block;
width:390px;
}
.SepBorder
{
border-top-width:0px;
border-left-width:0px;
font-size:1px;
border-bottom:Gray1pxsolid;
border-right-width:0px;
}
.TopBorder
{
border-right:Gray1pxsolid;
border-top:Gray1pxsolid;
background:#DCDCDC;
border-left:Gray1pxsolid;
color:black;
border-bottom:Gray1pxsolid;
}
.ContentBorder
{
border-right:Gray1pxsolid;
border-top:Gray0pxsolid;
border-left:Gray1pxsolid;
border-bottom:Gray1pxsolid;
height:100%;
width:100%;
}
.SelectedTopBorder
{
border-right:Gray1pxsolid;
border-top:Gray1pxsolid;
background:nonetransparentscrollrepeat0%0%;
border-left:Gray1pxsolid;
color:black;
border-bottom:Gray0pxsolid;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<fieldsetstyle="width:400px">
<legend>MultiView应用实例</legend>
<tablecellpadding="0"cellspacing="0"width="100%"border="0">
<tr>
<td>
<tableid="Table1"runat="server"cellpadding="0"cellspacing="0"width="100%"border="0">
<trstyle="height:22px">
<tdclass="SelectedTopBorder"id="Cell1"align="center"style="width:80px;">
<asp:LinkButtonID="lButtonCompany"runat="server"OnClick="lButtonCompany_Click">公司介绍</asp:LinkButton></td>
<tdclass="SepBorder"style="width:2px;height:22px;"></td>
<tdclass="TopBorder"id="Cell2"align="center"style="width:80px;">
<asp:LinkButtonID="lButtonProduct"runat="server"OnClick="lButtonProduct_Click">产品介绍</asp:LinkButton></td>
<tdclass="SepBorder"style="width:2px;height:22px;"></td>
<tdclass="TopBorder"id="Cell3"align="center"style="width:80px;">
<asp:LinkButtonID="lButtonContact"runat="server"OnClick="lButtonContact_Click">联系我们</asp:LinkButton></td>
<tdclass="SepBorder"style="width:2px;height:22px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<tableclass="ContentBorder"cellpadding="0"cellspacing="0"width="100%">
<tr>
<tdvalign="top">
<asp:MultiViewID="mvCompany"runat="server"ActiveViewIndex="0">
<asp:ViewID="View1"runat="server">
我们公司是一个正在上升时期的公司。公司目前有中科院计算机院士3人,博士后32人,博士63人,研究生120人,本科生356人,具有非常强大研发实力。</asp:View>
<asp:ViewID="View2"runat="server">
<asp:ViewID="View3"runat="server">
本公司热烈欢迎技术界和销售界的精英加入我们的团队,待遇优厚。我们的联系方式是119,传真是110,客服电话是120,售后电话114。</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
后台程序代码如下:
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclassMultiViewDemo:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
}
///<summary>
///点击公司介绍时的css设置
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
protectedvoidlButtonCompany_Click(objectsender,EventArgse)
{
mvCompany.ActiveViewIndex=0;
Cell1.Attributes["class"]="SelectedTopBorder";
Cell2.Attributes["class"]="TopBorder";
Cell3.Attributes["class"]="TopBorder";
}
///<summary>
///点击产品介绍时的css设置
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
protectedvoidlButtonProduct_Click(objectsender,EventArgse)
{
mvCompany.ActiveViewIndex=1;
Cell1.Attributes["class"]="TopBorder";
Cell2.Attributes["class"]="SelectedTopBorder";
Cell3.Attributes["class"]="TopBorder";
}
///<summary>
///点击联系我们时的css设置
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
protectedvoidlButtonContact_Click(objectsender,EventArgse)
{
mvCompany.ActiveViewIndex=2;
Cell1.Attributes["class"]="TopBorder";
Cell2.Attributes["class"]="TopBorder";
Cell3.Attributes["class"]="SelectedTopBorder";
}
}
页面在设计视图状态下的效果:
下面分别是点击“公司介绍”、“产品介绍”及“联系我们”时的效果。
“公司介绍”效果
“产品介绍”效果
“联系我们”效果