23.Chuong 23

Trong các chương trước, bạn đã thấy phần lớn các phương pháp helper mà bạn có thể sử dụng để tạo ra các liên kết và URL, nhưng tôi muốn dành một chút thời gian để tóm... MVC Framework ch

Note: Bạn sẽ cần phải xóa lịch sử trình duyệt khi bạn đi từ một ví dụ trong chương này đến ví dụ tiếp theo Đây là do tôi xây dựng tính năng từng bước một và bạn cũng không phải lo lắng về việc này trong một dự án thực tế Tôi đã thêm các ghi chú để nhắc nhở bạn tại các điểm chính trong chương này, nhưng nếu bạn không có kết quả bạn đang mong đợi từ một ví dụ thì điều đầu tiên để thử là xóa lịch sử

Chuẩn bị Example Project

Tôi sẽ tiếp tục sử dụng project HelperMethods mà tôi tạo ra trong Chương 21 và thêm vào chương 22 Trong chương này, tôi đã tạo ra một controller mới gọi là People, thể hiện trong Liệt kê 23-1 Controller này định nghĩa một tập hợp các model objects Person mà tôi sẽ sử dụng để minh họa các tính năng trợ giúp khác nhau

Listing 23-1 The Contents of the PeopleController.cs File

Tôi không sử dụng bất kỳ kỹ thuật mới trong controller này Phương thức action Index trả về view mặc định Tôi sẽ sử dụng hai phương thức action GetPeople để xử

lý một form đơn giản Các tính năng mới trong chương này sẽ xuất hiện trong các view, mà tôi tạo để minh họa phương pháp giúp đỡ khác nhau

Định nghĩa Styles CSS bổ sung

Tôi cũng cần phải thêm một số CSS styles mới cho dự án, cái mà tôi đã tạo ra trong Views / Shared / file _Layout.cshtml, như thể hiện trong Liệt kê 23-2 Tôi sẽ định nghĩa các element sẽ được áp dụng các style mới trong chương này

Listing 23-2 Adding Styles to the _Layout.cshtml File

<! DOCTYPE html >

< html >

< head >

< meta charset ="utf-8" />

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

< title >@ViewBag.Title</ title >

< style type ="text/css">

Cài đặt các gói NuGet

MVC Framework dựa vào gói Microsoft Unobtrusive Ajax để thực hiện và xử lý các yêu cầu Ajax Để cài đặt gói này, chọn Package Manager Console từ menu Visual Studio Tools Library Package Manager và nhập vào lệnh sau đây:

NuGet sẽ cài đặt vào project các gói phần mềm và thư viện jQuery mà nó phụ thuộc vào và tạo ra một thư mục Scripts chứa một số tập tin JavaScript

Tạo các Links & URLs cơ bản

Một trong những công việc cơ bản nhất trong một view là tạo ra một liên kết hoặc URL mà người dùng có thể dùng để điều hướng tới phần khác của ứng dụng Trong các chương trước, bạn đã thấy phần lớn các phương pháp helper mà bạn có thể sử dụng để tạo ra các liên kết và URL, nhưng tôi muốn dành một chút thời gian để tóm

tắt lại trước khi chuyển sang một số phương thức helper có sẵn cao cấp hơn Bảng

23-2 mô tả những HTML helper có sẵn và nó cho thấy ví dụ của từng cái

Tip: như một sự nhắc nhở, ích lợi của việc sử dụng các helper để tạo ra các liên kết và URL là output bắt nguồn từ các cấu hình định tuyến, có nghĩa là một sự thay đổi trong các định tuyến cũng sẽ được tự động ánh xạ đến các liên kết và URL

Để minh họa cho những helper này trong action, tôi đã thêm một Index.cshtml view vào thư mục Views / People, nội dung của view được thể hiện trong Ví dụ 23-3

Listing 23-3 The Contents of the Index.cshtml File

< td >Html.ActionLink("My Link", "Index", "Home")</ td >

< td >@Html.ActionLink("My Link", "Index", "Home")</ td >

Sử dụng MVC Unobtrusive Ajax

Ajax (hoặc AJAX, nếu bạn quen thuộc hơn) là viết tắt cho Asynchronous JavaScript and XML Thành phần XML không có nhiều khác biệt trong việc sử dụng nhưng

