23 chuong 23 tủ tài liệu bách khoa

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 độ yêu cầu Ajax sử dụng thuộc tính thể Bảng 23-4 để định chức trình xử lý cho kiện Ajax Listing 23-16 Sử dụng Ajax Callbacks tập tin GetPeople.cshtml @using HelperMethods.Models @model string @{ ViewBag.Title = "GetPeople"; Layout = "/Views/Shared/_Layout.cshtml"; AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "tableBody", Url = Url.Action("GetPeopleData"), LoadingElementId = "loading", LoadingElementDuration = 1000, Confirm = "Do you wish to request new data?" }; } function OnBegin() { alert("This is the OnBegin Callback"); } function OnSuccess(data) { alert("This is the OnSuccessCallback: " + data); } function OnFailure(request, error) { alert("This is the OnFailure Callback:" + error); } function OnComplete(request, status) { alert("This is the OnComplete Callback: " + status); } Get People

Loading Data

First Last Role @Html.Action("GetPeopleData", new { selectedRole = Model }) @using (Ajax.BeginForm(ajaxOpts)) { @Html.DropDownList("selectedRole", new SelectList( new[] { "All" }.Concat(Enum.GetNames(typeof(Role))))) Submit } @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 }), OnBegin = "OnBegin", OnFailure = "OnFailure", OnSuccess = "OnSuccess", OnComplete = "OnComplete" }) } Tôi định nghĩa bốn chức năng, cho callback Với ví dụ này, đơn giản dễ hiểu hiển thị thông báo cho người sử dụng chức Với thay đổi này, nhấp vào liên kết hiển thị chuỗi hộp thội để báo cáo tiến độ yêu cầu Ajax, thể hình 23-8 Hiển thị hộp thoại cho người dùng cho callback điều hay để làm với Ajax callbacks, thể trình tự mà chúng gọi Những chức Javascript dùng với mục đích nào: thao tác với HTML DOM, kích hoạt yêu cầu bổ sung, v.v Một điều hữu ích để làm với callbacks xử lý liệu JSON, thứ mà mô tả phần Làm việc với JSON Cho đến ví dụ Ajax, máy chủ tạo mảnh HTML gửi chúng đến trình duyệt Đây kỹ thuật hoàn toàn chấp nhận được, rườm rà, dài dòng (vì máy chủ gửi yếu tố HTML với liệu) hạn chế thực với liệu trình duyệt Một cách để giải hai vấn đề sử dụng định dạng JavaScript Object Notation (JSON), mà ngơn ngữ độc lập thể liệu Nó bắt nguồn từ ngơn ngữ JavaScript, xuất từ lâu sử dụng rộng rãi Trong phần này, cho bạn cách để tạo phương thức action trả liệu JSON, làm để xử lý liệu trình duyệt Tip: Trong Chương 27, tơi mơ tả tính Web API, phương pháp thay cho việc tạo dịch vụ Web Thêm JSON để hỗ trợ Controller MVC Framework làm cho việc tạo phương thức action mà tạo JSON liệu trở nên đơn giản Bạn thấy cách tơi thêm phương thức action vào controller People Listing 23-17 Listing 23-17 Một phương thức Action trả liệu JSON tập tin PeopleController.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using HelperMethods.Models; namespace HelperMethods.Controllers { public class PeopleController : Controller { 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} }; public ActionResult Index() { return View(); } private IEnumerable GetData(string selectedRole) { IEnumerable data = personData; if (selectedRole != "All") { Role selected = (Role)Enum.Parse(typeof(Role), selectedRole); data = personData.Where(p => p.Role == selected); } return data; } public JsonResult GetPeopleDataJson(string selectedRole = "All") { IEnumerable data = GetData(selectedRole); return Json(data, JsonRequestBehavior.AllowGet); } public PartialViewResult GetPeopleData(string selectedRole = "All") { return PartialView(GetData(selectedRole)); } public ActionResult GetPeople(string selectedRole = "All") { return View((object)selectedRole); } } } Vì muốn biểu diễn liệu hai định dạng khác (HTML JSON) nên tái cấu controller để có phương pháp GetData chung (và riêng) có trách nhiệm thực việc lọc Tơi thêm phương thức action có tên gọi GetPeopleDataJson trả đối tượng JsonResult Đây kiểu đặc biệt ActionResult để nói với view engine muốn trả lại liệu kiểu JSON cho client khơng phải HTML (Bạn tìm hiểu thêm lớp ActionResult vai trò MVC Framework Chương 17.) Tơi tạo JsonResult cách gọi phương pháp JSON phương thức action, truyền vào liệu mà muốn chuyển đổi sang định dạng JSON: return Json(data, JsonRequestBehavior.AllowGet); Trong trường hợp này, truyền vào giá trị AllowGet từ Enumeration JsonRequestBehavior Theo mặc định, liệu JSON gửi để đáp ứng với yêu cầu POST, cách truyền giá trị tham số cho phương pháp JSON, tơi nói với MVC Framework trả lời yêu cầu GET Caution: Bạn nên sử dụng JsonRequestBehavior.AllowGet liệu bạn trả là private Do vấn đề an ninh nhiều trình duyệt Web, bên thứ ba chặn liệu JSON mà bạn trả lại để trả lời yêu cầu GET, lý mặc định JsonResult không trả lời yêu cầu GET Trong hầu hết trường hợp, để thay bạn sử dụng yêu cầu POST để lấy liệu JSON tránh vấn đề Để biết thêm thông tin, xem link: http://haacked.com/archive/2009/06/25/Json-hijacking.aspx Xử lý Json trình duyệt Để xử lý JSON mà nhận từ máy chủ ứng dụng MVC Framework, định nghĩa chức JavaScript sử dụng thuộc tính callback onSuccess lớp AjaxOptions Trong Listing 23-18, bạn nhìn thấy cách cập nhật tập tin view GetPeople.cshtml để loại bỏ handler function mà định nghĩa phần cuối sử dụng callback onSuccess để xử lý liệu JSON Listing 23-18 Làm việc với liệu JSON tập tin GetPeople.cshtml @using HelperMethods.Models @model string @{ ViewBag.Title = "GetPeople"; Layout = "/Views/Shared/_Layout.cshtml"; AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "tableBody", Url = Url.Action("GetPeopleData"), LoadingElementId = "loading", LoadingElementDuration = 1000, Confirm = "Do you wish to request new data?" }; } function processData(data) { var target = $("#tableBody"); target.empty(); for (var i = 0; i < data.length; i++) { var person = data[i]; target.append("" + person.FirstName + "" + person.LastName + "" + person.Role + " "); } } Get People

Loading Data

First Last Role @Html.Action("GetPeopleData", new { selectedRole = Model }) @using (Ajax.BeginForm(ajaxOpts)) { @Html.DropDownList("selectedRole", new SelectList( new[] { "All" }.Concat(Enum.GetNames(typeof(Role))))) Submit } @foreach (string role in Enum.GetNames(typeof(Role))) { @Ajax.ActionLink(role, "GetPeople", new { selectedRole = role }, new AjaxOptions { Url = Url.Action("GetPeopleDataJson", new { selectedRole = role }), OnSuccess = "processData" }) } Tơi định nghĩa function processData mớicó chứa vài mã code jQuery để sử lý đối tượng Json sử dụng chúng để tạo thẻ để đưa vào Tip Mặc dù tơi thích jQuery tơi khơng sâu vào jQuery sách riêng đề tài Nếu bạn muốn tìm hiểu thêm jQuery bạn tìm đọc jQuery Pro 2.0 (được xuất Apress năm 2013) Chú ý tơi xố giá trị cho thuộc tính UpdateTargetId đối tượng AjaxOptions mà tơi tạo để dùng cho liên kết Nếu bạn quên làm chuyện này, tính unobtrusive Ajax cố gắng xử lý liệu JSON mà lấy từ máy chủ dạng HTML Điều thường xảy nội dung phần tử mục tiêu bị xóa, khơng thay liệu Bạn thấy kết việc chuyển đổi sang JSON cách khởi động ứng dụng, điều hướng đến / People / GetPeople URL, nhấp vào liên kết Như hình 23-9 cho thấy, không nhận kết Đặc biệt, thông tin hiển thị cột Role bảng khơng xác Tơi giải thích lý điều xảy cho bạn thấy làm để làm phần Chuẩn bị liệu cho Encoding Khi gọi phương thức JSON từ phương thức hành động GetPeopleDataJson, để MVC Framework tự hiểu làm để mã hóa đối tượng People định dạng JSON MVC Framework khơng biết chút kiểu model ứng dụng Do đó, cố gắng để đốn cần phải làm Dưới cách MVC Framework thể đối tượng People JSON: {"PersonId":0,"FirstName":"Adam","LastName":"Freeman", "BirthDate":"\/Date(62135596800000)\/","HomeAddress":null,"IsApproved":false,"Role":0} Nhìn lộn xộn, thật thơng minh đưa kết gần với mà tơi cần Trước tiên, tất thuộc tính định nghĩa lớp Person thể JSON, không gán giá trị cho vài thể controller People Trong vài trường hợp, giá trị mặc định cho kiểu sử dụng (ví dụ false sử dụng cho IsApproved), có giá trị null sử dụng (chẳng hạn cho HomeAddress) Một số giá trị chuyển đổi thành dạng dễ dàng bên dịch JavaScript, chẳng hạn thuộc tính BirthDate, khác khơng xử lý, chẳng hạn sử dụng cho thuộc tính Role thay Admin VIEW DỮ LIỆU JSON Thật hữu ích xem liệu JSON mà phương thức action bạn trả cách dễ để làm điều nhập vào URL mà đích action vào trình duyệt: http://localhost:13949/People/GetPeopleDataJson?selectedRole=Guest Bạn làm việc nhiều trình duyệt, hầu hết buộc bạn phải lưu mở tập tin văn trước bạn xem nội dung JSON Tơi thích sử dụng trình duyệt Google Chrome cho việc cách tiện lơi để hiển thị liệu JSON cửa sổ trình duyệt chính, khiến cho q trình nhanh có nghĩa bạn khơng kết thúc với tá cửa sổ tập tin text Tôi đề nghị Fiddler (www.fiddler2.com), mà Web proxy debug tuyệt vời cho phép bạn đào sâu vào chi tiết liệu gửi trình duyệt máy chủ MVC Framework cố gắng, tơi nhận thuộc tính mà tơi khơng sử dụng giá trị Role cách thực có ích Đây tình điển hình dựa mã hóa JSON mặc định, luôn yệu cầu vài chuẩn bị cho liệu bạn muốn gửi cho client Trong Listing 23-19, bạn thấy cách tơi chỉnh sửa phương thức hành động GetPeopleDataJson controller People để chuẩn bị liệu mà truyền vào cho phương thức JSON Listing 23-19 Chuẩn bị đối tượng liệu cho JSON Encoding tập tin PeopleController.cs public JsonResult GetPeopleDataJson(string selectedRole = "All") { var data = GetData(selectedRole).Select(p => new { FirstName = p.FirstName, LastName = p.LastName, Role = Enum.GetName(typeof(Role), p.Role) }); return Json(data, JsonRequestBehavior.AllowGet); } Tôi sử dụng LINQ để tạo chuỗi đối tượng mà chứa thuộc tính FirstName LastName từ đối tượng People, với chuỗi đại diện cho giá trị Role Tác dụng thay đổi nhận liệu JSON mà chứa thuộc tính mà tơi muốn, thể mã jQuery hữu ích hơn: {"FirstName":"Adam","LastName":"Freeman","Role":"Admin"} Figure 23-10 thay đổi kết hiển thị trình duyệt Tất nhiên, bạn khơng phủ nhận thuộc tính khơng sử dụng khơng gửi bạn thấy cột Role chứa giá trị Tip bạn cần phải xóa liệu duyệt web để thấy thay đổi ví dụ Dò tìm yêu cầu Ajax phương thức Action Controller People có hai phương thức action tơi hỗ trợ yêu cầu cho liệu HTML JSON Đây thường cách tạo controllers, tơi thích phương pháp action ngắn đơn giản, bạn không cần phải làm theo cách MVC Framework cung cấp cách đơn giản để dò tìm u cầu Ajax, điều có nghĩa bạn tạo phương thức hành động để xử lý liệu đa định dạng Trong Listing 23-20, bạn thấy cách tơi tái cấu controller Person để chứa phương thức action để xử lý JSON HTML Listing 23-20 Tạo phương thức action tập tin PersonController.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using HelperMethods.Models; namespace HelperMethods.Controllers { public class PeopleController : Controller { 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} }; public ActionResult Index() { return View(); } public ActionResult GetPeopleData(string selectedRole = "All") { IEnumerable data = personData; if (selectedRole != "All") { Role selected = (Role)Enum.Parse(typeof(Role), selectedRole); data = personData.Where(p => p.Role == selected); } if (Request.IsAjaxRequest()) { var formattedData = data.Select(p => new { FirstName = p.FirstName, LastName = p.LastName, Role = Enum.GetName(typeof(Role), p.Role) }); return Json(formattedData, JsonRequestBehavior.AllowGet); } else { return PartialView(data); } } public ActionResult GetPeople(string selectedRole = "All") { return View((object)selectedRole); } } } Tôi sử dụng phương thức Request.IsAjaxRequest để dò tìm u cầu Ajax cung cấp định dạng JSON kết true Có vài hạn chế mà bạn nên biết trước làm theo phương pháp Trước tiên, phương thức IsAjaxRequest trả true trình duyệt bao gồm X-request- với header request thiết lập giá trị cho XMLHttpRequest Đây quy ước sử dụng rộng rãi, khơng phải phổ biến bạn nên xem xét liệu người dùng bạn có khả thực u cầu đòi hỏi liệu JSON khơng cần pải thiết lập header hay không Hạn chế thứ hai giả định tất yêu cầu Ajax đòi hỏi liệu JSON Ứng dụng bạn hoạt động tốt cách tách riêng cách mà yêu cầu thực cho định dạng liệu mà client tìm kiếm Đây phương pháp ưa thích tơi lý mà hướng tới định nghĩa phương thức action riêng biệt cho định dạng liệu Tôi cần phải thực hai thay đổi view GetPeople.cshtml để hỗ trợ phương thức hành động, Liệt kê 23-21 Listing 23-21 Hỗ trợ phương pháp Action tập tin GetPeople.cshtml @using HelperMethods.Models @model string @{ ViewBag.Title = "GetPeople"; Layout = "/Views/Shared/_Layout.cshtml"; AjaxOptions ajaxOpts = new AjaxOptions { Url = Url.Action("GetPeopleData"), LoadingElementId = "loading", LoadingElementDuration = 1000, OnSuccess = "processData" }; } function processData(data) { var target = $("#tableBody"); target.empty(); for (var i = 0; i < data.length; i++) { var person = data[i]; target.append("" + person.FirstName + "" + person.LastName + "" + person.Role + ""); } } Get People

