备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2017-11-16 1038
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
        本篇要讲述的知识点如下：
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在同一个文件夹下，它的内容如下：
<? xml  version ="1.0"  encoding ="utf-8"  ?> 
< Area > 
     < Province iAreaID  ="1"  cAreaName ="北京市" /> 
     < Province iAreaID  ="2"  cAreaName ="上海市" /> 
     < Province iAreaID  ="3"  cAreaName ="天津市" /> 
     < Province iAreaID  ="4"  cAreaName ="重庆市" /> 
     < Province iAreaID  ="5"  cAreaName ="湖北省" > 
         < City iAreaID  ="51"  cAreaName ="武汉市" /> 
         < City iAreaID  ="52"  cAreaName ="黄冈市"  /> 
         < City iAreaID  ="53"  cAreaName ="荆州市" /> 
         < City iAreaID  ="54"  cAreaName ="武穴市"  /> 
         < City iAreaID  ="55"  cAreaName ="十堰市" /> 
         < City iAreaID  ="56"  cAreaName ="黄石市"  /> 
     </ Province > 
     < Province iAreaID  ="6"  cAreaName ="河北省" > 
         < City iAreaID  ="61"  cAreaName ="石家庄市" /> 
         < City iAreaID  ="62"  cAreaName ="唐山市"  /> 
     </ Province > 
     < Province iAreaID  ="7"  cAreaName ="山西省" > 
         < City iAreaID  ="71"  cAreaName ="太原市"  /> 
         < City iAreaID  ="72"  cAreaName ="大同市"  /> 
     </ 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" > 
< html  xmlns ="http://www.w3.org/1999/xhtml"  > 
< head  runat ="server" > 
         < title >TreeView控件的例子 </title> 
</head> 
< body > 
         < form  id ="form1"  runat ="server" > 
         < 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    //生成子结点    
        /// <summary>    
        /// 递归将子节点添加到当前节点下    
        /// </summary>    
        /// <param name= "nodeList">XmlNodeList的实例</param>    
        /// <param name= "treeNode">要添加子节点的父节点</param>    
void MakeChildNode() void MakeChildNode(XmlNodeList nodeList, TreeNode treeNode) 
        { 
                XmlElement element =  null; 
                TreeNode subTreeNode =  null; 
                //遍历省级节点下的所有市，市辖区     
                foreach (XmlNode node  in nodeList) 
                { 
                        element = (XmlElement)node; 
                        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);//递归调用本方法    
                } 
        }    
        #endregion    
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"% > 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml"  > 
< head  runat ="server" > 
         < title >MultiView应用实例 </title> 
         < style  type ="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: 3px 3px 3px 3px; 
        background-color: White; 
        display: inline-block; 
        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; 
        border-bottom: Gray 1px solid; 
} 
.ContentBorder 
{ 
        border-right: Gray 1px solid; 
        border-top: Gray 0px solid; 
        border-left: Gray 1px solid; 
        border-bottom: Gray 1px solid; 
        height: 100%; 
        width: 100%; 
} 
.SelectedTopBorder 
{ 
        border-right: Gray 1px solid; 
        border-top: Gray 1px solid; 
        background: none transparent scroll repeat 0% 0%; 
        border-left: Gray 1px solid; 
        color: black; 
        border-bottom: Gray 0px solid; 
} 
         </style> 
