23.Chuong 23

CHƯƠNG 23 URL & Các phương thức Ajax Helper Trong chương này, tơi hồn tất hướng dẫn tơi phương thức helper MVC Framework thơng qua việc trình bày cho bạn phương pháp tạo URL, liên kết, Ajax-enabled element Ajax tính quan trọng rich web application (Một ứng dụng web gọi "rich" manh tính tương tác cao có đặc điểm, chức phong phú với giao diện người dùng sánh ngang, chí tốt ứng dụng desktop) MVC Framework bao gồm số tính hữu ích dựa thư viện jQuery Tôi cho bạn cách làm việc minh họa làm bạn sử dụng để tạo dạng Ajax-enabled liên kết Bảng 23-1 cung cấp nội dung tóm tắt cho chương Note: Bạn cần phải xóa lịch sử trình duyệt bạn từ ví dụ chương đến ví dụ Đây tơi xây dựng tính bước bạn lo lắng việc dự án thực tế Tôi thêm ghi để nhắc nhở bạn điểm chương này, bạn khơng có kết bạn mong đợi từ ví dụ điều để thử xóa lịch sử Chuẩn bị Example Project Tôi tiếp tục sử dụng project HelperMethods mà tạo Chương 21 thêm vào chương 22 Trong chương này, tạo controller gọi People, thể Liệt kê 23-1 Controller định nghĩa tập hợp model objects Person mà sử dụng để minh họa tính trợ giúp khác Listing 23-1 The Contents of the PeopleController.cs File using using using using using System; System.Collections.Generic; System.Linq; System.Text; System.Threading.Tasks; using System; using System.Linq; using System.Web.Mvc; using HelperMethods.Models; namespace HelperMethods.Controllers { public class PeopleController : Controller { User }, new Person {FirstName = "John", LastName = "Smith", Role = Role.User }, new Person {FirstName = "Anne", LastName = "Jones", Role = Role.Guest} }; public ActionResult Index() { return View(); } public ActionResult GetPeople() { return View(personData); } [HttpPost] public ActionResult GetPeople(string selectedRole) { if (selectedRole == null || selectedRole == "All") { return View(personData); } else { Role selected = (Role)Enum.Parse(typeof(Role), selectedRole); return View(personData.Where(p => p.Role == selected)); } } } } Tôi không sử dụng kỹ thuật controller Phương thức action Index trả view mặc định Tôi sử dụng hai phương thức action GetPeople để xử lý form đơn giản Các tính chương xuất view, mà tạo để minh họa phương pháp giúp đỡ khác Định nghĩa Styles CSS bổ sung Tôi cần phải thêm số CSS styles cho dự án, mà tạo Views / Shared / file _Layout.cshtml, thể Liệt kê 23-2 Tôi định nghĩa element áp dụng style chương Listing 23-2 Adding Styles to the _Layout.cshtml File @ViewBag.Title label { display: inline-block; width: 100px; } div.dataElem { margin: 5px; } h2 > label { width: inherit; } editor-label, editor-field { float: left; margin-top: 10px; } editor-field input { height: 20px; } editor-label { clear: left; } editor-field { margin-left: 10px; } input[type=submit] { float: left; clear: both; margin-top: 10px; } .column { float: left; margin: 10px; } table, td, th { border: thin solid black; border-collapse: collapse; padding: 5px; background-color: lemonchiffon; text-align: left; margin: 10px 0; } div.load { color: red; margin: 10px 0; font-weight: bold; } div.ajaxLink { margin-top: 10px; margin-right: 5px; float: left; } @RenderBody() Cài đặt gói NuGet MVC Framework dựa vào gói Microsoft Unobtrusive Ajax để thực xử lý 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 nhập vào lệnh sau đây: NuGet cài đặt vào project gói phần mềm thư viện jQuery mà phụ thuộc vào tạo thư mục Scripts chứa số tập tin JavaScript Tạo Links & URLs Một công việc view tạo liên kết URL mà người dùng dùng để điều hướng tới phần khác ứng dụng Trong chương trước, bạn thấy phần lớn phương pháp helper mà bạn sử dụng để tạo liên kết URL, muốn dành chút thời gian để tóm tắt lại trước chuyển sang số phương thức helper có sẵn cao cấp Bảng 232 mơ tả HTML helper có sẵn cho thấy ví dụ Tip: nhắc nhở, ích lợi việc sử dụng helper để tạo liên kết URL output bắt nguồn từ cấu hình định tuyến, có nghĩa thay đổi định tuyến tự động ánh xạ đến liên kết URL Để minh họa cho helper action, thêm Index.cshtml view vào thư mục Views / People, nội dung view thể Ví dụ 23-3 Listing 23-3 The Contents of the Index.cshtml File @{ ViewBag.Title = "Index"; Layout = "/Views/Shared/_Layout.cshtml"; }< h2>Basic Links & URLs Helper Output Url.Content("¡«/Content/Site.css") @Url.Content("¡«/Content/Site.css") Html.ActionLink("My Link", "Index", "Home") @Html.ActionLink("My Link", "Index", "Home") Url.Action("GetPeople", "People") @Url.Action("GetPeople", "People") Url.RouteUrl(new {controller = "People", action="GetPeople"}) @Url.RouteUrl(new { controller = "People", action = "GetPeople" }) Html.RouteLink("My Link", new {controller = "People", action="GetPeople"}) @Html.RouteLink("My Link", new { controller = "People", action = "GetPeople" }) Html.RouteLink("My Link", "FormRoute", new {controller = "People", action="GetPeople"}) @Html.RouteLink("My Link", "FormRoute", new { controller = "People", action = "GetPeople" }) View có chứa tập lời gọi helper mà liệt kê Bảng 23-2 thể kết bảng HTML Bạn khởi động ứng dụng điều hướng đến URL: / People / Index để thấy kết việc áp dụng lời gọi helper, hình 23-1 Tơi lấy ví dụ giúp bạn dễ dàng để thử nghiệm với thay đổi định tuyến nhìn thấy kết Sử dụng MVC Unobtrusive Ajax Ajax (hoặc AJAX, bạn quen thuộc hơn) viết tắt cho Asynchronous JavaScript and XML Thành phần XML khơng có nhiều khác biệt việc sử dụng phần asynchronous (bất đồng bộ) thành phần tạo nên sức mạnh Ajax Nó mơ hình cho u cầu liệu từ máy chủ background, mà không cần phải tải lại trang web MVC Framework chứa hỗ trợ tích hợp cho Ajax unobtrusive, điều có nghĩa bạn sử dụng phương thức helper để định nghĩa tính Ajax bạn, thay phải thêm mã lệnh khác vào View Tip: Các tính MVC Framework Ajax unobtrusive dựa jQuery Nếu bạn quen thuộc với cách mà jQuery xử lý Ajax bạn hiểu tính MVC Ajax Tạo View Synchronous Form Tôi bắt đầu phần việc tạo view cho action GetPeople controller, mà tạo /Views/People/GetPeople.cshtml Bạn xem nội dung tập tin Liệt kê 23-4 @using HelperMethods.Models @model IEnumerable @{ ViewBag.Title = "GetPeople"; Layout = "/Views/Shared/_Layout.cshtml"; } Get People FirstLastRole @foreach (Person p in Model) { @p.FirstName @p.LastName @p.Role } @using (Html.BeginForm()) { @Html.DropDownList("selectedRole", new SelectList( new[] { "All" }.Concat(Enum.GetNames(typeof(Role))))) Submit } Đây dạng strong view có kiểu model IEnumerable Tơi liệt kê đối tượng Person model để tạo dòng bảng HTML sử dụng helper Html.BeginForm để tạo form posts back đến action controller tạo View Form chứa lời gọi đến helper Html.DropDownList, mà sử dụng để tạo select element chứa option elements cho giá trị định nghĩa Role enumeration, cộng với giá trị "All" (Tôi sử dụng LINQ để tạo danh sách giá trị cho option elements cách kết hợp giá trị enum với mảng chứa chuỗi "All" nhất.) Form có nút submit form Hiệu ứng bạn sử dụng form để lọc đối tượng Person mà định nghĩa controller Liệt kê 23-1, hình 23-2 Để kiểm tra, khởi động ứng dụng điều hướng đến URL / People / GetPeople Đây minh họa đơn giản giới hạn HTML form, việc tồn trang nạp lại mẫu gửi Nó có nghĩa tồn nội dung trang Web phải tạo lại nạp từ máy chủ ( tác vụ tốn cho View phức tạp) đó, người dùng khơng thể thực việc khác với ứng dụng Họ phải chờ trang tạo ra, nạp, sau hiển thị lên trình duyệt Đối với ứng dụng đơn giản có trình duyệt máy chủ chạy máy trì hỗn khơng đáng kể Nhưng ứng dụng thực tế kết nối internet thực sự, synchronous forms làm cho người sử dụng bực dọc sử dụng ứng dụng web gây tốn băng thông máy chủ khả xử lý Chuẩn bị Project cho Unobtrusive Ajax Các tính Ajax unobtrusive cài đặt hai điểm ứng dụng Đầu tiên, tập tin Web.config (nằm thư mục gốc dự án) element configuration/appSettings chứa mục nhập cho thuộc tính UnobtrusiveJavaScriptEnabled, thuộc tính phải thiết lập true Ví dụ 23-5 (thuộc tính mặc định thiết lập true Visual Studio tạo project) Listing 23-5 Cho phép the Unobtrusive Ajax Feature file Web.config Ngồi việc kiểm tra cài đặt Web.config, tơi cần phải thêm tham chiếu đến thư viện jQuery JavaScript thực chức Ajax không phô trương từ gói NuGet mà tơi thêm vào lúc bắt đầu chương Bạn thể tham chiếu đến thư viện từ View riêng biệt, cách tiếp cận phổ biến để làm điều file layout tác động đến tất View mà sử dụng layout Trong Listing 23-6, bạn thấy tơi làm để thêm tham chiếu cho hai thư viện JavaScript vào tập tin /Views/Shared/_Layout.cshtml Listing 23-6 Thêm tham chiếu thư viện Unobtrusive Ajax JavaScript Libraries vào tập tin _Layout.cshtml : @ViewBag.Title label { display: inline-block; width: 100px; } div.dataElem { margin: 5px; } h2 > label { width: inherit; } editor-label, editor-field { float: left; margin-top: 10px; } editor-field input { height: 20px; } editor-label { clear: left; } editor-field { margin-left: 10px; } input[type=submit] { float: left; clear: both; margin-top: 10px; } column { float: left; margin: 10px; } table, td, th { border: thin solid black; border-collapse: collapse; padding: 5px; background-color: lemonchiffon; text-align: left; margin: 10px 0; Tip: bạn cần phải xóa lịch sử duyệt web trước thấy thay đổi Ensuring Graceful Degradation for Links Tôi gặp phải vấn đề với liên kết Ajax-enabled làm với form Khi khơng có hỗ trợ JavaScript trình duyệt, nhấp vào liên kết hiển thị đoạn HTML mà phương thức action GetPeopleData tạo Tơi giải điều cách sử dụng thuộc tính AjaxOptions.Url để định URL cho yêu cầu Ajax Đối với ví dụ này, tơi định hành động GetPeople cho helper Ajax.ActionLink, Listing 23-15 Listing 23-15 Tạo Graceful Ajax-Enabled Links tập tin GetPeople.cshtml @foreach (string role in Enum.GetNames(typeof(Role))) { @Ajax.ActionLink(role, "GetPeople", new { selectedRole = role }, new AjaxOptions { UpdateTargetId = "tableBody", Url = Url.Action("GetPeopleData", new { selectedRole = role }) }) } Đây lý với liên kết lại tạo thêm đối tượng AjaxOptions cho sử dụng mà tạo khối mã Razor dành cho form element Đối tượng AjaxOptions độc lập cho phép định giá trị khác cho thuộc tính Url dành cho liên kết hỗ trợ graceful degradation cho trình duyệt khơng sử dụng JavaScript Làm việc với Ajax Callbacks Lớp AjaxOptions định nghĩa tập hợp thuộc tính định rõ function JavaScript gọi điểm khác lifecycle Ajax request Những thuộc tính mơ tả Bảng 23-4 Table 23-4 Các thuộc tính AjaxOptions Callback Từng thuộc tính AjaxOptions callback có liên quan đến kiện Ajax hỗ trợ thư viện jQuery Trong Listing 23-16, bạn nhìn thấy cách tơi sử dụng thẻ để định nghĩa số function JavaScript để thông báo tiến ... thuộc tính mơ tả 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 id gán cho thẻ HTML View (Listing 23- 10) Khi người... thuộc tính mơ tả Bảng 23- 4 Table 23- 4 Các thuộc tính AjaxOptions Callback Từng thuộc tính AjaxOptions callback có liên quan đến kiện Ajax hỗ trợ thư viện jQuery Trong Listing 23- 16, bạn nhìn thấy... helper action, thêm Index.cshtml view vào thư mục Views / People, nội dung view thể Ví dụ 23- 3 Listing 23- 3 The Contents of the Index.cshtml File @{ ViewBag.Title = "Index"; Layout = "/Views/Shared/_Layout.cshtml";