phần asynchronous (bất đồng bộ) là thành phần chính tạo nên sức mạnh của Ajax Nó

là một mô hình cho các yêu cầu dữ liệu từ máy chủ trong background, mà không cần phải tải lại trang web MVC Framework chứa các hỗ trợ tích hợp cho Ajax unobtrusive, điều này có nghĩa là bạn sử dụng phương thức helper để định nghĩa tính năng Ajax của bạn, thay vì phải thêm các mã lệnh khác vào View

Tip: Các tính năng MVC Framework Ajax unobtrusive dựa trên jQuery Nếu như bạn

đã quen thuộc với cách mà jQuery xử lý Ajax thì bạn sẽ hiểu các tính năng MVC Ajax

Tạo View Synchronous Form

Tôi sẽ bắt đầu phần này bằng việc tạo các view cho các action GetPeople trong controller, mà tôi đã tạo trong /Views/People/GetPeople.cshtml Bạn có thể xem nội dung của tập tin này trong Liệt kê 23-4

@Html.DropDownList("selectedRole", new SelectList(

new[] { "All" }.Concat( Enum GetNames(typeof(Role)))))

< button type ="submit">Submit</ button >

</ div >

}

Đây là một dạng strong view có kiểu model là IEnumerable <Person> Tôi liệt kê các đối tượng Person trong model để tạo ra các dòng trong bảng HTML và sử dụng các helper Html.BeginForm để tạo ra một form posts back đến action và controller đã tạo

ra View đó Form này chứa một lời gọi đến các helper Html.DropDownList, mà tôi sử dụng để tạo ra một select element chứa các option elements cho mỗi giá trị được định

nghĩa bởi Role enumeration, cộng với giá trị "All" (Tôi đã sử dụng LINQ để tạo ra danh sách các giá trị cho các option elements bằng cách kết hợp các giá trị trong enum với một mảng chứa một các chuỗi "All" duy nhất.) Form này có một nút submit form Hiệu ứng là bạn có thể sử dụng form này để lọc các đối tượng Person mà tôi được định nghĩa ở controller trong Liệt kê 23-1, như trong hình 23-2 Để kiểm tra, khởi động ứng dụng và điều hướng đến URL / People / GetPeople

Đây là một minh họa đơn giản của sự giới hạn căn bản trong các HTML form, đó là việc toàn bộ trang được nạp lại khi mẫu được gửi Nó có nghĩa là toàn bộ nội dung của trang Web phải được tạo lại và nạp từ máy chủ ( có thể là một tác vụ tốn kém cho các View phức tạp) và trong khi đó, người dùng không thể thực hiện bất kỳ việc khác với ứng dụng Họ phải chờ cho đến khi các trang mới được tạo ra, nạp, và sau đó hiển thị lên trình duyệt

Đối với một ứng dụng đơn giản có trình duyệt và máy chủ đang chạy trên cùng một máy như thế này thì sự trì hoãn là không đáng kể Nhưng đối với các ứng dụng thực tế trên các kết nối internet thực sự, synchronous forms có thể làm cho người sử dụng

bực dọc khi sử dụng ứng dụng web và gây tốn kém về băng thông máy chủ cũng như khả năng xử lý

Chuẩn bị Project cho Unobtrusive Ajax

Các tính năng Ajax unobtrusive được cài đặt tại hai điểm trong ứng dụng Đầu tiên, trong tập tin Web.config (nằm trong thư mục gốc của dự án) element configuration/appSettings chứa một mục nhập cho thuộc tính UnobtrusiveJavaScriptEnabled, thuộc tính này phải được thiết lập là true như trong Ví

dụ 23-5 (thuộc tính này mặc định được thiết lập là true khi Visual Studio tạo cái project)

Listing 23-5 Cho phép the Unobtrusive Ajax Feature trong file Web.config

<? xml version ="1.0" encoding ="utf-8" ?>

< configuration >

< appSettings >

< add key ="webpages:Version" value ="3.0.0.0" />

< add key ="webpages:Enabled" value ="false" />

< add key ="ClientValidationEnabled" value ="true" />

