当前位置：首页 > 网络编程 > WEB编程 > ASP.net > asp.net夜话之十：复合控件和母板页---(上)

asp.net夜话之十：复合控件和母板页---(上)

点击次数：15 次发布日期：2008-12-10 21:48:13 作者：源代码网

源代码网推荐本篇要讲述的知识点如下：

　　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	是否在节点前显示复选框

下面是一个简单的例子。我们的数据都是从一个XML文件中读取的，并将它的节点通过代码的方式添加到TreeView控件中。这个XML文件的物理文件名为area.xml，与下面的asp.net在同一个文件夹下，它的内容如下：

<?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文件的读取是一个比较复杂的问题，这里在代码中仅对程序中所使用的代码进行了详尽的注释。这个页面的运行效果如下：

asp.net夜话之十：复合控件和母板页---(上)

　　因为我们给TreeView控件的SelectedNodeChanged事件添加了处理方法，所以当我们点击节点时会进行相关的处理，下面是点击黄冈市的效果：

asp.net夜话之十：复合控件和母板页---(上)

　　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"> 　　　　　　　　　　　　　　　　　　　　　　　我们有丰富的产品线，还可以为用户单独定制。目前有CMS文章发布系统、CRM客户资源关系管理系统、OA自动办公系统、BBS论坛系统及ERP企业资产管理系统等等，正在研发的软件有GPS车辆定位导航系统及工作流定制系统等等。</asp:View> 　　　　　　　　　　　　　　　　　　　　　<asp:ViewID="View3"runat="server"> 　　　　　　　　　　　　　　　　　　　　　　　本公司热烈欢迎技术界和销售界的精英加入我们的团队，待遇优厚。我们的联系方式是119，传真是110，客服电话是120，售后电话114。</asp:View> 　　　　　　　　　　　　　　　　　　　</asp:MultiView> 　　　　　　　　　　　　　　　　　</td> 　　　　　　　　　　　　　　　</tr> 　　　　　　　　　　　　　</table> 　　　　　　　　　　　</td> 　　　　　　　　　</tr> 　　　　　　</table> 　　　　</fieldset> 　　</div> 　　</form> </body> </html>