现在的位置: 首页 > 综合 > 正文

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

2013年10月02日 ⁄ 综合 ⁄ 共 15016字 ⁄ 字号 小 中 大 ⁄ 评论关闭

《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在同一个文件夹下，它的内容如下：

 

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <Area>
  3.   <Province iAreaID ="1" cAreaName="北京市"/>
  4.   <Province iAreaID ="2" cAreaName="上海市"/>
  5.   <Province iAreaID ="3" cAreaName="天津市"/>
  6.   <Province iAreaID ="4" cAreaName="重庆市"/>
  7.   <Province iAreaID ="5" cAreaName="湖北省">
  8.     <City iAreaID ="51" cAreaName="武汉市"/>
  9.     <City iAreaID ="52" cAreaName="黄冈市" />
  10.     <City iAreaID ="53" cAreaName="荆州市"/>
  11.     <City iAreaID ="54" cAreaName="武穴市" />
  12.     <City iAreaID ="55" cAreaName="十堰市"/>
  13.     <City iAreaID ="56" cAreaName="黄石市" />
  14.   </Province>
  15.   <Province iAreaID ="6" cAreaName="河北省">
  16.     <City iAreaID ="61" cAreaName="石家庄市"/>
  17.     <City iAreaID ="62" cAreaName="唐山市" />
  18.   </Province>
  19.   <Province iAreaID ="7" cAreaName="山西省">
  20.     <City iAreaID ="71" cAreaName="太原市" />
  21.     <City iAreaID ="72" cAreaName="大同市" />
  22.   </Province>
  23. </Area>

前台代码：

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeDemo.aspx.cs" Inherits="TreeDemo" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>TreeView控件的例子</title>
  6. </head>
  7. <body>
  8.     <form id="form1" runat="server">
  9.     <div>
  10.         <asp:TreeView ID="treeAreaList" runat="server" AutoGenerateDataBindings="False" OnSelectedNodeChanged="Tree_SelectedNodeChanged">
  11.         </asp:TreeView>
  12.         </div>
  13.     </form>
  14. </body>
  15. </html>

