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

ReturnUrl實現

咱們要實現returnUrl，咱們須要在註冊（Register）方法中接收傳進的returnUrl並給它默認值null，而後將它保存在ViewData裏面

而後咱們定義一個內部方法來判斷跳轉returnUrl

//內部跳轉
private IActionResult RedirectToLocal(string returnUrl)
{
    if (Url.IsLocalUrl(returnUrl))
    {//若是是本地
        return Redirect(returnUrl);
    }

    return RedirectToAction(nameof(HomeController.Index),"Home");
}

而後咱們須要在Register的HttpPost方法中，在註冊成功後進行跳轉到returnUrl

接下來咱們修改Register.cshtml

完整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>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
</div>
<div class="form-group">
<label asp-for="ConfirmedPassword"></label>
<input asp-for="ConfirmedPassword" class="form-control" />
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</div>
</div>

接下來登錄的地方咱們也須要修改一下，咱們須要在登錄（Login）方法中接收傳進的returnUrl並給它默認值null，而後將它保存在ViewData裏面

 

而後咱們須要在Login的HttpPost方法中，在註冊成功後進行跳轉到returnUrl

 

接下來咱們修改Login.cshtml

 

完整Login.cshtml代碼：

@{
ViewData["Title"] = "Login";
}

@using MvcCookieAuthSample.ViewModels;
@model RegisterViewModel;

<div class="row">
<div class="col-md-4">
<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>

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

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

</form>
</section>
</div>
</div>

而後咱們就能夠實現登錄/註冊後Url進行跳轉到以前的頁面。

Model後端驗證 

咱們能夠經過給ViewModel的屬性加頭標籤來進行Model後端驗證，這裏拿RegisterViewModel舉例

咱們能夠給限定屬性是必須的

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; }
}

這樣以前咱們在在登錄的時候也用的是RegisterViewModel就不行了，咱們要在ViewModel文件夾下新建一個LoginViewModel供登錄使用

public class LoginViewModel
{
    [Required]//必須的
    [DataType(DataType.EmailAddress)]//內容檢查是否爲郵箱
    public string Email { get; set; }

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

接下來咱們須要修改Login.cshtml，在表單中添加<span asp-validation-for="XXXXXX" class="text-danger"></span>用來給表單元素顯示錯誤信息

而後咱們修改Login的HttpPost方法，用ModelState.IsValid進行驗證

這時候咱們什麼數據都不填，服務端返回驗證後顯示：

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

 

咱們如今的密碼驗證很弱，是由於以前在Startup.cs中咱們修改了密碼的部分規則，如今將規則改成以下

咱們能夠將全部的錯誤提示在同一個地方，須要用asp-validation-summary，咱們以Register.cshtml爲例

什麼都不填運行效果

因爲咱們的驗證比較嚴格，會出現註冊是失敗的狀況，因此咱們要修改後臺的註冊方法，在註冊失敗的時候講錯誤返回給前臺頁面，咱們能夠寫一個通用的添加驗證錯誤方法

//添加驗證錯誤
private void AddError(IdentityResult result)
{
    //遍歷全部的驗證錯誤
    foreach (var error in result.Errors)
    {
        //返回error到model
        ModelState.AddModelError(string.Empty, error.Description);
    }
}

而後在註冊驗證失敗的時候調用此方法將錯誤緣由顯示出來

運行效果

Model前端驗證 

客戶端的驗證主要要加入jquery的組件

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

以Login.cshtml爲例，咱們只須要加入如下代碼就好了

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

由於_Layout.cshtml中已經默認爲咱們加載了js