ASP.NET - WF用户注册

ASP.NET - WF用户注册 首页 / ASP.Net MVC入门教程 / ASP.NET - WF用户注册

学习了Web服务器控件之后,现在让无涯教程创建一个用户注册表。此Web表单接受用户输入并提交给服务器。提交后,返回注册成功的消息。整个过程需要以下几个步骤。

将Web表单添加到项目中

ASP Creating user 1ASP Creating user 2

此表单包含一些默认的html代码。

ASP Creating user 3

将控件添加到表单

要向窗体添加控件,可以从工具箱中拖动组件,也可以手动编写代码来创建组件。

以下文件包含用户注册表的代码。

//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 Creating user 4

输出:

它会产生以下输出。

ASP Creating user 5

在填写表单和注册后,它会向用户显示一条问候消息。

ASP Creating user 6

之后提交注册详细信息。

ASP Creating user 7

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

玩转webpack -〔程柳锋〕

消息队列高手课 -〔李玥〕

分布式技术原理与算法解析 -〔聂鹏程〕

架构实战案例解析 -〔王庆友〕

Redis源码剖析与实战 -〔蒋德钧〕

网络排查案例课 -〔杨胜辉〕

说透低代码 -〔陈旭〕

零基础GPT应用入门课 -〔林健(键盘)〕

互联网人的数字化企业生存指南 -〔沈欣〕

好记忆不如烂笔头。留下您的足迹吧 :)