</head> 
< body > 
         < form  id ="form1"  runat ="server" > 
         < div > 
         < fieldset  style ="width:400px" > 
                         < legend >MultiView应用实例 </legend> 
                         < table  cellpadding ="0"  cellspacing ="0"  width ="100%"  border ="0" > 
                                 < tr > 
                                         < td > 
                                                 < table  id ="Table1"  runat ="server"  cellpadding ="0"  cellspacing ="0"  width ="100%" border ="0" > 
                                                         < tr  style ="height:22px" > 
                                                                 < td  class ="SelectedTopBorder"  id ="Cell1"  align ="center"  style ="width:80px;" > 
                                                                         < asp:LinkButton  ID ="lButtonCompany"  runat ="server"  OnClick ="lButtonCompany_Click" >公司介绍 </asp:LinkButton> </td> 
                                                                 < td  class ="SepBorder"  style ="width:2px; height: 22px;" > </td> 
                                                                 < td  class ="TopBorder"  id ="Cell2"  align ="center"  style ="width:80px;" > 
                                                                         < asp:LinkButton  ID ="lButtonProduct"  runat ="server"  OnClick ="lButtonProduct_Click" >产品介绍 </asp:LinkButton> </td> 
                                                                 < td  class ="SepBorder"  style ="width:2px; height: 22px;" > </td> 
                                                                 < td  class ="TopBorder"  id ="Cell3"  align ="center"  style ="width:80px;" > 
                                                                         < asp:LinkButton  ID ="lButtonContact"  runat ="server"  OnClick ="lButtonContact_Click" >联系我们 </asp:LinkButton> </td> 
                                                                 < td  class ="SepBorder"  style ="width:2px; height: 22px;" > </td> 
                                                         </tr> 
                                                 </table> 
                                         </td> 
                                 </tr> 
                                 < tr > 
                                         < td > 
                                                 < table  class ="ContentBorder"  cellpadding ="0"  cellspacing ="0"  width ="100%" > 
                                                             < tr > 
                                                                     < td  valign ="top" > 
                                                                             < 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> 
         </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; 
public partial  class MultiViewDemo : System.Web.UI.Page 
{ 
void Page_Load() void Page_Load(object sender, EventArgs e) 
        { 
        } 
        /// <summary>    
        /// 点击公司介绍时的css设置    
        /// </summary>    
        /// <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"; 
        } 
        /// <summary>    
        /// 点击产品介绍时的css设置    
        /// </summary>    
        /// <param name= "sender"></param>    
        /// <param name= "e"></param>    
void lButtonProduct_Click() void lButtonProduct_Click(object sender, EventArgs e) 
        { 
                mvCompany.ActiveViewIndex = 1; 
                Cell1.Attributes[ "class"] =  "TopBorder"; 
                Cell2.Attributes[ "class"] =  "SelectedTopBorder"; 
                Cell3.Attributes[ "class"] =  "TopBorder"; 
        } 
        /// <summary>    
        /// 点击联系我们时的css设置    
        /// </summary>    
        /// <param name= "sender"></param>    
        /// <param name= "e"></param>    
void lButtonContact_Click() void lButtonContact_Click(object sender, EventArgs e) 
        { 
                mvCompany.ActiveViewIndex = 2; 
                Cell1.Attributes[ "class"] =  "TopBorder"; 
                Cell2.Attributes[ "class"] =  "TopBorder"; 
                Cell3.Attributes[ "class"] =  "SelectedTopBorder"; 
        } 
} 
        页面在设计视图状态下的效果：
        下面分别是点击“公司介绍”、“产品介绍”及“联系我们”时的效果。
“公司介绍”效果
        “产品介绍”效果
        “联系我们”效果
        因为在上面的实现方式中每次点击都会引起向服务器回传，在实际项目中有时候也会采用javascript来实现类似的选项卡式效果。用javascript实现选项卡式效果比使用MultiView控件实现选项卡式效果要复杂一些，因为要编写一些客户端脚本代码。
下面是一个用javascript来实现的选项卡式效果的例子，完全采用输出HTML代码的方式。在这个例子中我们通过css和div来控制当前活动选项卡和非活动选项卡的显示与否及显示样式，疑难部分笔者都做了详尽注释，读者朋友完全可以根据自己的实际需要把代码改造成自己想要的效果。
        以下是设计部分代码：
< %@ Page  Language ="C#"  AutoEventWireup ="true"  CodeFile ="JavaScriptMenu.aspx.cs"  Inherits ="JavaScriptMenu" % > 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml"  > 
< head  runat ="server" > 
         < title >JavaScript实现的选项卡式效果 </title> 
         < script  language ="javascript"  type ="text/javascript" > 
        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> 
