学习了Web服务器控件之后,现在让无涯教程创建一个用户注册表。此Web表单接受用户输入并提交给服务器。提交后,返回注册成功的消息。整个过程需要以下几个步骤。
将Web表单添加到项目中
此表单包含一些默认的html代码。
将控件添加到表单
要向窗体添加控件,可以从工具箱中拖动组件,也可以手动编写代码来创建组件。
以下文件包含用户注册表的代码。
//WebControls.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebControls.aspx.cs" Inherits="WebFormsControlls.WebControls" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .auto-style1 { width: 100%; } .auto-style2 { width: 278px; } .auto-style3 { width: 278px; height: 23px; } .auto-style4 { height: 23px; } </style> </head> <body> <form id="form1" runat="server"> <div> <table class="auto-style1"> <tr> <td> <asp:Label ID="Label1" runat="server" Text="User Name"></asp:Label> </td> <td> <asp:TextBox ID="username" runat="server" required="true"></asp:TextBox></td> </tr> <tr> <td> <asp:Label ID="Label6" runat="server" Text="Email ID"></asp:Label> </td> <td> <asp:TextBox ID="EmailID" runat="server" TextMode="Email"></asp:TextBox></td> </tr> <tr> <td> <asp:Label ID="Label2" runat="server" Text="Password"></asp:Label></td> <td> <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td> </tr> <tr> <td> <asp:Label ID="Label3" runat="server" Text="Confirm Password"></asp:Label></td> <td> <asp:TextBox ID="TextBox3" runat="server" TextMode="Password"></asp:TextBox></td> </tr> <tr> <td> <asp:Label ID="Label4" runat="server" Text="Gender"></asp:Label></td> <td> <asp:RadioButton ID="RadioButton1" runat="server" GroupName="gender" Text="Male" /> <asp:RadioButton ID="RadioButton2" runat="server" GroupName="gender" Text="Female" /></td> </tr> <tr> <td> <asp:Label ID="Label5" runat="server" Text="Select Course"></asp:Label>s</td> <td> <asp:CheckBox ID="CheckBox1" runat="server" Text="J2SEE" /> <asp:CheckBox ID="CheckBox2" runat="server" Text="J2EE" /> <asp:CheckBox ID="CheckBox3" runat="server" Text="Spring Framework" /> </td> </tr> <tr> <td> </td> <td> <br /> <asp:Button ID="Button1" runat="server" Text="Register" CssClass="btn btn-primary" OnClick="Button1_Click"/> </td> </tr> </table> <asp:Label ID="message" runat="server" Font-Size="Medium" ForeColor="Red"></asp:Label> </div> </form> <table class="auto-style1"> <tr> <td class="auto-style2"><asp:Label ID="ShowUserNameLabel" runat="server" ></asp:Label></td> <td> <asp:Label ID="ShowUserName" runat="server" ></asp:Label></td> </tr> <tr> <td class="auto-style2"><asp:Label ID="ShowEmailIDLabel" runat="server" ></asp:Label></td> <td> <asp:Label ID="ShowEmail" runat="server" ></asp:Label></td> </tr> <tr> <td class="auto-style3"><asp:Label ID="ShowGenderLabel" runat="server" ></asp:Label></td> <td class="auto-style4"> <asp:Label ID="ShowGender" runat="server" ></asp:Label></td> </tr> <tr> <td class="auto-style2"><asp:Label ID="ShowCourseLabel" runat="server" ></asp:Label></td> <td> <asp:Label ID="ShowCourses" runat="server" ></asp:Label></td> </tr> </table> </body> </html>
处理提交请求
在代码隐藏文件中,添加了一条消息,该消息仅在用户提交注册表单时触发。此文件包括以下代码。
//WebControls.aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebFormsControlls { public partial class WebControls : System.Web.UI.Page { protected System.Web.UI.HtmlControls.HtmlInputFile File1; protected System.Web.UI.HtmlControls.HtmlInputButton Submit1; protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { message.Text = "Hello " + username.Text + " ! "; message.Text = message.Text + " <br/> You have successfuly Registered with the following details."; ShowUserName.Text = username.Text; ShowEmail.Text = EmailID.Text; if (RadioButton1.Checked) { ShowGender.Text = RadioButton1.Text; } else ShowGender.Text = RadioButton2.Text; var courses = ""; if (CheckBox1.Checked) { courses = CheckBox1.Text + " "; } if (CheckBox2.Checked) { courses += CheckBox2.Text + " "; } if (CheckBox3.Checked) { courses += CheckBox3.Text; } ShowCourses.Text = courses; ShowUserNameLabel.Text = "User Name"; ShowEmailIDLabel.Text = "Email ID"; ShowGenderLabel.Text = "Gender"; ShowCourseLabel.Text = "Courses"; username.Text = ""; EmailID.Text = ""; RadioButton1.Checked = false; RadioButton2.Checked = false; CheckBox1.Checked = false; CheckBox2.Checked = false; CheckBox3.Checked = false; } } }
运行用户注册表
若要运行此表单,只需右键单击并选择在浏览器中查看选项。
输出:
它会产生以下输出。
在填写表单和注册后,它会向用户显示一条问候消息。
之后提交注册详细信息。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)