7 天玩轉 ASP.NET MVC — 第 4 天

時間 2019-11-11

標籤 asp.net asp mvc 欄目 ASP 简体版

原文原文鏈接

0. 前言

歡迎來到第四天的 MVC 系列學習中。若是你直接開始學習今天的課程，我強烈建議你先完成以前的學習內容再來到這裏。html

1. Lab 15 — 認證錯誤的保留值

在 Lab 13 中，咱們介紹了服務器端的認證，而且在 Lab 14 中，咱們經過添加自定義認證的方式將其提示到一個新的層級。jquery

我強烈建議你再回顧一下 Lab 14。再次執行應用，而且可以很好地理解代碼以及輸出。數據庫

在 Lab 15 中，咱們將學習如何在認證失敗時填充值。編程

第一步：建立 CreateEmployeeViewModel瀏覽器

在 ViewModel 文件夾下建立一個新的類。安全

public class CreateEmployeeViewModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Salary { get; set; }
}

第二步：改變 SaveEmployee 行爲方法服務器

咱們將從新使用 Model Binder 建立的 Employee 對象來從新生成。改變 SaveEmployee 行爲方法以下。cookie

public ActionResult SaveEmployee(Employee e, string BtnSubmit)
{
    switch (BtnSubmit)
    {
        case "Save Employee":
            if (ModelState.IsValid)
            {
                EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
                empBal.SaveEmployee(e);
                return RedirectToAction("Index");
            }
            else
            {
                CreateEmployeeViewModel vm = new CreateEmployeeViewModel();
                vm.FirstName = e.FirstName;
                vm.LastName = e.LastName;
                if (e.Salary.HasValue)
                {
                    vm.Salary = e.Salary.ToString();                        
                }
                else
                {
                    vm.Salary = ModelState["Salary"].Value.AttemptedValue;                       
                }
                return View("CreateEmployee", vm); // Day 4 Change - Passing e here
            }
        case "Cancel":
            return RedirectToAction("Index");
    }
    return new EmptyResult();
}

第三步：在視圖中從新填值mvc

將 View 成爲一個強類型視圖

在 CreateEmployee 視圖的頂部，放置以下代碼。框架

@using WebApplication1.ViewModels
@model CreateEmployeeViewModel

在相應控件中呈現從 Model 中獲取的值

...
...
<input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" />
...
...
<input type="text" id="TxtLName" name="LastName" value="@Model.LastName" />
...
...
<input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" />
...
...

第四步：執行並測試

按下 F5 執行應用。經過點擊「Add New」連接導航到 AddNew 屏幕上。

上述的錯誤將會在實驗結束後探討。如今讓咱們來實現解決方案。

第五步：改變 AddNew 行爲方法