后台代码如下：

  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Collections;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI.WebControls.WebParts;
  10. using System.Web.UI.HtmlControls;
  11. using System.Xml;
  12. using System.Xml.XPath;
  13. public partial class TreeDemo : System.Web.UI.Page
  14. {
  15.     XmlDocument xmlDoc;
  16.     protected void Page_Load(object sender, EventArgs e)
  17.     {
  18.         if (!Page.IsPostBack)
  19.         {
  20.             MakeParentNode();
  21.         }
  22.     }
  23.     #region  //生成父结点
  24.     /// <summary>
  25.     /// 生成
  26.     /// </summary>
  27.     protected void MakeParentNode()
  28.     {
  29.         treeAreaList.Nodes.Clear();
  30.         xmlDoc = new XmlDocument();
  31.         xmlDoc.Load(Server.MapPath("area.xml "));//动态加载XML文档 
  32.         XmlNodeList nodeList = xmlDoc.SelectSingleNode("Area").ChildNodes;//获取Area节点下的所有子结点 
  33.         //定义Area结点 
  34.         TreeNode topNode = new TreeNode();//定义顶级节点
  35.         topNode.Text = "area ";
  36.         //  tn.Value = "-1"; 
  37.         topNode.Expanded = true;
  38.         treeAreaList.Nodes.Add(topNode);//添加"区域"父结点 
  39.         XmlElement element = null;
  40.         TreeNode treeNode = null;
  41.         //遍历区域下的所有省和直辖市 
  42.         foreach (XmlNode node in nodeList)
  43.         {
  44.             element = (XmlElement)node;
  45.             treeNode = new TreeNode();
  46.             treeNode.Text = element.GetAttribute("cAreaName");//在树控件上显示省或直辖市的名称 
  47.             treeNode.Value = element.GetAttribute("iAreaID");//获取节点值
  48.             treeNode.Expanded = true;
  49.             topNode.ChildNodes.Add(treeNode);//将省或直辖市级结点添加到顶级节点中 
  50.             MakeChildNode(node.ChildNodes, treeNode);//通过递归将所有子节点添加到节点集合中
  51.         }
  52.     }
  53.     #endregion
  54.     #region  //生成子结点
  55.     /// <summary>
  56.     /// 递归将子节点添加到当前节点下
  57.     /// </summary>
  58.     /// <param name="nodeList">XmlNodeList的实例</param>
  59.     /// <param name="treeNode">要添加子节点的父节点</param>
  60.     protected void MakeChildNode(XmlNodeList nodeList, TreeNode treeNode)
  61.     {
  62.         XmlElement element = null;
  63.         TreeNode subTreeNode = null;
  64.         //遍历省级节点下的所有市，市辖区 
  65.         foreach (XmlNode node in nodeList)
  66.         {
  67.             element = (XmlElement)node;
  68.             subTreeNode = new TreeNode();
  69.             subTreeNode.Text = element.GetAttribute("cAreaName");//在树控件上显示市或市辖区的名称 
  70.             subTreeNode.Value = element.GetAttribute("iAreaID");//这里设置节点Value
  71.             subTreeNode.Expanded = true;
  72.             treeNode.ChildNodes.Add(subTreeNode);//将子结点添加到父结点下面 
  73.             MakeChildNode(node.ChildNodes, subTreeNode);//递归调用本方法
  74.         }
  75.     }
  76.     #endregion
  77.     protected void Tree_SelectedNodeChanged(object sender, EventArgs e)
  78.     {
  79.         Response.Write("节点的值：" + treeAreaList.SelectedNode.Value+"<br/>");
  80.         Response.Write("节点的路径：" + treeAreaList.SelectedNode.ValuePath + "<br/>");
  81.         Response.Write("节点的数据路径：" + treeAreaList.SelectedNode.DataPath + "<br/>");
  82.     }
  83. }

有关XML文件的读取是一个比较复杂的问题，这里在代码中仅对程序中所使用的代码进行了详尽的注释。这个页面的运行效果如下：
 
因为我们给TreeView控件的SelectedNodeChanged事件添加了处理方法，所以当我们点击节点时会进行相关的处理，下面是点击黄冈市的效果：

 

