天天看點

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

ReturnUrl實作

我們要實作returnUrl,我們需要在注冊(Register)方法中接收傳進的returnUrl并給它預設值null,然後将它儲存在ViewData裡面

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

然後我們定義一個内部方法來判斷跳轉returnUrl

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證
//内部跳轉
private IActionResult RedirectToLocal(string returnUrl)
{
    if (Url.IsLocalUrl(returnUrl))
    {//如果是本地
        return Redirect(returnUrl);
    }

    return RedirectToAction(nameof(HomeController.Index),"Home");
}      
菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

然後我們需要在Register的HttpPost方法中,在注冊成功後進行跳轉到returnUrl

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

接下來我們修改Register.cshtml

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

完整Register.cshtml代碼:

@{

ViewData["Title"] = "Register";

}

@using MvcCookieAuthSample.ViewModels;

@model RegisterViewModel;

<h2>@ViewData["Title"]</h2>

<h3>@ViewData["Message"]</h3>

<div class="row">

<div class="col-md-4">

@* 這裡将asp-route-returnUrl="@ViewData["returnUrl"],就可以在進行register的post請求的時候接收到returnUrl *@

<form method="post" asp-route-returnUrl="@ViewData["returnUrl"]">

<h4>Create a new account.</h4>

<hr />

<div class="form-group">

<label asp-for="Email"></label>

<input asp-for="Email" class="form-control" />

</div>

<label asp-for="Password"></label>

<input asp-for="Password" class="form-control" />

<label asp-for="ConfirmedPassword"></label>

<input asp-for="ConfirmedPassword" class="form-control" />

<button type="submit" class="btn btn-default">Register</button>

</form>

</div>

</div>

接下來登陸的地方我們也需要修改一下,我們需要在登陸(Login)方法中接收傳進的returnUrl并給它預設值null,然後将它儲存在ViewData裡面

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

然後我們需要在Login的HttpPost方法中,在注冊成功後進行跳轉到returnUrl

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

接下來我們修改Login.cshtml

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

完整Login.cshtml代碼:

ViewData["Title"] = "Login";

<section>

@* 這裡将asp-route-returnUrl="@ViewData["returnUrl"],就可以在進行Login的post請求的時候接收到returnUrl *@

<form method="post" asp-controller="Account" asp-action="Login" asp-route-returnUrl="@ViewData["returnUrl"]">

<h4>Use a local account to log in.</h4>

<hr />

<div class="form-group">

<label asp-for="Email"></label>

<input asp-for="Email" class="form-control" />

</div>

<label asp-for="Password"></label>

<input asp-for="Password" type="password" class="form-control" />

<button type="submit" class="btn btn-default">Log in</button>

</form>

</section>

然後我們就可以實作登陸/注冊後Url進行跳轉到之前的頁面。

Model後端驗證 

我們可以通過給ViewModel的屬性加頭标簽來進行Model後端驗證,這裡拿RegisterViewModel舉例

我們可以給限定屬性是必須的

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證
public class RegisterViewModel
{
    [Required]//必須的
    [DataType(DataType.EmailAddress)]//内容檢查是否為郵箱
    public string Email { get; set; }

    [Required]//必須的
    [DataType(DataType.Password)]//内容檢查是否為密碼
    public string Password { get; set; }

    [Required]//必須的
    [DataType(DataType.Password)]//内容檢查是否為密碼
    public string ConfirmedPassword { get; set; }
}      
菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

這樣之前我們在在登陸的時候也用的是RegisterViewModel就不行了,我們要在ViewModel檔案夾下建立一個LoginViewModel供登陸使用

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證
public class LoginViewModel
{
    [Required]//必須的
    [DataType(DataType.EmailAddress)]//内容檢查是否為郵箱
    public string Email { get; set; }

    [Required]//必須的
    [DataType(DataType.Password)]//内容檢查是否為密碼
    public string Password { get; set; }
}      
菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

接下來我們需要修改Login.cshtml,在表單中添加<span asp-validation-for="XXXXXX" class="text-danger"></span>用來給表單元素顯示錯誤資訊

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

然後我們修改Login的HttpPost方法,用ModelState.IsValid進行驗證

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

這時候我們什麼資料都不填,服務端傳回驗證後顯示:

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

同理Register方法也是這樣進行修改

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

我們現在的密碼驗證很弱,是因為之前在Startup.cs中我們修改了密碼的部分規則,現在将規則改為如下

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

我們可以将所有的錯誤提示在同一個地方,需要用asp-validation-summary,我們以Register.cshtml為例

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

什麼都不填運作效果

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

由于我們的驗證比較嚴格,會出現注冊是失敗的情況,是以我們要修改背景的注冊方法,在注冊失敗的時候講錯誤傳回給前台頁面,我們可以寫一個通用的添加驗證錯誤方法

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證
//添加驗證錯誤
private void AddError(IdentityResult result)
{
    //周遊所有的驗證錯誤
    foreach (var error in result.Errors)
    {
        //傳回error到model
        ModelState.AddModelError(string.Empty, error.Description);
    }
}      
菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

然後在注冊驗證失敗的時候調用此方法将錯誤原因顯示出來

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

運作效果

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

Model前端驗證 

用戶端的驗證主要要加入jquery的元件

  • jquery.validate.js
  • jquery.validate.unobtrusive.js

以Login.cshtml為例,我們隻需要加入以下代碼就行了

@section Scripts
{
    @await Html.PartialAsync("_ValidationScriptsPartial")
}      

因為_Layout.cshtml中已經預設為我們加載了js

菜鳥入門【ASP.NET Core】15:MVC開發:ReturnUrl實作、Model後端驗證 、Model前端驗證

繼續閱讀