1. 首页
  2. PHP教程
  3. asp.net夜话之十：复合控件和母板页---(上)

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

本篇要讲述的知识点如下：

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

　　因为我们给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">
　　　　　　　　　　　　　　　　　　　　　　　我们有丰富的产品线，还可以为用户单独定制。目前有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>

　　后台程序代码如下：

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";
　　}
}

　　页面在设计视图状态下的效果：

　　下面分别是点击“公司介绍”、“产品介绍”及“联系我们”时的效果。

　　“公司介绍”效果

　　“产品介绍”效果

　　“联系我们”效果

　　因为在上面的实现方式中每次点击都会引起向服务器回传，在实际项目中有时候也会采用javascript来实现类似的选项卡式效果。用javascript实现选项卡式效果比使用MultiView控件实现选项卡式效果要复杂一些，因为要编写一些客户端脚本代码

« 
» 
PHP教程
PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理 函数库分类
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3