MultiView控件
MultiView控件是一个比较复杂一点控件，它有点类似于WinForm中的TabControl控件，它是View控件的容器，而View控件则可以当作控件的容器，类似于WinForm中的TabPage控件。
一次只能设置一个View控件为活动视图，只有处于活动状态的View才会呈现到客户端。如果没有设置任何View为活动视图则不向客户端呈现任何内容。可以通过设计视图或者编码的方式设置活动视图。
MultiView有两个常见属性：
ActiveViewIndex: 当前活动的View索引，我们通常就是通过设置ActiveViewIndex来控制View的显示的。
Views：当前MultiView控件的View集合
下面是一个利用MultiView控件实现的类似于Windows应用程序中的选项卡式效果。前台设计代码如下：

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiViewDemo.aspx.cs" Inherits="MultiViewDemo" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>MultiView应用实例</title>
  6.     <style type="text/css">
  7.     body
  8. {
  9.     font-size: 11pt;
  10.     font-family: 宋体;
  11. }
  12. .mainTitle
  13. {
  14.     font-size: 12pt;
  15.     font-weight: bold;
  16.     font-family: 宋体;
  17. }
  18. .commonText
  19. {
  20.     font-size: 11pt;
  21.     font-family: 宋体;
  22. }
  23. .littleMainTitle
  24. {
  25.     font-size: 10pt;
  26.     font-weight: bold;
  27.     font-family: 宋体;
  28. }
  29. .TopTitle
  30. {
  31.     border: 0px;
  32.     font-size: 10pt;
  33.     font-weight: bold;
  34.     text-decoration: none;
  35.     color: Black;
  36.     display: inline-block;
  37.     width: 100%;    
  38. }
  39. .SelectedTopTitle
  40. {
  41.     border: 0px;
  42.     font-size: 10pt;
  43.     text-decoration: none;
  44.     color: Black;
  45.     display: inline-block;
  46.     width: 100%;
  47.     background-color: White;
  48. }
  49. .ContentView
  50. {
  51.     border: 0px;
  52.     padding: 3px 3px 3px 3px;
  53.     background-color: White;
  54.     display: inline-block;
  55.     width: 390px;
  56. }
  57. .SepBorder
  58. {
  59.     border-top-width: 0px;
  60.     border-left-width: 0px;
  61.     font-size: 1px;
  62.     border-bottom: Gray 1px solid;
  63.     border-right-width: 0px;
  64. }
  65. .TopBorder
  66. {
  67.     border-right: Gray 1px solid;
  68.     border-top: Gray 1px solid;
  69.     background: #DCDCDC;
  70.     border-left: Gray 1px solid;
  71.     color: black;
  72.     border-bottom: Gray 1px solid;
  73. }
  74. .ContentBorder
  75. {
  76.     border-right: Gray 1px solid;
  77.     border-top: Gray 0px solid;
  78.     border-left: Gray 1px solid;
  79.     border-bottom: Gray 1px solid;
  80.     height: 100%;
  81.     width: 100%;
  82. }
  83. .SelectedTopBorder
  84. {
  85.     border-right: Gray 1px solid;
  86.     border-top: Gray 1px solid;
  87.     background: none transparent scroll repeat 0% 0%;
  88.     border-left: Gray 1px solid;
  89.     color: black;
  90.     border-bottom: Gray 0px solid;
  91. }
  92.     </style>
  93. </head>
  94. <body>
  95.     <form id="form1" runat="server">
  96.     <div>
  97.     <fieldset style="width:400px">
  98.             <legend>MultiView应用实例</legend>
  99.             <table cellpadding="0" cellspacing="0" width="100%" border="0">
  100.                 <tr>
  101.                     <td>
  102.                         <table id="Table1" runat="server" cellpadding="0" cellspacing="0" width="100%" border="0">
  103.                             <tr style="height:22px">
  104.                                 <td class="SelectedTopBorder" id="Cell1" align="center" style="width:80px;">
  105.                                     <asp:LinkButton ID="lButtonCompany" runat="server" OnClick="lButtonCompany_Click">公司介绍</asp:LinkButton></td>
  106.                                 <td class="SepBorder" style="width:2px; height: 22px;"></td>
  107.                                 <td class="TopBorder" id="Cell2" align="center" style="width:80px;">
  108.                                     <asp:LinkButton ID="lButtonProduct" runat="server" OnClick="lButtonProduct_Click">产品介绍</asp:LinkButton></td>
  109.                                 <td class="SepBorder" style="width:2px; height: 22px;"></td>
  110.                                 <td class="TopBorder" id="Cell3" align="center" style="width:80px;">
  111.                                     <asp:LinkButton ID="lButtonContact" runat="server" OnClick="lButtonContact_Click">联系我们</asp:LinkButton></td>
  112.                                 <td class="SepBorder" style="width:2px; height: 22px;"></td>
  113.                             </tr>
  114.                         </table>
  115.                     </td>
  116.                 </tr>
  117.                 <tr>
  118.                     <td>
  119.                         <table class="ContentBorder" cellpadding="0" cellspacing="0" width="100%">
  120.                               <tr>
  121.                                   <td valign="top">
  122.                                       <asp:MultiView ID="mvCompany" runat="server" ActiveViewIndex="0">
  123.                                           <asp:View ID="View1" runat="server">
  124.                                                         我们公司是一个正在上升时期的公司。公司目前有中科院计算机院士3人，博士后32人，博士63人，研究生120人，本科生356人，具有非常强大研发实力。</asp:View>
  125.                                           <asp:View ID="View2" runat="server">
  126.                                               我们有丰富的产品线，还可以为用户单独定制。目前有CMS文章发布系统、CRM客户资源关系管理系统、OA自动办公系统、BBS论坛系统及ERP企业资产管理系统等等，正在研发的软件有GPS车辆定位导航系统及工作流定制系统等等。</asp:View>
  127.                                           <asp:View ID="View3" runat="server">
  128.                                               本公司热烈欢迎技术界和销售界的精英加入我们的团队，待遇优厚。我们的联系方式是119，传真是110，客服电话是120，售后电话114。</asp:View>
  129.                                        </asp:MultiView>
  130.                                   </td>
  131.                               </tr>
  132.                            </table>
  133.                        </td>
  134.                   </tr>
  135.             </table>
  136.         </fieldset>
  137.     </div>
  138.     </form>
  139. </body>
  140. </html>

