ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程

简介: 原文:ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 用户注册 上一章节我们终于迁移完了 Identity 的数据,也创建了用户表,现在,磨拳擦掌,是时候把注册功能给完善了。

原文:ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程

ASP.NET Core 用户注册

上一章节我们终于迁移完了 Identity 的数据,也创建了用户表,现在,磨拳擦掌,是时候把注册功能给完善了。当然了,要实现登录功能得先有个用户,添加用户的方法很多,但是,我们还是先实现一个用户注册功能吧

本章节我们先来实现一个用户注册的功能,注册用户的 URL 为 /Account/Signup,也就是添加一个 AccountController 控制器,然后再实现一个 Signup 的动作方法,这也是为了以后匹配登录动作的 URL /Account/Login

  1. 首先在 Controllers 目录下新建一个 AccountController.cs 文件,创建方法和当初创建 AbountController.cs 一样

    创建完成后目录结构如下

    AccountController.cs 中的默认内容如下

    using System;
    namespace HelloWorld.Controllers
    {
        public class AccountController
        {
            public AccountController()
            {
            }
        }
    }
    
  2. 修改 AccountController.cs 引入命名空间 Microsoft.AspNetCore.Mvc,并让 AccountController 继承自该命名空间下的 Controller

    using System;
    using Microsoft.AspNetCore.Mvc;
    
    namespace HelloWorld.Controllers
    {
        public class AccountController: Controller
        {
            public AccountController()
            {
            }
        }
    }
    
  3. 然后在 AccountController 类中创建 Register 用来显示注册表单

    [HttpGet] 
    public ViewResult Register() { 
      return View(); 
    }
    
  4. 接下来在 Views 目录下创建目录 Account ,并在 Views/Account 目录下新建普通视图 Signup.cshtml

    创建完成后目录结构如下

    Signup.cshtml 中的默认内容如下

    @*
        For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
    *@
    @{
    }
    
  5. 再我们继续修改 Signup.cshtml 之前,我们先要确认一件事,就是注册的时候需要输入多少内容

    我们回到 SQLite Studio,看看我们的用户表有哪些字段

    可以看到几个熟悉的身影 UserNameEmailPasswordHash ,也就是说我们既可以使用用户名作为唯一标识,也可以使用邮箱作为唯一标识,两个都可以使用,也可以只用一个,我们这里就使用用户名吧

    于是,我们的注册表单就要用户输入三项内容 UserNamePassword,再加上确认命名 ConfirmPassword

  6. 好的,我们可以建模了,我们先创建一个模型 RegisterViewModel 来收集用户提交的信息

    我们把这个模型放在 AccountController.cs 文件中

    public class RegisterViewModel { 
        [Required, MaxLength(64)] 
        public string Username { get; set; }
    
        [Required, DataType(DataType.Password)] 
        public string Password { get; set; }
    
        [DataType(DataType.Password), Compare(nameof(Password))] 
        public string ConfirmPassword { get; set; } 
    }
    

    我们使用 C# 特性来帮助我们验证数据,当然多了几个新的面孔,比如 DataTypeCompare

    1. DataType 用于设置渲染成 HTML 时所使用的表单类型,再这里,就是 type="password"

    2. Compare 用于验证数据时指定和 Password 要一样

    当然了,为了使用这些 C# 特性,还需要引入命名空间 System.ComponentModel.DataAnnotations

  7. 修改完成后 AccountController.cs 中的内容如下

    using System;
    using Microsoft.AspNetCore.Mvc;
    using System.ComponentModel.DataAnnotations;
    
    namespace HelloWorld.Controllers
    {
        public class AccountController : Controller
        {
            public AccountController()
            {
            }
    
            [HttpGet]
            public ViewResult Signup()
            {
                return View();
            }
        }
    
        public class RegisterViewModel
        {
            [Required, MaxLength(64)]
            public string Username { get; set; }
    
            [Required, DataType(DataType.Password)]
            public string Password { get; set; }
    
            [DataType(DataType.Password), Compare(nameof(Password))]
            public string ConfirmPassword { get; set; }
        }
    }
    
  8. 好了,有了这些数据我们就可以修改 Signup.cshtml

    @model RegisterViewModel
    @{
       ViewBag.Title = "注册用户";
    }
    <h1>注册用户</h1>
    <form asp-action="Signup" method="post">
        <div asp-validation-summary = "ModelOnly"></div> 
        <div>
            <label asp-for="Username">用 户 名</label>
            <input asp-for="Username" />
            <span asp-validation-for="Username"></span>
        </div>
        <div>
            <label asp-for="Password">密 &nbsp;&nbsp;&nbsp;&nbsp;码</label>
            <input asp-for="Password" />
            <span asp-validation-for="Password"></span>
        </div>
        <div>
            <label asp-for="ConfirmPassword">确认密码</label>
            <input asp-for="ConfirmPassword" />
            <span asp-validation-for="ConfirmPassword"></span>
        </div>
        <div>
            <input type="submit" value="注册" />
        </div>
    </form>
    

    除了 <div asp-validation-summary = "ModelOnly"></div> 这个应该没啥新鲜的内容了

    asp-validation-summary 是一个 HTML 标签助手,用于输出所有的验证的错误信息的概要信息

    ModelOnly 是类 ValidationSummary 的一个成员,意思是只输出模型验证的错误信息

  9. 因为我们在注册表单中指定了使用 HTTP POST 方法把数据提交到 Signup 动作方法上,所以我们需要在 AccountController 里重载 Signup 动作方法

    [HttpPost]
    public IActionResult Signup(RegisterViewModel model)
    {
        return View();
    }
    

    这个动作方法将收到一个 RegisterViewModel 然后返回一个 IActionResult

    在这个方法中需要与 Identity 框架进行交互,以确保用户有效,告诉 Identity 框架创建该用户

    但这涉及到的内容实在太多,我们留给下一章节来填充,本章节我们留空就好

  10. 修改完成后,AccountController.cs 的全部内容如下

    using System;
    using Microsoft.AspNetCore.Mvc;
    using System.ComponentModel.DataAnnotations;
    
    namespace HelloWorld.Controllers
    {
        public class AccountController : Controller
        {
            public AccountController()
            {
            }
    
            [HttpGet]
            public ViewResult Signup()
            {
                return View();
            }
    
            [HttpPost]
            public IActionResult Signup(RegisterViewModel model)
            {
                return View();
            }
        }
    
        public class RegisterViewModel
        {
            [Required, MaxLength(64)]
            public string Username { get; set; }
    
            [Required, DataType(DataType.Password)]
            public string Password { get; set; }
    
            [DataType(DataType.Password), Compare(nameof(Password))]
            public string ConfirmPassword { get; set; }
        }
    }
    
  11. 好了,我们回到 Index.cshtml 添加一个 注册新用户 的链接指向刚刚创建的 Account/Signup 地址

    @model HomePageViewModel
    @{
        ViewBag.Title = "职工列表";
    }
    <style>
        body {margin:10px auto;text-align:center}
       table {
            margin:0 auto;
            width:90%
    
       }
       table, th, td {
            border:1px solid #eee;
            border-collapse:collapse;
            border-spacing:0;
            padding:5px;
            text-align:center
       }
    
       .txt-left {
           text-align:left;
       }
    </style>
    <h1>职工列表</h1>
    <table>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td class="txt-left">操作</td>
        </tr>
        @foreach (var employee in Model.Employees)
        {
        <tr>
            <td>@employee.ID</td>
            <td>@employee.Name</td>
            <td class="txt-left"><a asp-action="Detail" asp-route-Id="@employee.ID">详情</a> &nbsp; <a asp-controller="Home" asp-action="Edit"
       asp-route-id="@employee.ID">编辑</a></td>
        </tr>
        }
    </table>
    <br/>
    <p><a asp-action="Create" >新增员工</a></p>
    <hr/>
    <p><a asp-controller="Account" asp-action="Signup">注册新用户</a></p>
    

    asp-controller="Account" 用户指定链接的控制器名为 Account

好了,保存所有的代码,然后重启应用程序,访问首页,显示如下

点击 注册新用户 显示如下

如果我们不输入任何数据,直接点击 注册 按钮,则显示如下

如果输入完整的数据,点击 注册 则显示如下

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章