< add key ="UnobtrusiveJavaScriptEnabled" value ="true" />

Listing 23-6 Thêm tham chiếu các thư viện Unobtrusive Ajax JavaScript Libraries

vào tập tin _Layout.cshtml :

<! DOCTYPE html >

< html >

< head >

< meta charset ="utf-8" />

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

< title >@ViewBag.Title</ title >

< style type ="text/css">

< script src ="∼/Scripts/jquery-1.10.2.js"></ script >

< script src ="∼/Scripts/jquery.unobtrusive-ajax.js"></ script >

Tạo Form Unobtrusive Ajax

Bây giờ tôi sẳn sàng để bắt đầu việc áp dụng tính năng Ajax phô trương cho ứng dụng, bắt đầu với form unobtrusive Ajax Trong phần tiếp theo, tôi sẽ điểm qua các quá trình thay thế một form đồng bộ thông thường với một form unobtrusive Ajax tương đương và giải thích cách hoạt động của tính năng form unobtrusive Ajax

Chuẩn bị Controller

Mục tiêu là chỉ những dữ liệu trong các thẻ HTML <table> bị thay thế khi người dùng nhấp chuột vào nút Submit trong ứng dụng Điều đó có nghĩa rằng điều đầu tiên mà tôi cần phải làm là cấu trúc lại các action methods trong controller People để tôi có thể chỉ lấy dữ liệu tôi muốn thông qua một action con Bạn có thể thấy những thay đổi tôi đã thực hiện cho các controller People trong Bảng liệt kê 23-7

Listing 23-7 Sắp xếp các Action Method trong tập tin PeopleController.cs

private Person[] personData = {

new Person {FirstName = "Adam", LastName = "Freeman", Role = Role.Admin},

new Person {FirstName = "Jacqui", LastName = "Griffyth", Role

= Role.User}, new Person {FirstName = "John", LastName = "Smith", Role = Role.User},

new Person {FirstName = "Anne", LastName = "Jones", Role = Role.Guest}

Tôi đã tạo ra cho phương thức action GetPeopleData mới một tập tin partial view mới: /Views/People/GetPeopleData.cshtml Bạn có thể xem nội dung của view này

trong Listing 23-8 View này sẽ chịu trách nhiệm tạo các thẻ <tr> trong bảng bằng cách sử dụng enumeration của các đối tượng Person được truyền từ phương thức action

Listing 23-8 Nội dung tập tin GetPeopleData.cshtml

@using HelperMethods.Models

@model IEnumerable< person >

@foreach (Person p in Model)

@Html.DropDownList("selectedRole", new SelectList(

new[] { "All" }.Concat( Enum GetNames(typeof(Role)))))

< button type ="submit">Submit</ button >

</ div >

}

Tôi đã thay đổi kiểu view model thành chuỗi, cái mà tôi đã truyền vào phương thức Html.Action helper để gọi action con GetPeopleData Việc này tạo ra partial view và tạo ra các dòng của bảng

Tạo ra form Ajax

Sau những thay đổi trên, tôi vẫn còn form đồng bộ trong ứng dụng, nhưng tôi đã tách các tính năng ra khỏi controller để tôi có thể yêu cầu các dòng của bảng chỉ thông qua action GetPeopleData Phương thức action mới này sẽ là mục tiêu của yêu cầu Ajax và bước tiếp theo như trong Listing 23-10 là cập nhật View GetPeople.cshtml để post các form được xử lý bằng Ajax

Listing 23-10 Tạo form Unobtrusive Ajax trong tập tin GetPeople.cshtml

@Html.DropDownList("selectedRole", new SelectList(

new[] { "All" }.Concat( Enum GetNames(typeof(Role)))))

< button type ="submit">Submit</ button >

Lớp AjaxOptions trong namespace System.Web.Mvc.Ajax, định nghĩa các thuộc tính cho tôi cấu hình cách yêu cầu không đồng bộ đến máy chủ được thực hiện và những

gì xảy ra với dữ liệu quay lại Những thuộc tính này được mô tả trong Bảng 23-3

Table 23-3 Các thuộc tính AjaxOptions

