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

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

TreeView控件

MultiView控件

Javascript方式的选项卡

WiZard控件

MasterPage母板页

在我们的开发中经常会遇到一些有树形层次关系的数据，比如显示无限级分类和显示某个文件下的所有文件及文件夹，对于这些带有树形层次关系的数据的显示用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在同一个文件夹下，它的内容如下：

<?xml version="1.0" encoding="utf-8" ?>

<Area>

</Province>

</Area>

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeDemo.aspx.cs" Inherits="TreeDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>TreeView控件的例子</title>

</head>

<body>

<div>

<asp:TreeView ID="treeAreaList" runat="server" AutoGenerateDataBindings="False" OnSelectedNodeChanged="Tree_SelectedNodeChanged">

</asp:TreeView>

</div>

</form>

</body>

</html>

后台代码如下：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Xml;

using System.Xml.XPath;

public partial class TreeDemo : System.Web.UI.Page

{

XmlDocument xmlDoc;

void Page_Load() void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

MakeParentNode();

}

//生成父结点 #region //生成父结点

/// <summary>

/// 生成

/// </summary>

void MakeParentNode() void MakeParentNode()

treeAreaList.Nodes.Clear();

xmlDoc = new XmlDocument();

xmlDoc.Load(Server.MapPath("area.xml "));//动态加载XML文档

XmlNodeList nodeList = xmlDoc.SelectSingleNode("Area").ChildNodes;//获取Area节点下的所有子结点

//定义Area结点

TreeNode topNode = new TreeNode();//定义顶级节点

topNode.Text = "area ";

// tn.Value = "-1";

topNode.Expanded = true;

treeAreaList.Nodes.Add(topNode);//添加"区域"父结点

XmlElement element = null;

TreeNode treeNode = null;

//遍历区域下的所有省和直辖市

foreach (XmlNode node in nodeList)

element = (XmlElement)node;

treeNode = new TreeNode();

treeNode.Text = element.GetAttribute("cAreaName");//在树控件上显示省或直辖市的名称

treeNode.Value = element.GetAttribute("iAreaID");//获取节点值

treeNode.Expanded = true;

topNode.ChildNodes.Add(treeNode);//将省或直辖市级结点添加到顶级节点中

MakeChildNode(node.ChildNodes, treeNode);//通过递归将所有子节点添加到节点集合中

#endregion

//生成子结点 #region //生成子结点

/// 递归将子节点添加到当前节点下

/// <param name="nodeList">XmlNodeList的实例</param>

/// <param name="treeNode">要添加子节点的父节点</param>

void MakeChildNode() void MakeChildNode(XmlNodeList nodeList, TreeNode treeNode)

TreeNode subTreeNode = null;

//遍历省级节点下的所有市，市辖区

subTreeNode = new TreeNode();

subTreeNode.Text = element.GetAttribute("cAreaName");//在树控件上显示市或市辖区的名称

subTreeNode.Value = element.GetAttribute("iAreaID");//这里设置节点Value

subTreeNode.Expanded = true;

treeNode.ChildNodes.Add(subTreeNode);//将子结点添加到父结点下面

MakeChildNode(node.ChildNodes, subTreeNode);//递归调用本方法

void Tree_SelectedNodeChanged() void Tree_SelectedNodeChanged(object sender, EventArgs e)

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应用程序中的选项卡式效果。前台设计代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiViewDemo.aspx.cs" Inherits="MultiViewDemo"%>

<title>MultiView应用实例</title>

body

font-size: 11pt;

font-family: 宋体;

.mainTitle

font-size: 12pt;

font-weight: bold;

.commonText

.littleMainTitle

font-size: 10pt;

.TopTitle

border: 0px;

text-decoration: none;

color: Black;

display: inline-block;

width: 100%;

.SelectedTopTitle

width: 100%;

background-color: White;

.ContentView

padding: 3px 3px 3px 3px;

width: 390px;

.SepBorder

border-top-width: 0px;

border-left-width: 0px;

font-size: 1px;

border-bottom: Gray 1px solid;

border-right-width: 0px;

.TopBorder

border-right: Gray 1px solid;

border-top: Gray 1px solid;

background: #DCDCDC;

border-left: Gray 1px solid;

color: black;

.ContentBorder

border-top: Gray 0px solid;

height: 100%;

.SelectedTopBorder

background: none transparent scroll repeat 0% 0%;

border-bottom: Gray 0px solid;

</style>

<legend>MultiView应用实例</legend>

<tr>

<td>

<asp:LinkButton ID="lButtonCompany" runat="server" OnClick="lButtonCompany_Click">公司介绍</asp:LinkButton></td>

<asp:LinkButton ID="lButtonProduct" runat="server" OnClick="lButtonProduct_Click">产品介绍</asp:LinkButton></td>