后台程序代码如下：

  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Collections;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI.WebControls.WebParts;
  10. using System.Web.UI.HtmlControls;
  11. public partial class MultiViewDemo : System.Web.UI.Page
  12. {
  13.     protected void Page_Load(object sender, EventArgs e)
  14.     {
  15.     }
  16.     /// <summary>
  17.     /// 点击公司介绍时的css设置
  18.     /// </summary>
  19.     /// <param name="sender"></param>
  20.     /// <param name="e"></param>
  21.     protected void lButtonCompany_Click(object sender, EventArgs e)
  22.     {
  23.         mvCompany.ActiveViewIndex = 0;
  24.         Cell1.Attributes["class"] = "SelectedTopBorder";
  25.         Cell2.Attributes["class"] = "TopBorder";
  26.         Cell3.Attributes["class"] = "TopBorder";
  27.     }
  28.     /// <summary>
  29.     /// 点击产品介绍时的css设置
  30.     /// </summary>
  31.     /// <param name="sender"></param>
  32.     /// <param name="e"></param>
  33.     protected void lButtonProduct_Click(object sender, EventArgs e)
  34.     {
  35.         mvCompany.ActiveViewIndex = 1;
  36.         Cell1.Attributes["class"] = "TopBorder";
  37.         Cell2.Attributes["class"] = "SelectedTopBorder";
  38.         Cell3.Attributes["class"] = "TopBorder";
  39.     }
  40.     /// <summary>
  41.     /// 点击联系我们时的css设置
  42.     /// </summary>
  43.     /// <param name="sender"></param>
  44.     /// <param name="e"></param>
  45.     protected void lButtonContact_Click(object sender, EventArgs e)
  46.     {
  47.         mvCompany.ActiveViewIndex = 2;
  48.         Cell1.Attributes["class"] = "TopBorder";
  49.         Cell2.Attributes["class"] = "TopBorder";
  50.         Cell3.Attributes["class"] = "SelectedTopBorder";
  51.     }
  52. }

页面在设计视图状态下的效果：
 
下面分别是点击“公司介绍”、“产品介绍”及“联系我们”时的效果。
“公司介绍”效果
 
“产品介绍”效果
 
“联系我们”效果
 