Trong listing, tôi đã thiết lập thuộc tính UpdateTargetId = tableBody Đây là id tôi gán cho các thẻ <tbody> HTML trong View (Listing 23-10) Khi người dùng nhấp chuột vào nút Submit, một yêu cầu không đồng bộ sẽ được thực hiện đối với phương thức action GetPeopleData và các đoạn HTML trả về được sử dụng để thay thế các element hiện có trong tbody

Tip: Lớp AjaxOptions cũng định nghĩa các thuộc tính xác định callbacks cho các giai

đoạn khác nhau trong lifecycle của request Chi tiết sẽ có trong phần "Working with Ajax Callbacks" ở phần sau của chương này

Tất cả những gì tôi đã làm là thay thế các phương thức Html.BeginForm với Ajax.BeginForm và đảm bảo rằng tôi có một mục tiêu cho các nội dung mới Mọi thứ khác xảy ra tự động và kết quả là một form không đồng bộ

Khi bạn đang chạy thử với trình duyệt và máy chủ trên cùng một máy thì rất khó để

có thể nhận biết được quá trình chạy như mô tả ở trên nhưng bạn có thể theo dõi trình duyệt đang thực hiện các yêu cầu Ajax cho các fragment của HTML bằng cách sử dụng các công cụ F12 của trình duyệt Những công cụ này cho phép bạn giám sát các yêu cầu mạng mà cho trình duyệt đã yêu cầu và trong hình 23-3, bạn có thể thấy các công cụ Internet Explorer hiển thị một cuộc gọi đến phương thức action là GetPeopleData

Hiểu cách hoạt động của Unobtrusive Ajax

Khi tôi gọi phương thức Ajax.BeginForm helper, các tùy chọn sử dụng các đối tượng AjaxOptions mà tôi chỉ định được chuyển thành thuộc tính áp dụng cho form View trong Listing 23-10 tạo ra form sau:

< form action ="/People/GetPeopleData" data-ajax ="true" data-ajaxmode ="replace" data-ajax

update ="#tableBody" id ="form0" method ="post">

Khi trang HTML được tạo ra từ view GetPeople.cshtml tải bởi trình duyệt, JavaScript trong thư viện jquery.unobtrusive-ajax.js sẽ quét các thẻ HTML và xác định form Ajax bằng cách tìm kiếm các yếu tố có một thuộc tính dữ liệu ajax với một giá trị true

Các thuộc tính khác có tên bắt đầu với dữ liệu ajax chứa các giá trị tôi đã chỉ định sử dụng các lớp AjaxOptions Những tùy chọn cấu hình này được sử dụng để cấu hình jQuery, vốn được tích hợp hỗ trợ cho việc quản lý các yêu cầu Ajax

Tip: Bạn không cần phải sử dụng sự hỗ trợ của MVC Framework cho unobtrusive

Ajax Có rất nhiều lựa chọn thay thế có sẵn, bao gồm cả sử dụng jQuery trực tiếp Điều đó có nghĩa rằng, chọn một kỹ thuật và bám sat theo nó Tôi khuyên bạn nên tránh việc trộn lẫn sự hỗ trợ của MVC Framework cho unobtrusive Ajax trương với

các kỹ thuật và các thư viện khác trong cùng một View, vì có thể có một số tác dụng không mong muốn, chẳng hạn như nhân đôi hoặc giảm yêu cầu Ajax

Cài đặt tùy chọn Ajax

Tôi có thể điều chỉnh các hành vi của các yêu cầu Ajax bằng cách thiết lập các giá trị cho các thuộc tính của các đối tượng AjaxOptions mà tôi truyền cho phương thức helper Ajax.BeginForm Trong các phần sau, tôi sẽ giải thích mỗi tùy chọn làm gì và

vì sao chúng lại hữu ích

Ensuring Graceful Degradation

Khi tôi cài đặt form Ajax trong Listing 23-10, tôi đã truyền vào trong tên của phương thức action mà tôi muốn được gọi là bất đồng bộ Trong ví dụ, đó là action GetPeopleData tạo ra một partial view có chứa một đoạn mã HTML