<asp:LinkButton ID="lButtonContact" runat="server" OnClick="lButtonContact_Click">联系我们</asp:LinkButton></td>

</tr>

</table>

</td>

</tr>

<tr>

<asp:MultiView ID="mvCompany" runat="server" ActiveViewIndex="0">

<asp:View ID="View1" runat="server">

我们公司是一个正在上升时期的公司。公司目前有中科院计算机院士3人，博士后32人，博士63人，研究生120人，本科生356人，具有非常强大研发实力。</asp:View>

<asp:View ID="View2" runat="server">

我们有丰富的产品线，还可以为用户单独定制。目前有CMS文章发布系统、CRM客户资源关系管理系统、OA自动办公系统、BBS论坛系统及ERP企业资产管理系统等等，正在研发的软件有GPS车辆定位导航系统及工作流定制系统等等。</asp:View>

<asp:View ID="View3" runat="server">

本公司热烈欢迎技术界和销售界的精英加入我们的团队，待遇优厚。我们的联系方式是119，传真是110，客服电话是120，售后电话114。</asp:View>

</asp:MultiView>

</td>

</tr>

</table>

</td>

</tr>

</table>

</fieldset>

</div>

</html>

后台程序代码如下：

public partial class MultiViewDemo : System.Web.UI.Page

/// 点击公司介绍时的css设置

/// <param name="sender"></param>

/// <param name="e"></param>

void lButtonCompany_Click() void lButtonCompany_Click(object sender, EventArgs e)

mvCompany.ActiveViewIndex = 0;

Cell1.Attributes["class"] = "SelectedTopBorder";

Cell2.Attributes["class"] = "TopBorder";

Cell3.Attributes["class"] = "TopBorder";

/// 点击产品介绍时的css设置

void lButtonProduct_Click() void lButtonProduct_Click(object sender, EventArgs e)

mvCompany.ActiveViewIndex = 1;

Cell1.Attributes["class"] = "TopBorder";

Cell2.Attributes["class"] = "SelectedTopBorder";

/// 点击联系我们时的css设置

void lButtonContact_Click() void lButtonContact_Click(object sender, EventArgs e)

mvCompany.ActiveViewIndex = 2;

Cell3.Attributes["class"] = "SelectedTopBorder";

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

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

“公司介绍”效果

“产品介绍”效果

“联系我们”效果

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

下面是一个用javascript来实现的选项卡式效果的例子，完全采用输出HTML代码的方式。在这个例子中我们通过css和div来控制当前活动选项卡和非活动选项卡的显示与否及显示样式，疑难部分笔者都做了详尽注释，读者朋友完全可以根据自己的实际需要把代码改造成自己想要的效果。

以下是设计部分代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptMenu.aspx.cs" Inherits="JavaScriptMenu" %>

<title>JavaScript实现的选项卡式效果</title>

function Show_Sub(id_num,num,obj)