public ActionResult AddNew()
{
    return View("CreateEmployee&rdquo;, new CreateEmployeeViewModel());
}

第六步：執行並測試

按下 F5，並執行應用。

Test

步驟以下。

經過點擊「Add New」連接導航到 AddNew 屏幕。
保持 First Name 爲空。
將 Salary 設置爲 56。
點擊「Save Employee」按鈕。

這樣會使得兩個認證是失敗的。

正如你所看見的那樣，值56 仍然保留在 Salary 文本框內。

Test 2

正如你所看見的，FirstName 和 LastName 文本框內的值仍然有所保留。
可是奇怪的是，Salary 並無保留值。咱們將會在實驗的最後探討緣由並給出解決方案。

Lab 15 的 Q&A

咱們真的將值保留了嗎？

答案是否認的。實際上，咱們重填的值是從 Posted 數據中獲取的。

爲何在初始的請求中，在「AddNew」行爲方法中須要傳輸「new CreateEmployeeViewModel()」？

在視圖中，咱們嘗試將模型中的值從新填充到文本框內。例如：

<input id="TxtSalary" name="Salary" type="text" value="@Model.Salary" />

正如你所看見的，在代碼區域，咱們訪問當前模型的 FirstName 屬性。若是 Model 爲 Null，那麼將會拋出「Object reference not set to an instance of the class」的異常。

當點擊「Add New」超連接時，請求將會被「Add New」行爲方法處理。在該方法中，咱們能夠在返回視圖時不傳輸任何數據。這意味着視圖中 Model 的屬性爲 Null，而且會拋出「Object reference not set to an instance of the class」的異常。爲了解決這個問題，在初始請求中，須要傳輸「new CreateEmployeeViewModel()」。

咱們能夠經過自動的方式來達到上述一樣的功能效果嗎？

答案是確定的。咱們能夠運用 HTML Helper 類來解決。咱們將會在接下來的實驗中探討這個問題。

2. Lab 16 — 添加客戶端認證

首先咱們列舉所須要的全部認證。

FirstName 不該爲空。
LastName 的長度不能超出5。
Salary 不該爲空。
Salary 應該爲一個正確的數字。
FirstName 應該不能包含「@」符號。

讓咱們來實現它吧。

第一步：建立一個 JavaScript 認證文件

建立一個 JavaScript 文件，命名爲「Validations.js」，而且把它放到 Scripts 文件夾內。

第二步：建立認證函數

在「Validations.js」文件內，建立一個認證函數。

function IsFirstNameEmpty() {
    if (document.getElementById('TxtFName').value == "") {
        return 'First Name should not be empty';
    }
    else { return ""; }
}

function IsFirstNameInValid() {    
    if (document.getElementById('TxtFName').value.indexOf("@") != -1) {
        return 'First Name should not contain @';
    }
    else { return ""; }
}
function IsLastNameInValid() {
    if (document.getElementById('TxtLName').value.length>=5) {
        return 'Last Name should not contain more than 5 character';
    }
    else { return ""; }
}
function IsSalaryEmpty() {
    if (document.getElementById('TxtSalary').value=="") {
        return 'Salary should not be empty';
    }
    else { return ""; }
}
function IsSalaryInValid() {
    if (isNaN(document.getElementById('TxtSalary').value)) {
        return 'Enter valid salary';
    }
    else { return ""; }
}
function IsValid() {

    var FirstNameEmptyMessage = IsFirstNameEmpty();
    var FirstNameInValidMessage = IsFirstNameInValid();
    var LastNameInValidMessage = IsLastNameInValid();
    var SalaryEmptyMessage = IsSalaryEmpty();
    var SalaryInvalidMessage = IsSalaryInValid();

    var FinalErrorMessage = "Errors:";
    if (FirstNameEmptyMessage != "")
        FinalErrorMessage += "\n" + FirstNameEmptyMessage;
    if (FirstNameInValidMessage != "")
        FinalErrorMessage += "\n" + FirstNameInValidMessage;
    if (LastNameInValidMessage != "")
        FinalErrorMessage += "\n" + LastNameInValidMessage;
    if (SalaryEmptyMessage != "")
        FinalErrorMessage += "\n" + SalaryEmptyMessage;
    if (SalaryInvalidMessage != "")
        FinalErrorMessage += "\n" + SalaryInvalidMessage;

    if (FinalErrorMessage != "Errors:") {
        alert(FinalErrorMessage);
        return false;
    }
    else {
        return true;
    }
}

第三步：在 View 中包含認證文件

在「CreateEmployee」視圖的頂部，將「Validations.js」文件引入。

<script src="~/Scripts/Validations.js"></script>

第四步：附加認證

在 SaveEmployee 按鈕點擊時觸發 IsValid 函數。

<input type="submit" name="BtnSubmit" value="Save Employee" onclick="return IsValid();" />

第五步：執行並測試

按下 F5，執行應用。

經過點擊「Add New」連接導航到 AddNew 屏幕。

Test 1

Test 2

Lab 16 的 Q&A

爲何點擊 SaveEmployee 按鈕時，關鍵字須要被返回？

正如咱們在 Lab 9 中所探討的，提交按鈕被點擊時，它將會向服務器發送請求。當認證失敗時，向服務器發送請求是沒有意義的。經過在提交按鈕中寫下「return false」，咱們能夠阻止默認的服務器請求。

在咱們的這個例子中，當認證失敗時，IsValid 函數將會返回 false，所以咱們達到了預期的功能。

除了彈出的警告之外，咱們能夠在頁面自己上顯示錯誤信息嗎？

答案是確定的。只須要爲每一個錯誤建立一個 Span 標籤。運用 CSS 使它在開始時不可見，當提交按鈕點擊後，若是認證失敗了，運用 JavaScript 使其可見。

是否存在客戶端自動認證的方法？

答案是確定的。當咱們運用 HTML Helper 就能夠基於服務端認證明現自動客戶端認證。咱們將會在後面的實驗中探討這個問題。

服務器端的認證還被須要嗎？

答案是確定的。在一些場景下，JavaScript 沒法使用，服務器端認證能夠替代它使用。

3. Lab 17 — 添加受權認證

在這個實驗中，咱們將會使得 GetView 方法更加安全。咱們將會確保只有合法用戶才能訪問行爲方法。

在第一天的系列學習中，咱們瞭解了 ASP.NET 和 MVC 的真實含義。咱們理解到 ASP.NET MVC 是 ASP.NET 的一部分。許多 ASP.NET 的功能都被 ASP.NET MVC 所繼承。其中一個功能即是表單的認證。

在咱們開始實驗以前，咱們先了解下在 ASP.NET 中如何進行表單認證工做。

終端用戶經過瀏覽器發送一個表單認證的請求。
瀏覽器將發送全部請求相關的Cookies，存儲在客戶機器上。
當請求被服務器端接收到，服務器會檢查請求並檢查特殊的 Cookie，即「Authentication Cookie」。
若是發現了合法的認證 Cookie，服務器就會證明用戶的身份，或者簡單來講，認爲用戶是一個合法的用戶，並容許他進行下一步。
若是沒有發現合法的認證 Cookie，服務器就會認爲用戶是匿名(未認證)的用戶。在這種狀況下，若是被請求的資源被標記爲 Protected/Secured，那麼用戶將會被從新導向到登陸頁面。

第一步：建立一個 AuthenticationController 和一個登陸行爲方法

右擊 Controller 文件夾，選擇「Add New Controller」，而後建立一個控制器，命名爲「Authentication」。在這種狀況下，全名應該爲「AuthenticationController」。

在控制器內建立一個行爲方法，命名爲 Login。

public class AuthenticationController : Controller
{
    // GET: Authentication
    public ActionResult Login()
    {
        return View();
    }
}

第二步：建立 Model

在 Model 文件夾下建立一個 Model 類，命名爲 UserDetails。

namespace WebApplication1.Models
{
    public class UserDetails
    {
        public string UserName { get; set; }
        public string Password { get; set; }
    }
}

第三步：建立 Login 視圖

在「~/Views/Authentication」文件夾下建立一個新的視圖，命名爲 Login。使它成爲一個 UserDetails 的強類型視圖。

在視圖內放置以下 HTML 代碼。

@model WebApplication1.Models.UserDetails

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Login</title>

</head>

<body>

    <div>

        @using (Html.BeginForm("DoLogin", "Authentication", FormMethod.Post))

        {

            @Html.LabelFor(c=>c.UserName)

            @Html.TextBoxFor(x=>x.UserName)



            <br />

            @Html.LabelFor(c => c.Password)

            @Html.PasswordFor(x => x.Password)

            <br />


            <input type="submit" name="BtnSubmit" value="Login" />

        }

    </div>

</body>

</html>

正如你所看見的，此次咱們生成的視圖運用了 HtmlHelper 類，而不是純 HTML。

在視圖中咱們已經建立了一個 HtmlHelper 類的對象，即「Html」。
HtmlHelper 類的功能簡單返回 HTML 字符串。

Example 1

@Html.TextBoxFor(x=>x.UserName)

上述的代碼將產生以下的 HTML。

<input id="UserName" name="UserName" type="text" value="" />

Example 2

@using (Html.BeginForm("DoLogin", "Authentication", FormMethod.Post))
{
}

上述的代碼將產生以下的 HTML。

<form action="/Authentication/DoLogin" method="post">
</form>

第四步：執行並測試

按下 F5，執行應用。在地址欄輸入 Login 方法的 URL。在這個例子中，將會是「http://localhost:8870/Authentication/Login」。

第五步：受權表單認證

打開 Web.config 文件。導航到 System.Web 區域。找到子區域 Authentication。若是這裏不存在就建立一個。設置 Authentication 的模式是 Forms，Login URL 指向第一步所建立的「Login」的行爲方法。

<authentication mode="Forms">
<forms loginurl="~/Authentication/Login"></forms>
</authentication>

第六步：讓行爲方法更加安全

打開 EmployeeController，而後向 Index 方法附上 Authorize 屬性。

[Authorize]
public ActionResult Index()
{
    EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
......

第七步：執行並測試

按下 F5 並執行應用。在地址欄中輸入 EmployeeController 的 Index 行爲方法的 URL。在這個情景中，URL 爲「http://localhost:8870/Employee/Index」。

正如你所看見的，Index 行爲的請求將會重指向 Login 行爲。

第八步：建立一個業務層功能

打開 EmployeeBusinessLayer 類，而後建立一個方法叫作 IsValidUser。

public bool IsValidUser(UserDetails u)
{
    if (u.UserName == "Admin" && u.Password == "Admin")
    {
        return true;
    }
    else
    {
        return false;
    }
}

注：在業務層，咱們對比 UserName 和 Password 的硬編碼值。在真實場景中，咱們可以調用數據庫層，並對比真實的值。

第九步：建立 DoLogin 行爲方法

打開 AuthenticationController 類，而後建立一個新的行爲方法，叫作 DoLogin。

這個 DoLogin 方法會在 Login 按鈕點擊時被觸發。

如今咱們來列舉一下 DoLogin 中須要作的幾點。

經過觸發業務層功能來檢查用戶的合法性。
若是用戶是一個合法用戶，就建立一個認證的 Cookie。它可以使得將來的請求是認證過的請求。
若是用戶是不合法的，就向當前的 ModelState 增長一個錯誤。這個錯誤將會呈如今視圖中。

[HttpPost]
public ActionResult DoLogin(UserDetails u)
{
EmployeeBusinessLayer bal = new EmployeeBusinessLayer();
if (bal.IsValidUser(u))
{
FormsAuthentication.SetAuthCookie(u.UserName, false);
return RedirectToAction("Index", "Employee");
}
else
{
ModelState.AddModelError("CredentialError", "Invalid Username or Password");
return View("Login");
}
}

讓咱們理解下上述代碼區域。

若是你記得「第三天 — Lab 13」中咱們所談論的 ModelState，那麼就能理解它包含了模型的狀態。它包含了當前模型的錯誤信息。在上述的代碼片斷中，當用戶是一個非法用戶時，就增長一個新的錯誤。(錯誤由鍵值「CredentialError」和信息「Invalid UserName or Password」組成)
表單認證。SetAuthCookie 將會在客戶機器上建立一個新的 Cookie。

第十步：在視圖中呈現信息

打開 Login 視圖，在 @Html.BeginForm 上增長一小段代碼。

@Html.ValidationMessage("CredentialError", new {style="color:red;" })
@using (Html.BeginForm("DoLogin", "Authentication", FormMethod.Post))

第十一步：執行並測試

按下 F5 並執行應用。直切發起一個指向 Login Action 的請求。我相信你如今已經知道如何去作。

注：若是你想發起一個指向 EmployeeController 中 Index Action 的請求，它會從新導向到 Login Action。

Test 1

Test 2

Lab 17 的 Q&A

爲何 DoLogin 會附上 HttpPost 屬性？

這個屬性可使 DoLogin 行爲方法只爲 Post 請求開啓。若是想試圖獲得一個 DoLogin 的請求，將不會起做用。

咱們還有其它相似的屬性嗎？

答案是確定的。咱們有 HttpGet，HttpPut 和 HttpDelete。做爲一個最佳實踐，每個行爲方法都應該被附上這樣的屬性。

注意：爲了保持代碼和學習是輕鬆並簡單的，咱們在這個系列學習中並無所有都遵循最佳實踐，可是咱們建議你在項目中遵循。

在咱們持續的學習中，咱們將會繼續談論最佳實踐。

FormsAuthentication.SetAuthCookie 是必需要寫的嗎？

答案是確定的。

讓咱們來理解一個小的程序。

用戶經過瀏覽器向服務器發送請求。
當請求經過瀏覽器發出，全部相關聯的 Cookies 將會伴隨着請求。
服務器接收到請求而且準備發出響應。
如今咱們已經知道請求和響應是經過 HTTP 協議，而且 HTTP 是無關國籍的。對於服務器而言，每個請求都是一個新的請求，所以當相同的用戶發出兩次請求時，服務器並不可以識別它。爲了解決這個問題，服務器在準備響應的時候增長了 Cookie，而後返回響應。
當客戶端瀏覽器接收到伴隨着 Cookie 的響應後，它將會在客戶端建立 Cookies。
如今客戶又一次發出請求，服務器將會識別他，由於請求中包含了 Cookies。

FormsAuthentication.SetAuthCookie 將會向響應增長一個特殊的 Cookie，命名爲「Authentication」。

若是沒有 Cookies，是否是意味着 FormsAuthentication 就不會起做用？

答案是否認的。咱們有替代物。咱們能夠運用 URI，而不是 Cookies。

打開 Web.config，而後更改「Authentication/Forms」區域以下。

<forms cookieless="UseUri" loginurl="~/Authentication/Login"></forms>

正如你所看見的，如今認證 Cookie 經過 URL 它本身傳輸。

默認狀況下，Cookieless 屬性會被設置爲「AutoDetect」。這意味着認證工做經過 Cookie 完成，在這種情景下，Cookies 將不會支持經過 URL 傳輸。

FormsAuthentication.SetAuthCookie 的第二個參數起到什麼做用？

這決定了咱們是否願意建立一個永久的 Cookie。非永久的 Cookie 將會在瀏覽器關閉時自動刪除。永久性的 Cookies 將不會被自動刪除。咱們能夠經過代碼或者瀏覽器設置手動刪除。

經過代碼作到登出？

咱們將會在之後的 Lab 中學習。

當認證失敗時，UserName 文本框將會如何被填充？

這是 HTML Helper 類的神奇之處。它們將會在控件中填充來自 Posted 數據的值。這是運用 HTML Helper 類的其中一個優點。

@Html.ValidationMessage 是作什麼的？

咱們在 Lab 13 中已經探討過了。它根據鍵值呈現 ModelState 的錯誤。

Authorize 屬性是作什麼的？

在 ASP.NET MVC 中，存在一個概念叫作 Filters。運用它能夠過濾請求和響應。這裏存在四種過濾器。咱們將會在第七天的學習中探討它們。Authorize 屬性經過 Authorization 過濾器得出。這樣能夠確保只有認證過的請求容許指向動做方法。

咱們能夠在一個行爲方法中同時附上 HttpPost 和 Authorize 屬性嗎？

答案是確定的。

在這個例子中，爲何沒有 ViewModel？

在 Lab 6 中咱們所探討的，View 應該和 Model 直接相關聯。咱們必須有 View 和 Model 中的 ViewModel。視圖是展現視圖或者數據入口視圖都不重要，它們都應該和 ViewModel 相關聯。在真實項目中，我強烈但願你所有都運用上 ViewModel。

對於每個行爲方法都必須附上 Authorize 屬性嗎？

答案是否認的。咱們能夠附上它 Controller 級別或者 Global 級別。當附上 Controller 級別，它將能夠適用於一個控制器裏的全部行爲方法。當附上 Global 級別，它將會適用於全部控制器裏的全部行爲方法。

Controller 級別：

[Authorize]
public class EmployeeController : Controller
{
....
Global 級別：

第一步：從 App_start 文件夾下打開 FilterConfig.cs 文件

第二步：在 RegisterGlobalFilters 中增長一行

public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
    filters.Add(new HandleErrorAttribute());//Old line
    filters.Add(new AuthorizeAttribute());//New Line
}

第三步：向 AuthenticationController 附上 AllowAnonymous 屬性

[AllowAnonymous]
public class AuthenticationController : Controller
{

第四步：執行並測試應用

「filters.Add(new HandleErrorAttribute())」是用來作什麼的？

咱們將會在往後的試驗中探討這個問題的細節。

爲何 AuthenticationController 中須要加上 AllowAnonymous 屬性？

咱們已經附上了 Global 級別的 Authorize 過濾器。這意味着全部的方法都將是受保護的，包括 Login 和 DoLogin 行爲方法。AllowAnonymous 爲未認證的請求開啓了行爲方法。

FilterConfig 類中的 RegisterGlobalFilters 方法如何被觸發的？

它經過 Global.asax 文件內的 Application_Start 事件所觸發。

4. Lab 18 — 在視圖中展現 UserName

在本實驗中，咱們將在視圖中呈現當前登陸的用戶名。

第一步：在 ViewModel 中增長 UserName

打開 EmployeeListViewModel，而後增長一個新的屬性，即 UserName。

public class EmployeeListViewModel
{
    public List<EmployeeViewModel><employeeviewmodel> Employees { get; set; }
    public string UserName { get; set; }
}

第二步：向 ViewModel 的UserName 設置值

打開 EmployeeController，而後更改 Index 方法以下。

public ActionResult Index()
{
    EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
    employeeListViewModel.UserName = User.Identity.Name; //New Line
......

第三步：在視圖中呈現 UserName

打開 Index.cshtml 視圖，呈現 UserName。

<body>
<div style="text-align:right"> Hello, @Model.UserName </div>
<hr />
<a  href="/Employee/AddNew">Add New</a>
    <div>
    <table border="1"><span style="font-size: 9pt;"> 
</span>

第四步：執行並測試

按下 F5 並執行應用。完成登陸操做後，你將會看到以下輸出。

5. Lab 19 — 實現登出

第一步：建立登出連接

打開 Index.cshtml 文件而後建立登出連接。

<body>
    <div style="text-align:right">Hello, @Model.UserName
    <a href="/Authentication/Logout">Logout</a></div>
    <hr />
    <a  href="/Employee/AddNew">Add New</a>
    <div>
        <table border="1">

第二步：建立登出行爲方法

打開 AuthenticationController，而後增長一個行爲方法，命名爲 Logout。

public ActionResult Logout()
{
    FormsAuthentication.SignOut();
    return RedirectToAction("Login");
}

第三步：執行並測試

按下 F5 並執行應用。

6. Lab 20 — 在 Login 頁實現認證

第一步：增長數據註釋

打開 UserDetails.cs，而後增長 Data Annotation。

public class UserDetails
{

[StringLength(7,MinimumLength=2, ErrorMessage = "UserName length should be between 2 and 7")]
    public string UserName { get; set; }
    public string Password { get; set; }
}

第二步：在視圖中呈現錯誤信息

改變 Login.cshtml，呈現錯誤信息。

@using (Html.BeginForm("DoLogin", "Authentication", FormMethod.Post))
{
    @Html.LabelFor(c=>c.UserName)
    @Html.TextBoxFor(x=>x.UserName)
    @Html.ValidationMessageFor(x=>x.UserName)
......

注：此次咱們運用 Html.ValidationMessageFor，而不是Html.ValidationMessage。兩個作的是同一件事。Html.ValidationMessageFor 只能用於強類型視圖。

第三步：改變 DoLogin

改變 DoLogin 行爲方法以下：

[HttpPost]
public ActionResult DoLogin(UserDetails u)
{
    if (ModelState.IsValid)
    {
        EmployeeBusinessLayer bal = new EmployeeBusinessLayer();
        if (bal.IsValidUser(u))
        {
            FormsAuthentication.SetAuthCookie(u.UserName, false);
            return RedirectToAction("Index", "Employee");
        }
        else
        {
            ModelState.AddModelError("CredentialError", "Invalid Username or Password");
            return View("Login");
        }
    }
    else
    {
        return View("Login");
    }
}

第四步：執行並測試

按下 F5 並執行應用

7. Lab 21 — 在 Login 頁實現客戶端的認證

此次咱們將以不一樣的方式實現客戶端的認證。

第一步：下載 JQuery Unobtrusive Validation 文件

右擊項目，選擇「Manage Nuget Packages」。

點擊 Online，而後搜索「JQuery Unobtrusive」。

安裝「Microsoft JQuery Unobtrusive Validation」。

第二步：在視圖中引入 JQuery Validation 文件

在 Scripts 文件夾下增長三個 JavaScripts 文件。

JQuery-Someversion.js
JQuery.validate.js
JQuery.validate.unobtrusive

打開 Login.cshtml 文件，而後在頭部引入這三個 JavaScript 文件。

<script src="~/Scripts/jquery-1.8.0.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

第三步：執行並測試

按下 F5，執行應用。

8. Lab 21 的 Q&A

客戶端的認證是如何實現的？

正如你所看見的，不費多少力氣就實現了客戶端的認證。在 Login 視圖中，HTML 元素經過 HTML Helper 類產生。Helper 函數可以根據數據註釋屬性來生成帶有屬性附加的 HTML 標記。

例如：

@Html.TextBoxFor(x=>x.UserName)
@Html.ValidationMessageFor(x=>x.UserName)

上述的代碼產生以下的 HTML 代碼。

<input data-val="true" data-val-length="UserName length should be between 2 and 7" data-val-length-max="7" data-val-length-min="2" id="UserName" name="UserName" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true"> 
</span>

這些自定義的 HTML 屬性將會被「JQuery Unobtrusive Validation」文件使用，所以在客戶端自動實現認證。

自動的客戶端認證是 HTML Helper 類的第二個優點。

Unobtrusive JavaScript 的意思是什麼？

下面是 Wikipedia 所述。譯文爲：

Unobtrusive JavaScript 是一個在 Web 頁面中經常使用的 JavaScript 方法。儘管它沒有被正式定義，可是它的幾個基本的準則能夠被大概理解：