282 Register View

步骤

1、新建DTO RegisterDTO.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;


namespace ContactsManager.Core.DTO
{
    public class RegisterDTO
    {
        [Required(ErrorMessage = "Name can't be blank")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Email can't be blank")]
        [EmailAddress(ErrorMessage = "Email should be in a proper email address format")]
        public string Email { get; set; }
        [Required(ErrorMessage = "Phone can't be blank")]
        [RegularExpression("^[0-9]*$", ErrorMessage = "Phone number should contain numbers only")]
        public string Phone { get; set; }
        [Required(ErrorMessage = "Password can't be blank")]
        [DataType(DataType.Password)]
        public string Password { get; set; }
        [Required(ErrorMessage = "Confirm Password can't be blank")]
        [DataType(DataType.Password)]
        public string ConfirmPassword { get; set; }
    }
}

2、_ViewImports.cshtml导入DTO命名空间

@using ServiceContracts.DTO
@using ServiceContracts.Enums
@using ContactsManager.Core.DTO

@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"

3、新建Register.cshtml

@model RegisterDTO
@{
    ViewBag.Title = "Register";
}

<div class="text-grey">
    <span>Contacts</span>
    <i class="fa-solid fa-caret-right"></i>
    <span>Register</span>
</div>

<div class="form-container">
    Already Registered? <a asp-controller="Account" asp-action="Login" class="link-hover">Login</a>
    <h2 class="text-large">Register</h2>

    <form asp-controller="Account" asp-action="Register" method="post">
        @*PersonName*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="Name" class="form-label pt">Name</label>
            </div>
            <div class="flex-1">
                <input asp-for="Name" class="form-input" />
                <span asp-validation-for="Name" class="text-red"></span>
            </div>
        </div>
        @*Email*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="Email" class="form-label pt">Email</label>
            </div>
            <div class="flex-1">
                <input asp-for="Email" class="form-input" />
                <span asp-validation-for="Email" class="text-red"></span>
            </div>
        </div>
        @*Phone*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="Phone" class="form-label pt">Phone</label>
            </div>
            <div class="flex-1">
                <input asp-for="Phone" class="form-input" />
                <span asp-validation-for="Phone" class="text-red"></span>
            </div>
        </div>
        @*Password*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="Password" class="form-label pt">Password</label>
            </div>
            <div class="flex-1">
                <input asp-for="Password" class="form-input" />
                <span asp-validation-for="Password" class="text-red"></span>
            </div>
        </div>
        @*ConfirmPassword*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="ConfirmPassword" class="form-label pt">Confirm Password</label>
            </div>
            <div class="flex-1">
                <input asp-for="ConfirmPassword" class="form-input" />
                <span asp-validation-for="ConfirmPassword" class="text-red"></span>
            </div>
        </div>

        @*Register button*@
        <div class="form-field flex">
            <div class="w-25"></div>
            <div class="flex-1">
                <button class="button button-green-back" type="submit">Register</button>
                <div asp-validation-summary="All" class="text-red"></div>

                @if (ViewBag.Errors != null)

                {
                    <div class="text-red ml">
                        <ul>
                            @foreach (string error in ViewBag.Errors)
                            {
                                <li class="ml">@error</li>
                            }
                        </ul>
                    </div>
                }
            </div>
        </div>
    </form>
</div>

@section scripts
{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            asp-fallback-test="window.jQuery"
            asp-fallback-src="~/jquery.min.js"></script>"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js"
            asp-fallback-test="window.jQuery.validator"
            asp-fallback-src="~/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/4.0.0/jquery.validate.unobtrusive.min.js"
            asp-fallback-test="window.jQuery.validator.unobtrusive"
            asp-fallback-src="~/jquery.validate.unobtrusive.min.js"></script>
}

4、新建AccountController.cs

using ContactsManager.Core.DTO;
using CRUDExample.Controllers;
using Microsoft.AspNetCore.Mvc;

namespace ContactsManager.UI.Controllers
{
    [Route("[controller]/[action]")]
    public class AccountController : Controller
    {
        [HttpGet]
        public IActionResult Register()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Register(RegisterDTO registerDTO)
        {
            //TO DO: Store user registeration details into Identity database


            return RedirectToAction(nameof(PersonsController.Index), "Persons");
        }
    }
}

Gitee获取源码：

https://gitee.com/huang_jianhua0101/asp.-net-core-8.git