在学习了web服务器控件之后,现在让我们创建一个用户注册表单。此web表单接受用户输入并提交给服务器。提交后,返回注册成功的消息。整个过程包括以下步骤。
向项目添加Web表单
文章图片
文章图片
这个表单包含一些默认的html代码。
文章图片
向窗体添加控件
要向窗体添加控件,可以从工具箱中拖动组件,也可以手动编写代码来创建组件。
【asp.net web表单用户注册】下面的文件包含用户注册表单的代码。
/ / 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;
}
}
}
运行用户注册表
要运行此窗体,只需右键单击并在“浏览器”选项中选择“视图”。我们在例子中做过。
文章图片
输出:
它会产生以下输出。
文章图片
在填写表单和注册之后,它向用户显示问候消息。
文章图片
提交注册详情后。
文章图片
推荐阅读
- asp.net web表单事件处理
- asp.net datagrid数据表格
- asp.net datalist数据列表
- asp.net dropdownlist下拉列表
- asp.net session会话
- asp.net cookie使用
- asp.net下载文件
- asp.net上传多个文件
- asp.net web表单文件上传fileupload