< style  type ="text/css" > 
.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 { 
cursor: hand; 
border-right: 1px solid #A2C0FE; 
line-height: 25px; 
} 
.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; 
color: #999999; 
} 
</style> 
</head> 
< body > 
         < form  id ="form1"  runat ="server" > 
         < div > 
         < %=GetUserPanel(0) % > 
         </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.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(" < ! --------start----- >"); 
                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(" < tr >"); 
                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(" < tr >"); 
                text.AppendLine(" < td > < table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"l t b\" >\n"); 
                text.AppendLine(" < tr >"); 
                //这里仅列出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 输出每个选项卡下的用户    
                for (int i = 0; i < firstChar.Length; i++) 
                { 
                        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>"); 
                }    
                #endregion    
                text.AppendLine(" </td>\n </tr>\n </table>\n </td>\n </tr> </table> </td> </tr> </table>"); 
                text.AppendLine(" < ! ------end--- >"); 
                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  ，如需转载请自行联系原作者

文章标签：
.NET
数据格式
XML
C#
JavaScript
前端开发
容器
SQL
数据库
开发框架
关键词：
ASP.NET控件
ASP控件
.NET控件
技术小甜
目录
相关文章
红目香薰
|
2月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
红目香薰
32 0
亚丁号
|
3月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
亚丁号
29 0
_揽
|
4月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
_揽
41 0
_揽
|
4月前
|
JavaScript Linux C#
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
_揽
65 0
Zh.晨光
|
4月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
Zh.晨光
27 0
Zh.晨光
|
4月前
|
开发框架 JavaScript .NET
Asp.Net就业课之三验证控件
Asp.Net就业课之三验证控件
Zh.晨光
44 0
Zh.晨光
|
4月前
|
开发框架 .NET
Asp.Net就业课堂之模板控件
Asp.Net就业课堂之模板控件
Zh.晨光
38 1
空白_d
|
4月前
|
XML 数据可视化 数据库
VB.NET—DataGridView控件教程详解
VB.NET—DataGridView控件教程详解
空白_d
135 0
技术小结
|
10月前
|
开发框架 JavaScript .NET
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...（续）
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...（续）
技术小结
88 0
技术小结
|
10月前
|
开发框架 JavaScript 前端开发
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...
技术小结
62 0

热门文章

最新文章

  • 1
    三款.NET 代码混淆工具比较分析：ConfuserEx、Obfuscar 和 Ipa Guard
  • 2
    深入.net平台的分层开发
  • 3
    C#/.NET/.NET Core优秀项目和框架2024年3月简报
  • 4
    【干货】Java开发者快速上手.NET指南
  • 5
    MQTT常见问题之调用.net sdk 报“不知道这样的主机”如何解决
  • 6
    .NET智慧手术室管理平台源码
  • 7
    .NET开源、免费、强大的交互式绘图库
  • 8
    .NET开源免费、功能强大的 Windows 截图录屏神器
  • 9
    .NET开源、免费、跨平台的Git可视化管理工具
  • 10
    .NET从入门到精通，零基础也能搞定的基础知识教程
  • 1
    ASP.NET体检中心源码，实现检前、检中、检后全流程管理
    35
  • 2
    C# .NET面试系列七：ASP.NET Core
    60
  • 3
    C# .NET面试系列六：ASP.NET MVC
    95
  • 4
    ASP.NET云LIS区域检验云SaaS平台源码
    45
  • 5
    ASP.NET实验室LIS系统源码 Oracle数据库
    35
  • 6
    ASP.NETMVC数据库完整CRUD操作示例
    29
  • 7
    ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点：查询列表、增加、删除)
    67
  • 8
    ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
    32
  • 9
    ASP.NET WEB——项目中Cookie与Session的用法
    29
  • 10
    ASP.NET WEB——项目创建与文件上传操作
    46

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • WEB网页编程实战
    • 下一篇
    阿里云oss简介和使用流程