Một vấn đề với cách tiếp cận này là nó không vận hành tốt nếu người dùng đã vô hiệu hóa JavaScript (hoặc đang sử dụng trình duyệt không hỗ trợ JavaScript) Trong trường hợp này, khi người dùng submit một form, màn hình trình duyệt loại bỏ các trang HTML hiện hành và thay thế nó bằng đoạn mã trả về bởi phương thức action Kết quả có thể được nhìn thấy trong hình 23-4

Note: Tôi sử dụng Google Chrome cho hình này vì dễ dàng để bật tắt JavaScript

Cách đơn giản nhất để giải quyết vấn đề này là sử dụng thuộc tính AjaxOptions.Url chỉ định URL đích cho các yêu cầu bất đồng bộ hơn là chỉ rõ tên action như là một đối số cho phương thức Ajax.BeginForm, như trong Listing 23-11

Listing 23-11 Form Ensuring Gracefully Degrading trong tập tin GetPeople.cshtml

@Html.DropDownList("selectedRole", new SelectList(

new[] { "All" }.Concat( Enum GetNames(typeof(Role)))))

< button type ="submit">Submit</ button >

</ div >

}

Tôi đã sử dụng phương thức helper Url.Action để tạo ra một URL mà sẽ gọi action GetPeopleData, và sử dụng phiên bản của phương thức Ajax.BeginForm cho phép chỉ một tham số AjaxOptions Điều này có tác dụng tạo nên một form sẽ postback lại phương thức action xứ nếu JavaScript chưa được kích hoạt, như thế này:

< form action ="/People/GetPeople" data-ajax ="true" data-ajax-mode ="replace"

data-ajax-update ="#tableBody" data-ajax-url ="/People/GetPeopleData"

id ="form0"

method ="post">

Nếu JavaScript đã được bật, thì thư viện unobtrusive Ajax sẽ lấy URL đích từ thuộc tính mô tả data-ajax-url, trong đó tham chiếu đến action con Nếu Javascript bị vô hiệu hóa, thì trình duyệt sẽ sử dụng kỹ thuật form posting thông thường, trong đó URL đích sẽ được lấy từ thuộc tính mô tả action, cái mà trỏ trở lại tại phương thức action sẽ tạo ra một trang HTML hoàn chỉnh

Caution: Bạn có thể thắc mắc tại sao tôi lại làm ra một giải pháp lớn như vậy về

người dùng có JavaScript bị vô hiệu hóa Sau cùng, ai lại đi vô hiệu hóa JavaScripts? Nhưng trong thực tế, việc này rất phổ biến ở hai nhóm người dùng Nhóm thứ nhất gồm những người dùng mà nghiêm trọng hóa trong việc bảo mật IT của họ và họ vô hiệu hóa bất cứ điều gì mà có thể được sử dụng để làm cơ sở cho một cuộc tấn công, cái mà Javascript đã được biết đến trong những năm qua Nhóm thứ hai là những người sử dụng trong các tập đoàn lớn, trong đó áp dụng các chính sách vô cùng hạn chế trong lĩnh vực an ninh IT của họ (mặc dù, theo kinh nghiệm của tôi, máy tính của các công ty đang cài đặt bảo mật rất kém và đa số chỉ làm phiền người sử dụng) Bạn

có thể bỏ qua phần cài đặt này nếu bạn cảm thấy bạn có thể bỏ qua các chuyên gia bảo mật và những người làm việc cho các công ty lớn Nhưng vì chúng ta có thể có người dùng đa dạng và cũng như những người am hiểu công nghệ, tôi luôn dành thời gian để chắc chắn rằng tôi có hỗ trợ họ

Cung cấp phản hồi cho người dùng khi đang thực hiện một yêu cầu Ajax

Một hạn chế của việc sử dụng Ajax là nó không rõ ràng cho người sử dụng biết được rằng một điều gì đó hiện đang xảy ra, bởi vì yêu cầu đến máy chủ được thực hiện sau nền hệ thống Tôi có thể thông báo cho người dùng rằng một yêu cầu đang được thực hiện bằng cách sử dụng các thuộc tính AjaxOptions.LoadingElementId và AjaxOptions.LoadingElementDuration Listing 23-12 cho thấy làm thế nào tôi đã áp dụng các thuộc tính trong các tập tin view GetPeople.cshtml

Listing 23-12 Phản hổi người dùng trong tập tin GetPeople.cshtml: