289 Login View

步骤

1、新建LoginDTO.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ContactsManager.Core.DTO
{
    public class LoginDTO
    {
        [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 = "Password can't be blank")]
        [DataType(DataType.Password)]
        public string? Password { get; set; }
    }
}

2、新建视图Login.cshtml

@model LoginDTO
@{
    ViewBag.Title = "Login";
    ViewBag.CurrentUrl = "~/Account/Login";
}

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

<div class="form-container">
    Not yet registered? <a asp-controller="Account" asp-action="Register" 
class="link-hover">Register</a>
    <h2 class="text-large">Login</h2>
    <form asp-controller="Account" asp-action="Login" method="post">
    @*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>
    @*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>
    @*Login button*@
    <div class="form-field flex">
        <div class="w-25"></div>
        <div class="flex-1">
            <button class="button button-green-back" type="submit">Login</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>
}

3、AccountController.cs中添加两个Login action

[HttpGet]
public IActionResult Login()
{
    return View();
}

[HttpPost]
public async Task<IActionResult> Login(LoginDTO loginDTO)
{
    //Check for validation errors
    if (!ModelState.IsValid)
    {
        ViewBag.Errors = ModelState.Values.SelectMany(temp => 
temp.Errors).Select(temp => temp.ErrorMessage);
        return View(loginDTO);
    }

    var result = await _signInManager.PasswordSignInAsync(loginDTO.Email, 
loginDTO.Password, false, false);

    if (result.Succeeded)
    {
        return RedirectToAction(nameof(PersonsController.Index), "Persons");
    }
    else
    {
        ModelState.AddModelError("Login", "Invalid email or password");
        return View(loginDTO);
    }
}

4、Logout

AccountController.cs中添加如下代码

public async Task<IActionResult> Logout()
{
    await _signInManager.SignOutAsync();
    return RedirectToAction(nameof(PersonsController.Index), "Persons");
}

运行程序可以正常登录和登出。

Gitee获取源码：

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