在asp.net中有两种容器控件，其中包括panel和placeholder控件。
使用panel控件可以对控件进行分组。一帮助组织web窗体也的内容，将控件组织在面板中，可提供有关在运行时控件应如何分页显示的信息。这里也就是我们所说的在一个页面中通过“提交”或“下一步”按钮来显示不同的虚假页面，即通过隐藏可以实现，还有panel的外观属性，来设置panel的外观特性。
简单的用户注册流程图：
html代码：
<%@ Page Language=
"C#" AutoEventWireup=
"true" CodeBehind=
"Default.aspx.cs" Inherits=
"容器控件._Default"%>
<!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>用户注册流程图</title>
<style type="text/css">
.style1
{
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Groove" Height="333px"
style="text-align: center" Width="909px"><h1>用户注册</h1>
<table style="height: 218px">
<tr id="Tr1" runat="server">
<td>用户名：</td>
<td><asp:TextBox runat="server" ID="username"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="username" Display="Dynamic" ErrorMessage="请正确输入用户名"></asp:RequiredFieldValidator><! 对用户输入的信息进行非空验证，并为动态显示，如验证不通过弹出”请输入用户名“>
</td>
</tr>
<tr>
<td>密码：</td>
<td><asp:TextBox runat="server" ID="password1" TextMode="Password"></asp:TextBox> </td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="password1" Display="Dynamic" ErrorMessage="请输入密码！"></asp:RequiredFieldValidator><! 对密码进行非空验证，并为动态显示，错误时提示：请输入密码>
</td>
</tr>
<tr>
<td>密码确认：</td>
<td><asp:TextBox runat="server" ID="password2" TextMode="Password"></asp:TextBox></td>
<td>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToCompare="password1" ControlToValidate="password2" Display="Dynamic"
ErrorMessage="请确认密码正确性"></asp:CompareValidator><!这里的controltocompare是对第一次输入的密码进行比较，测试十分保持一致>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<asp:RadioButton Text="男" ID="rd1" runat="server" GroupName="1" /><!groupname必须相同>
<asp:RadioButton Text="女" ID="rd2" runat="server" GroupName="1" />
</td>
<td></td>
</tr>
<tr>
<td>联系电话：</td>
<td><asp:TextBox runat="server" ID="telephone"></asp:TextBox></td><!正则表达式偶还没学>
<td>
<asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="请输入电话号码"
MaximumValue="199999999999" MinimumValue="0"
ControlToValidate="telephone"></asp:RangeValidator><!比较粗糙的定义范围,最小值为0.，最大值为19999999999>
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<asp:CheckBox runat="server" ID="cb1" Text="篮球" />
<asp:CheckBox runat="server" ID="cb2" Text="足球" />
<asp:CheckBox runat="server" ID="cb3" Text="排球" />
<asp:CheckBox runat="server" ID="cb4" Text="读书" />
</td>
<td></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
</td>
<td></td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="下一步" onclick="Button1_Click" />
<br />
<br />
</asp:Panel>
</div><br/>
<asp:Panel ID="Panel2" runat="server" BorderStyle="Groove" Height="270px"
Visible="False"><h3 style="text-align: center">确认信息</h3>
<p style="text-align: center">
用户名：<asp:Label ID="xusername" runat="server" Text="Label" Width="161px"></asp:Label>
</p>
<p style="text-align: center">
密码：<asp:Label ID="xpassword" runat="server" Text="Label" Width="161px"></asp:Label>
</p>
<p style="text-align: center">
联系电话：<asp:Label ID="xtelephone" runat="server" Text="Label" Width="161px"></asp:Label>
</p>
<p style="text-align: center">
兴趣爱好：<asp:Label ID="xaihao" runat="server" Text="Label" Width="161px"></asp:Label>
</p>
<p style="text-align: center">
<asp:Button ID="Button2" runat="server" Text="下一步" onclick="Button2_Click" />
</p>
</asp:Panel>
<asp:Panel ID="Panel3" runat="server" Height="411px" Width="920px">
<h1 class="style1">恭喜您注册成功</h1>
<p class="style1">
请切记您账号和密码：</p>
<p style="text-align: center">
用户名：<asp:Label ID="Label1" runat="server" Text="Label" Width="161px"></asp:Label>
</p>
<p style="text-align: center">
密码：<asp:Label ID="Label2" runat="server" Text="Label" Width="161px"></asp:Label>
</p>
<p class="style1">
</p>
</asp:Panel>
</form>
</body>
</html>
后台c#代码：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace 容器控件
{
public partial
class _Default : System.Web.UI.Page
{
protected
void Page_Load(
object sender, EventArgs e)
{
this.Panel3.Visible = false; //放在这里实在页面加载时就把panel3隐藏
}
protected void Button1_Click( object sender, EventArgs e)
{
this.Panel1.Visible =
false;
//点击按钮“下一步”是panel1隐藏
this.Panel2.Visible =
true;
//同时panel2显示出来
this.xusername.Text =
this.username.Text;
//把用户的信息放到自定义的label中，感觉很麻烦，希望会有更好的办法
this.xpassword.Text =
this.password1.Text;
this.xtelephone.Text =
this.telephone.Text;
}
protected void Button2_Click( object sender, EventArgs e)
{
this.Panel2.Visible =
false;
//点击按钮“下一步”是panel2隐藏
this.Panel3.Visible =
true;
//同时panel3显示出来
}
}
}
使用panel控件可以对控件进行分组。一帮助组织web窗体也的内容，将控件组织在面板中，可提供有关在运行时控件应如何分页显示的信息。这里也就是我们所说的在一个页面中通过“提交”或“下一步”按钮来显示不同的虚假页面，即通过隐藏可以实现，还有panel的外观属性，来设置panel的外观特性。
简单的用户注册流程图：
html代码：
<%@ Page Language=
"C#" AutoEventWireup=
"true" CodeBehind=
"Default.aspx.cs" Inherits=
"容器控件._Default"%>
<!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>用户注册流程图</title> <style type="text/css"> .style1 { text-align: center; } </style></head><body> <form id="form1" runat="server"> <div> <asp:Panel ID="Panel1" runat="server" BorderStyle="Groove" Height="333px" style="text-align: center" Width="909px"><h1>用户注册</h1> <table style="height: 218px"><tr id="Tr1" runat="server"><td>用户名：</td><td><asp:TextBox runat="server" ID="username"></asp:TextBox></td><td> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="username" Display="Dynamic" ErrorMessage="请正确输入用户名"></asp:RequiredFieldValidator><! 对用户输入的信息进行非空验证，并为动态显示，如验证不通过弹出”请输入用户名“> </td></tr><tr><td>密码：</td><td><asp:TextBox runat="server" ID="password1" TextMode="Password"></asp:TextBox> </td><td> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="password1" Display="Dynamic" ErrorMessage="请输入密码！"></asp:RequiredFieldValidator><! 对密码进行非空验证，并为动态显示，错误时提示：请输入密码> </td></tr><tr><td>密码确认：</td><td><asp:TextBox runat="server" ID="password2" TextMode="Password"></asp:TextBox></td><td> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="password1" ControlToValidate="password2" Display="Dynamic" ErrorMessage="请确认密码正确性"></asp:CompareValidator><!这里的controltocompare是对第一次输入的密码进行比较，测试十分保持一致> </td></tr><tr><td>性别：</td><td><asp:RadioButton Text="男" ID="rd1" runat="server" GroupName="1" /><!groupname必须相同><asp:RadioButton Text="女" ID="rd2" runat="server" GroupName="1" /></td><td></td></tr><tr><td>联系电话：</td><td><asp:TextBox runat="server" ID="telephone"></asp:TextBox></td><!正则表达式偶还没学><td> <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="请输入电话号码" MaximumValue="199999999999" MinimumValue="0" ControlToValidate="telephone"></asp:RangeValidator><!比较粗糙的定义范围,最小值为0.，最大值为19999999999> </td></tr><tr><td>兴趣爱好：</td><td><asp:CheckBox runat="server" ID="cb1" Text="篮球" /><asp:CheckBox runat="server" ID="cb2" Text="足球" /><asp:CheckBox runat="server" ID="cb3" Text="排球" /><asp:CheckBox runat="server" ID="cb4" Text="读书" /></td><td></td></tr><tr><td colspan="2" style="text-align: center"> </td><td></td></tr></table> <asp:Button ID="Button1" runat="server" Text="下一步" onclick="Button1_Click" /> <br /> <br /> </asp:Panel> </div><br/> <asp:Panel ID="Panel2" runat="server" BorderStyle="Groove" Height="270px" Visible="False"><h3 style="text-align: center">确认信息</h3> <p style="text-align: center"> 用户名：<asp:Label ID="xusername" runat="server" Text="Label" Width="161px"></asp:Label> </p> <p style="text-align: center"> 密码：<asp:Label ID="xpassword" runat="server" Text="Label" Width="161px"></asp:Label> </p> <p style="text-align: center"> 联系电话：<asp:Label ID="xtelephone" runat="server" Text="Label" Width="161px"></asp:Label> </p> <p style="text-align: center"> 兴趣爱好：<asp:Label ID="xaihao" runat="server" Text="Label" Width="161px"></asp:Label> </p> <p style="text-align: center"> <asp:Button ID="Button2" runat="server" Text="下一步" onclick="Button2_Click" /> </p> </asp:Panel> <asp:Panel ID="Panel3" runat="server" Height="411px" Width="920px"> <h1 class="style1">恭喜您注册成功</h1> <p class="style1"> 请切记您账号和密码：</p> <p style="text-align: center"> 用户名：<asp:Label ID="Label1" runat="server" Text="Label" Width="161px"></asp:Label> </p> <p style="text-align: center"> 密码：<asp:Label ID="Label2" runat="server" Text="Label" Width="161px"></asp:Label> </p> <p class="style1"> </p> </asp:Panel> </form></body></html>后台c#代码：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace 容器控件
{
public partial
class _Default : System.Web.UI.Page
{
protected
void Page_Load(
object sender, EventArgs e)
{
this.Panel3.Visible = false; //放在这里实在页面加载时就把panel3隐藏
}
protected void Button1_Click( object sender, EventArgs e)
{
this.Panel1.Visible =
false;
//点击按钮“下一步”是panel1隐藏
this.Panel2.Visible =
true;
//同时panel2显示出来
this.xusername.Text =
this.username.Text;
//把用户的信息放到自定义的label中，感觉很麻烦，希望会有更好的办法
this.xpassword.Text =
this.password1.Text;
this.xtelephone.Text =
this.telephone.Text;
}
protected void Button2_Click( object sender, EventArgs e)
{
this.Panel2.Visible =
false;
//点击按钮“下一步”是panel2隐藏
this.Panel3.Visible =
true;
//同时panel3显示出来
}
}
}
整个流程图比较简单，运用的主要是textbox控件，label控件，验证控件，Button控件，panel容器控件，其中验证空间运用的比较粗糙，继续改进。
本文转自shenzhoulong 51CTO博客，原文链接：http://blog.51cto.com/shenzhoulong/296058，如需转载请自行联系原作者