{

for(var i = 0;i <= 9;i++)

if(GetObj("tabb" + id_num + i))

{

GetObj("tabb" + id_num + i).className = 'guide2';

}

if(GetObj("subb" + id_num + i))

GetObj("subb" + id_num + i).style.display = 'none';

if(GetObj("tabb" + id_num + num))

GetObj("tabb" + id_num + num).className = 'guide1';

if(GetObj("subb" + id_num + num))

GetObj("subb" + id_num + num).style.display = 'block';

function GetObj(objName)

if(document.getElementById)

return eval('document.getElementById("' + objName + '")');

else

return eval('document.all.' + objName);

</script>

.guide1 {

cursor: hand;

color: #003399;

background-color:#3399FF;

font-weight: bold;

text-decoration: none;

border-right: 1px solid #A2C0FE;

height: 25px;

line-height: 25px;

.guide2 {

.24line {line-height: 24px;}

.pad5 {padding:5px;}

.padtop2 {padding-top:2px;}

.padtop5 {padding-top:5px;}

.t {border-top: 1px solid #A2C0FE;}

.b {border-bottom: 1px solid #A2C0FE;}

.l {border-left: 1px solid #A2C0FE;}

.r {border-right: 1px solid #A2C0FE;}

.right{

float:right;

color: #999999;

.left{

float:left;

</style>

<%=GetUserPanel(0) %>

下面是后台代码：

using System.Text;

using System.Data.SqlClient;

public partial class JavaScriptMenu : System.Web.UI.Page

protected void Page_Load(object sender, EventArgs e)

//在本页面中多次要查询数据库，为了简单起见，把对数据库的查询操作提出来作为一个单独的方法

//这个方法会根据查询SQL语句的不同而返回不同数据的DataTable

private DataTable GetDataTable(string sql)

SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");

SqlCommand command = new SqlCommand(sql, connection);

SqlDataAdapter adapter = new SqlDataAdapter(command);

DataTable data = new DataTable();

adapter.Fill(data);

return data;

/// <summary>

/// 按照UserName字段的首字母顺序查找用户，并以类似于选项卡的方式显示出来

/// 说明:在实际项目中可能一个页面要输出多个选项卡式效果，可以以不同的type来区分

/// 以达到公用一个方法的目的

/// </summary>

/// <param name="type">类别编号</param>

/// <returns></returns>

public string GetUserPanel(int type)

//因为多次需要操作字符串，为提高性能使用了System.Text.StringBuilder类而非string类

StringBuilder text = new StringBuilder(4096);

//表头

text.AppendLine("");

text.AppendLine("<table width=\"400\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");

text.AppendLine("<tr>");

text.AppendLine("<td height=\"168\" valign=\"top\" class=\"padtop2\"><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");

text.AppendLine("<td height=\"168\" valign=\"top\" class=\"pad5 24line b l t r\">\n<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");

text.AppendLine("<td><table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"l t b\">\n");

//这里仅列出UserName字段首字母为'c','d','l','z'的用户

char[] firstChar=new char[]{'c','d','l','z'};

#region 输出选项卡标签

for (int i = 0; i < firstChar.Length; i++)

text.AppendLine("<td class=\"guide" + ((i + 1) >= 2 ? 2 : 1) + "\" id=\"tabb" + type + "" + i + "\" + type + "," + i + ",this) align=\"center\">" + firstChar[i] + "</td>");

}

#endregion

text.AppendLine("</tr></table>");

text.AppendLine("</td></tr><tr><td class=\"padtop5\">");

#region 输出每个选项卡下的用户

if (i == 0)

text.AppendLine("<div id=\"subb" + type + i + "\" class=\"24line\">\n");

else

text.AppendLine("<div id=\"subb" + type + i + "\" style=\"DISPLAY: none\" class=\"24line\">\n");

DataTable dataPersonList = GetDataTable("select UserName,RealName from UserInfo where UserName like '" + firstChar[i] + "%'");

DataRow row = null;

//输出每个用户的信息

for (int j = 0; j < dataPersonList.Rows.Count; j++)

row = dataPersonList.Rows[j];

text.AppendLine("<div class=\"left\">" + row["UserName"].ToString() + "</div>");

text.Append("<div class=\"right\">" + row["RealName"].ToString() + "</div>");

text.AppendLine("</br>");

text.AppendLine("</div>");

text.AppendLine("</td>\n</tr>\n</table>\n</td>\n</tr></table></td></tr></table>");

text.AppendLine("");

return text.ToString();

这个程序显示效果如下：

点击“z”选项卡时的效果：

用Javascript实现的选项卡式效果比用MultiView控件实现同样的效果要复杂很多，但是它有一个有点就是在选项卡之间切换时不用每次刷新页面和读取数据库。

WiZard控件

WiZard控件非常类似于我们常见的Windows中的向导控件，用于分步骤收集用户提交的数据。

下面是拖入一个WiZard控件到空白页面的效果：

和MultiView类似，WiZard是一个WizardStepBase的容器，每个WizardStepBase类似于一个View。与MultiView不同的是，WizardStepBase上显示有上下步骤之间的导航，我们可以控制当前WizardStepBase中的导航样式，这可以通过WizardStepBase的StepType属性来控制。如果进行设置，那么每个WizardStepBase的StepType属性为Auto。下面列出了WizardStepBase的StepType属性的所有可能值：

StepType值显示行为和结果

WizardStepType.Auto 由声明该WizardStepBase的顺序决定

WizardStepType.Complete 整个步骤最后一步，不显示任何导航按钮

WizardStepType.Finish 收集数据的最后一步，显示“完成”导航按钮

WizardStepType.Start 要显示的第一个步骤，不显示“上一步”导航按钮

WizardStepType.Step 介于第一个和最后一个步骤，显示“上一步”、“下一步”按钮

本文转自周金桥51CTO博客，原文链接：http://blog.51cto.com/zhoufoxcn/166455 ，如需转载请自行联系原作者

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

继续阅读

tab鼠标经过菜单切换

XX系统实施过程问题总结

vue （vue2.0）使用总结(从大体结构总结)

无组件上传图片到数据库中，最完整解决方案

vue搭建过程及出现问题

【MySQL数据库】数据库索引事务1.索引2.事务

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

neo4j之cypher使用文档

适用于JavaScript的ECMAScript 2020规范向前发展

NOSQL安全攻击

mybatis_入门程序Mybatis入门

JS生成uuid的四种方法

登录plsql 报错 the account is locked --用户被锁

sqlServer根据经纬查距离

SequoiaDB巨杉数据库C++驱动概述

layui多任务上传添加进度条