天天看点

c# asp.net 用户注册流程图(7)

在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>

                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"

                                ControlToValidate="password1" Display="Dynamic" ErrorMessage="请输入密码!"></asp:RequiredFieldValidator><! 对密码进行非空验证,并为动态显示,错误时提示:请输入密码>

                                                </td>

<td>密码确认:</td>

<td><asp:TextBox runat="server" ID="password2" TextMode="Password"></asp:TextBox></td>

                <asp:CompareValidator ID="CompareValidator1" runat="server"

                                ControlToCompare="password1" ControlToValidate="password2" Display="Dynamic"

                                ErrorMessage="请确认密码正确性"></asp:CompareValidator><!这里的controltocompare是对第一次输入的密码进行比较,测试十分保持一致>

<td>性别:</td>

<asp:RadioButton Text="男" ID="rd1" runat="server" GroupName="1" /><!groupname必须相同>

<asp:RadioButton Text="女" ID="rd2" runat="server" GroupName="1" />

</td>

<td></td>

<td>联系电话:</td>

<td><asp:TextBox runat="server" ID="telephone"></asp:TextBox></td><!正则表达式偶还没学>

        <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="请输入电话号码" 

                MaximumValue="199999999999" MinimumValue="0" 

                ControlToValidate="telephone"></asp:RangeValidator><!比较粗糙的定义范围,最小值为0.,最大值为19999999999>

        </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 colspan="2" style="text-align: center">

                 </td>

</table>

                        <asp:Button ID="Button1" runat="server" Text="下一步" onclick="Button1_Click" />

                        <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>

                        密码:<asp:Label ID="xpassword" runat="server" Text="Label" Width="161px"></asp:Label>

                        联系电话:<asp:Label ID="xtelephone" runat="server" Text="Label" Width="161px"></asp:Label>

                        兴趣爱好:<asp:Label ID="xaihao" runat="server" Text="Label" Width="161px"></asp:Label>

                        <asp:Button ID="Button2" runat="server" Text="下一步" onclick="Button2_Click" />

        </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>

                        密码:<asp:Label ID="Label2" runat="server" Text="Label" Width="161px"></asp:Label>

                         </p>

        </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,如需转载请自行联系原作者