Loading Data

First Last Role @Html.Action("GetPeopleData", new { selectedRole = Model }) @using (Ajax.BeginForm(ajaxOpts)) { @Html.DropDownList("selectedRole", new SelectList( new[] { "All" }.Concat(Enum.GetNames(typeof(Role))))) Submit } @foreach (string role in Enum.GetNames(typeof(Role))) { @Ajax.ActionLink(role, "GetPeople", new { selectedRole = role }, new AjaxOptions { Url = Url.Action("GetPeopleData", new { selectedRole = role }), OnSuccess = "processData" }) } Sự thay đổi đối tượng AjaxOptions tơi sử dụng cho form Ajax Bởi tơi tiếp tục nhận đoạn HTML thông qua yêu cầu Ajax, phải sử dụng chức processData để xử lý JSON phản hồi từ máy chủ mà tạo cho liên kết Ajax Sự thay đổi thứ hai giá trị thuộc tính Urlcho đối tượng AjaxOptions đả dùng để tạo liên kết Các action GetPeopleDataJson khơng tồn tơi dùng action GetPeopleData để thay Tóm tắt Trong chương này, tơi xem xét tính unobtrusive Ajax MVC Framework, lợi dụng chức thư viện jQuery cách đơn giản tao nhã mà không cần thêm nhiều code vào view Nhưng tơi thích làm việc với JSON, có nghĩa Tơi thường cần chức JavaScript nhỏ sử dụng jQuery để xử lý liệu tạo thẻ HTML cần Trong chương tiếp theo, xem xét khía cạnh thú vị hữu ích MVC Framework: model binding ... phương thức action mà tạo JSON liệu trở nên đơn giản Bạn thấy cách thêm phương thức action vào controller People Listing 23- 17 Listing 23- 17 Một phương thức Action trả liệu JSON tập tin PeopleController.cs... 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... chủ gửi yếu tố HTML với liệu) hạn chế thực với liệu trình duyệt Một cách để giải hai vấn đề sử dụng định dạng JavaScript Object Notation (JSON), mà ngôn ngữ độc lập thể liệu Nó bắt nguồn từ ngơn