【ASP.NET Core快速入門】（十五）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