因为在上面的实现方式中每次点击都会引起向服务器回传，在实际项目中有时候也会采用javascript来实现类似的选项卡式效果。用javascript实现选项卡式效果比使用MultiView控件实现选项卡式效果要复杂一些，因为要编写一些客户端脚本代码。
下面是一个用javascript来实现的选项卡式效果的例子，完全采用输出HTML代码的方式。在这个例子中我们通过css和div来控制当前活动选项卡和非活动选项卡的显示与否及显示样式，疑难部分笔者都做了详尽注释，读者朋友完全可以根据自己的实际需要把代码改造成自己想要的效果。
以下是设计部分代码：

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptMenu.aspx.cs" Inherits="JavaScriptMenu" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>JavaScript实现的选项卡式效果</title>
  6.     <script language="javascript" type="text/javascript">
  7.     function Show_Sub(id_num,num,obj)
  8.     { 
  9.         for(var i = 0;i <= 9;i++)
  10.         {
  11.             if(GetObj("tabb" + id_num + i))
  12.             {
  13.                 GetObj("tabb" + id_num + i).className = 'guide2';
  14.             }
  15.             if(GetObj("subb" + id_num + i))
  16.             {
  17.                 GetObj("subb" + id_num + i).style.display = 'none';
  18.             }
  19.         }
  20.         if(GetObj("tabb" + id_num + num))
  21.         {
  22.             GetObj("tabb" + id_num + num).className = 'guide1';
  23.         }
  24.         if(GetObj("subb" + id_num + num))
  25.         {
  26.             GetObj("subb" + id_num + num).style.display = 'block';
  27.         }
  28.     }
  29.     function GetObj(objName)
  30.     {
  31.         if(document.getElementById)
  32.         {
  33.             return eval('document.getElementById("' + objName + '")');
  34.         }
  35.         else
  36.         {
  37.             return eval('document.all.' + objName);
  38.         }
  39.     }
  40. </script>
  41. <style type="text/css">
  42. .guide1 {
  43.  cursor: hand;
  44.  color: #003399;
  45.  background-color:#3399FF;
  46.  font-weight: bold;
  47.  text-decoration: none;
  48.  border-right: 1px solid #A2C0FE;
  49.  height: 25px;
  50.  line-height: 25px;
  51. }
  52. .guide2 {
  53.  cursor: hand;
  54.  border-right: 1px solid #A2C0FE;
  55.  line-height: 25px;
  56. }
  57. .24line {line-height: 24px;}
  58. .pad5 {padding:5px;}
  59. .padtop2 {padding-top:2px;}
  60. .padtop5 {padding-top:5px;}
  61. .t {border-top: 1px solid #A2C0FE;}
  62. .b {border-bottom: 1px solid #A2C0FE;}
  63. .l {border-left: 1px solid #A2C0FE;}
  64. .r {border-right: 1px solid #A2C0FE;}
  65. .right{
  66.  float:right;
  67.  color: #999999;
  68.  }
  69. .left{
  70.  float:left;
  71.  color: #999999;
  72.  }
  73. </style>
  74. </head>
  75. <body>
  76.     <form id="form1" runat="server">
  77.     <div>
  78.     <%=GetUserPanel(0) %>
  79.     </div>
  80.     </form>
  81. </body>
  82. </html>

下面是后台代码：

 

  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Collections;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI.WebControls.WebParts;
  10. using System.Web.UI.HtmlControls;
  11. using System.Text;
  12. using System.Data.SqlClient;
  13. public partial class JavaScriptMenu : System.Web.UI.Page
  14. {
  15.     protected void Page_Load(object sender, EventArgs e)
  16.     {
  17.     }
  18.     //在本页面中多次要查询数据库，为了简单起见，把对数据库的查询操作提出来作为一个单独的方法
  19.     //这个方法会根据查询SQL语句的不同而返回不同数据的DataTable
  20.     private DataTable GetDataTable(string sql)
  21.     {
  22.         SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");
  23.         SqlCommand command = new SqlCommand(sql, connection);
  24.         SqlDataAdapter adapter = new SqlDataAdapter(command);
  25.         DataTable data = new DataTable();
  26.         adapter.Fill(data);
  27.         return data;
  28.     }
  29.     /// <summary>
  30.     /// 按照UserName字段的首字母顺序查找用户，并以类似于选项卡的方式显示出来
  31.     /// 说明:在实际项目中可能一个页面要输出多个选项卡式效果，可以以不同的type来区分
  32.     /// 以达到公用一个方法的目的
  33.     /// </summary>
  34.     
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