22.Chuong 22

Chương 22 Templated Helper Method Những HTML helper chương trước, chẳng hạn Html.CheckBoxFor Html.TextBoxFor, tạo loại element cụ thể, phải quy định trước loại element sử dụng cho model cập nhật view cách thủ cơng thuộc tính thay đổi Trong chương này, cho bạn templated helper method, tơi cần khai báo thcuộ tính MVC Framework tìm HTML element phù hợp Đây cách tiếp cận linh hoạt việc hiển thị liệu, địi hỏi cao thiết lập Bảng 22-1 tóm tắt cho chương Bảng 22-1 Tịm tắt chương Vấn đề Tạo element sử dụng để chỉnh sửa thuộc tính model Tạo label read-only đại diện cho thuộc tính tính mơ hình Tạo element từ đối tượng model hồn chỉnh Giải Helper Html.Editor Html.EditorFor Helper Html.Label Html.Display Helper DisplayForModel, EditorForModel LabelForModel Giấu phần tử khỏi người dùng Áp dụng thuộc tính khơng cho phép chỉnh sửa HiddenInput cho trường tạo element cách sử dụng whole-model helper Tạo label sử dụng để hiển Thuộc tính DisplayName thị thuộc tính model Display Ví dụ 1-5, 18 6-8 9-10 11-12 13 Tùy chỉnh cách mà thuộc tính model hiển thị Tùy chỉnh template sử dụng để hiển thị thuộc tính model Tạo model metadata tách biệt với model type Thay đổi element tạo từ thcuộ tính model Thuộc tính DataType 14 Thuộc tính UIHint 15 Tạo lớp buddy sử dụng thuộc tính MetadataType Tạo custom template 16-17 19-22 Chuẩn bị Project mẫu Trong chương ta tiếp tục sử dụng project HelperMethod Chương 21 Trong project đó, tơi tạo class model Person Ví dụ 22-1 Ví dụ 22-1 Nội dung file Person.cs using System; namespace HelperMethods.Models { public class Person { public int PersonId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateTime BirthDate { get; set; } public Address HomeAddress { get; set; } public bool IsApproved { get; set; } public Role Role { get; set; } } public class Address { public string Line1 { get; set; } public string Line2 { get; set; } public string City { get; set; } public string PostalCode { get; set; } public string Country { get; set; } } public enum Role { Admin, User, Guest } } Project chứa Home controller đơn giản mà sử dụng để hiển thị form nhận form trả Bạn xem HomeController Ví dụ 22-2 Ví dụ 22-2 Nội dung file HomeController.cs using System.Web.Mvc; using HelperMethods.Models; namespace HelperMethods.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.Fruits = new string[] { "Apple", "Orange", "Pear" }; ViewBag.Cities = new string[] { "New York", "London", "Paris" }; string message = "This is an HTML element: "; return View((object)message); } public ActionResult CreatePerson() { return View(new Person()); } [HttpPost] public ActionResult CreatePerson(Person person) { return View(person); } } } Đây hai action method CreatePerson sử dụng chương này, hai dùng cho file view /Views/Home/CreatePerson.cshtml Trong Ví dụ 22-3, bạn xem view CreatePerson chương trước, có thay đổi đơn giản Ví dụ 22-3 Nội dung file CreatePerson.cshtml @model HelperMethods.Models.Person @{ ViewBag.Title = "CreatePerson"; Layout = "/Views/Shared/_Layout.cshtml"; Html.EnableClientValidation(false); } CreatePerson @using (Html.BeginRouteForm("FormRoute", new { }, FormMethod.Post, new { @class = "personClass", data_formType = "person" })) { PersonId @Html.TextBoxFor(m => m.PersonId) First Name @Html.TextBoxFor(m => m.FirstName) Last Name @Html.TextBoxFor(m => m.LastName) Role @Html.DropDownListFor(m => m.Role, new SelectList(Enum.GetNames(typeof(HelperMethods.Models.Role)))) } Tơi thêm dịng in đậm Theo mặc định, helper method thêm liệu thuộc tính cho HTML element mà tạo để hỗ trợ validate form (ứng dụng SportsStore) Nhưng tơi không muốn sử dụng thuộc tính chương này, nên tơi sử dụng hàm Html.EnableClientValidation để vơ hiệu hóa chúng view CreatePerson Các tính client validate kích hoạt cho phần cịn lại ứng dụng tơi giải thích làm validation làm việc (bao gồm mục đích thuộc tính data) Chương 25 Sử dụng Templated Helper Method Các templated helper method mà dùng Html.Editor Html.EditorFor Các Editor method nhận tham số string để thuộc tính chỉnh sửa Các helper tìm kiếm (tơi mơ tả chương 20) để xác định vị trí thuộc tính tương ứng view bag view model Phương pháp EditorFor cho phép bạn sử dụng biểu thức lambda để xác định thuộc tính model mà bạn muốn dùng element để chỉnh sửa Trong Ví dụ 22-4, bạn thấy tơi áp dụng hai helper method Editor EditorFor view CreatePerson Như đề cập chương trước, tơi thích sử dụng strongly typed helper chúng làm giảm nguy gây lỗi đánh nhầm tên thuộc tính, tơi sử dụng hai loại bảng ví dụ bạn kết hợp chúng bạn thấy phù hợp Ví dụ 22-4 Sử dụng helper method Editor EditorFor file CreatePerson.cshtml @model HelperMethods.Models.Person @{ ViewBag.Title = "CreatePerson"; Layout = "/Views/Shared/_Layout.cshtml"; Html.EnableClientValidation(false); } CreatePerson @using(Html.BeginRouteForm("FormRoute", new {}, FormMethod.Post, new { @class = "personClass", data_formType="person"})) { PersonId @Html.Editor("PersonId") First Name @Html.Editor("FirstName") Last Name @Html.EditorFor(m => m.LastName) Role @Html.EditorFor(m => m.Role) Birth Date @Html.EditorFor(m => m.BirthDate) } Các HTML element tạo hàm Editor EditorFor giống Sự khác biệt cách mà bạn thuộc tính mà editor element tạo để chỉnh sửa chúng Bạn xem kết thay đổi cách chạy ứng dụng ví dụ điều hướng đến URL /Home/CreatePerson, hình 22-1 Hình 22-1 Sử dụng method helper Editor EditorFor form Ngồi việc bổ sung thuộc tính BirthDate, khơng khác với form mà tạo Chương 21 Tuy nhiên, có thay đổi đáng kể, mà bạn thấy bạn sử dụng trình duyệt khác Trong hình 22-2, bạn thấy URL hiển thị trình duyệt Opera Hình 22-2 Hiển thị form tạo cách sử dụng helper method Editor EditorFor Chú ý element cho thuộc tính PersonId BirthDate trơng khác Các element PersonId có spinner arrow (cho phép bạn tăng giảm giá trị) element BirthDate hiển thị với bảng chọn ngày HTML5 định nghĩa input element khác sử dụng để chỉnh sửa loại liệu phổ biến, chẳng hạn số ngày tháng Method Helper HelperFor sử dụng loại thuộc tính tơi muốn chỉnh sửa để chọn input element Bạn thấy điều Ví dụ 22-5, HTML tạo cho form Ví dụ 22-5 Các HTML element tạo người helper method Editor EditorFor CreatePerson label { display: inline-block; width: 100px;} dataElem { margin: 5px;} CreatePerson PersonId First Name Last Name Role Birth Date Các thuộc tính type xác định loại input elemnt hiển thị trình duyệt Các helper method quy định type number datetime cho PersonId text cho BirthDate, text mặc định cho thuộc tính khác Lý mà nhìn thấy type Opera tính HTML5 khơng hỗ trợ rộng rãi, phiên Internet Explorer Chrome Mẹo Hầu hết công cụ giao diện web có date picker, bạn sử dụng chúng thay dựa vào HTML5 input element Nếu bạn chưa có cơng cụ cho dự án, đề nghị bạn bắt đầu với jQuery UI (http://jqueryui.com), công cụ mã nguồn mở, xây dựng jQuery Bạn thấy cách sử dụng templated helper method tơi chỉnh element từ hình thức đến nội dung, cách q hữu ích, phần khơng phải tất trình duyệt hiển thị HTML5 input element phần số thuộc tính, chẳng hạn Role, không hiển thị tốt Tôi cho bạn thấy làm để cung cấp cho MVC Framework thông tin bổ sung để cải thiện HTML mà helper method tạo Nhưng trước hết xem templated helper method khác Bạn xem toàn helper method Bảng 22-2 tơi giải thích helper phần Bảng 22-2 Các MVC Templated HTML Helper Helper Display Ví dụ Miêu tả Html.Display("FirstName") Tạo read-only view cho thuộc tính mơ hình, chọn HTML element dựa type thuộc tính metadata Phiên strongly typed DisplayFor Html.DisplayFor(x => x.FirstName) helper Html.Editor("FirstName") Tạo editor cho thuộc tính Editor mơ hình, chọn HTML element dựa type thuộc tính metadata Phiên strongly typed EditorFor Html.EditorFor(x => x.FirstName) helper Html.Label("FirstName") Label Tạo HTML element cho thuộc tính model Html.LabelFor(x => Phiên strongly typed LabelFor x.FirstName) helper LOẠI MỘT TRƯỜNG RA KHỎI SCAFFOLDING Để loại trừ hoàn toàn trường khỏi HTML, ta sử dụng thuộc tính ScaffoldColumn Trong thuộc tính HiddenInput có giá trị input ẩn, thuộc tính ScaffoldColumn loại bỏ trường khỏi trình scaffolding Dưới ví dụ thuộc tính sử dụng: [ScaffoldColumn(false)] public int PersonId { get; set; } Khi scaffolding helper thấy thuộc tính ScaffoldColumn này, bỏ qua trường hồn tồn; khơng có input ẩn tạo ra, khơng có diện thuộc tính tạo HTML HTML tạo giống sử dụng thuộc tính HiddenInput, khơng có giá trị trường trả submit Điều có ảnh hưởng đến model binding, Chương 24 Thuộc tính ScaffoldColumn không hoạt động helper đơn, EditorFor Nếu gọi @Html.EditorFor (m => m.PersonId) view, editor cho trường PersonId tạo ra, thuộc tính ScaffoldColumn tồn Sử dụng Metadata cho Label Theo mặc định, Label, LabelFor, LabelForModel, helper EditorForModel sử dụng tên thuộc tính nội dung cho label tạo Ví dụ, tơi tạo label cách này: @Html.LabelFor(m => m.BirthDate) Kết là: BirthDate Tất nhiên, tên thuộc tính thường khơng hợp để hiển thị cho người sử dụng Vậy nên, tơi áp dụng thuộc tính DisplayName từ namespace System.ComponentModel.DataAnnotations, đặt giá trị tơi muốn hiển thị thơng qua thuộc tính Name Ví dụ 22-13, thuộc tính áp dụng cho lớp Person Ví dụ 22-13 Sử dụng thuộc tính DisplayName để tạo Label file Person.cs using System; using System.Web.Mvc; using System.ComponentModel.DataAnnotations; using System.ComponentModel; namespace HelperMethods.Models { [DisplayName("New Person")] public class Person { [HiddenInput(DisplayValue = false)] public int PersonId { get; set; } [Display(Name = "First")] public string FirstName { get; set; } [Display(Name = "Last")] public string LastName { get; set; } [Display(Name = "Birth Date")] public DateTime BirthDate { get; set; } public Address HomeAddress { get; set; } [Display(Name = "Approved")] public bool IsApproved { get; set; } public Role Role { get; set; } } // other types omitted for brevity } Khi label helper tạo label cho trường BirthDate, tìm thuộc tính Display sử dụng giá trị thuộc tính Name làm text label: Birth Date Những helper nhận thuộc tính DisplayName, tìm thấy namespace System.ComponentModel Thuộc tính có lợi áp dụng cho class, cho phép ta sử dụng helper Html.LabelForModel Bạn xem sử dụng thuộc tính cho class Person ví dụ (Ta áp dụng thuộc tính DisplayName cho trường, thường sử dụng thuộc tính cho model class, thói quen.) Bạn thấy tác dụng Display and DisplayName hình 22-8 Sử dụng Metadata cho Data Value Tơi sử dụng metadata để hỗ trợ việc hiển thị thuộc tính model Tơi sử dụng để trường BirthDate từ việc hiển thị sang thỉ ngày Tơi kiểm sốt cách liệu hiển thị cách sử dụng thuộc tính DataType, bạn thấy Ví dụ 22-14 Ví dụ 22-14 Áp dụng thuộc tính DataType file Person.cs [DisplayName("New Person")] public class Person { [HiddenInput(DisplayValue = false)] public int PersonId { get; set; } [Display(Name = "First")] public string FirstName { get; set; } [Display(Name = "Last")] public string LastName { get; set; } [Display(Name = "Birth Date")] [DataType(DataType.Date)] public DateTime BirthDate { get; set; } public Address HomeAddress { get; set; } [Display(Name = "Approved")] public bool IsApproved { get; set; } public Role Role { get; set; } } Thuộc tính DataType nhận giá trị từ DataType enum làm tham số Trong ví dụ tơi dùng DataType.Date, để templated helper tạo giá trị trường BirthDate có ngày mà khơng có giờ, hình 22-9 Hình 22-9 Sử dụng thuộc tính DataType để kiểm sốt việc hiển thị giá trị DateTime Mẹo Sự thay đổi rõ rệt sử dụng trình duyệt Web có hỗ trợ input HTML5 tốt Bảng 22-4 Mô tả giá trị hữu ích DataType enumeration Bảng 22-4 Các giá trị DataType Enumeration Giá trị DateTime Miêu tả Hiển thị ngày tháng thời gian (đây mặc định cho System.DateTime) Hiển thị phần ngày Date Hiển thị phần thời gian Time Hiển thị dòng chữ Text Hiển thị số điện thoại PhoneNumber MultilineText Gán giá trị vào textarea Hiển thị liệu dấu Password Url Hiển thị liệu URL (sử dụng HTML element a) EmailAddress Hiển thị liệu địa e-mail (bằng cách sử dụng element a với mailto href) Ảnh hưởng giá trị phụ thuộc vào loại trường liên quan helper sử dụng Ví dụ, giá trị MultilineText làm helper thay tạo editor cho trường tạo textarea, bị bỏ qua display helper Các textarea cho phép người dùng chỉnh sửa giá trị, khơng có có tác dụng nhiều liệu hiển thị read-only form Tương tự, giá trị Url có hiệu display helper tạo HTML element a để tạo liên kết Sử dụng Metadata để chọn Display Template Như tên gọi chúng, templated helper sử dụng display template để tạo HTML Các template sử dụng dựa vào loại trường xử lý loại helper sử dụng Tơi sử dụng thuộc tính UIHint để tuỳ chỉnh template sử dụng để tạo HTML cho trường, Ví dụ 22-15 Ví dụ 22-15 Sử dụng thuộc tính UIHint file Person.cs [DisplayName("New Person")] public class Person { [HiddenInput(DisplayValue = false)] public int PersonId { get; set; } [Display(Name = "First")] [UIHint("MultilineText")] public string FirstName { get; set; } [Display(Name = "Last")] public string LastName { get; set; } [Display(Name = "Birth Date")] [DataType(DataType.Date)] public DateTime BirthDate { get; set; } public Address HomeAddress { get; set; } [Display(Name = "Approved")] public bool IsApproved { get; set; } public Role Role { get; set; } } Trong ví dụ trên, tơi sử dụng MultilineText template, tạo textarea cho FirstName sử dụng với editor helper, EditorFor EditorForModel Bảng 22-5 cho thấy thiết lập cho template tích hợp sẵn MVC Framework Bảng 22-5 Các MVC Framework View Template Giá trị Boolean Chỉnh sửa Tạo checkbox, null tạo thêm lựa chọn Not Set Hiển thị Read-only, thêm thuộc tính disabled Collection Decimal DateTime Date EmailAddress Tạo template thích hợp cho phần tử chuỗi IEnumerable Các phần tử không cần phải loại Tạo textbox input dòng Tạo textbox input hiển thị ngày có type datetime Tạo textbox input hiển thị ngày có type date Gán giá trị vào textbox input Giống bên trái Tạo giá trị Tạo giá trị ngày Tạo giá trị ngày Sử dụng thẻ a thuộc tính href Tại giá trị HiddenInput Tạo input ẩn input ẩn Html Gán giá trị vào textbox input Tạo link thẻ a Tạo giá trị MultilineText Gán giá trị vào textarea Tạo giá trị Number Tạo input có type number Xem thêm sau bảng Xem thêm sau bảng Object Password Tạo textbox input có giá trị bị Tạo giá trị không bị giấu giấu cho phép chỉnh sửa Tạo giá trị String Tạo textbox input Tạo giá trị Text Tạo textbox input Tạo giá trị Tel Tạo input có type tel Time Tạo textbox input hiển thị Tạo giá trị có type time Url Tạo textbox input Tạo thẻ a, nội dung giá trị href gán Cảnh báo Chú ý sử dụng thuộc tính UIHint Sẽ có exception sử dụng template hoạt động trường áp dụng, ví dụ, áp dụng Boolean template cho trường string Các Object template trường hợp đặc biệt Đó template sử dụng scaffolding helper để tạo HTML cho view model Template ... custom template 16-17 19 -22 Chuẩn bị Project mẫu Trong chương ta tiếp tục sử dụng project HelperMethod Chương 21 Trong project đó, tơi tạo class model Person Ví dụ 22- 1 Ví dụ 22- 1 Nội dung file Person.cs... có giờ, hình 22- 9 Hình 22- 9 Sử dụng thuộc tính DataType để kiểm soát việc hiển thị giá trị DateTime Mẹo Sự thay đổi rõ rệt sử dụng trình duyệt Web có hỗ trợ input HTML5 tốt Bảng 22- 4 Mơ tả giá... cho file view /Views/Home/CreatePerson.cshtml Trong Ví dụ 22- 3, bạn xem view CreatePerson chương trước, có thay đổi đơn giản Ví dụ 22- 3 Nội dung file CreatePerson.cshtml @model HelperMethods.Models.Person