Kiến thức

html helpers trong mvc là gì

Tag Helpers là tính năng mới của wiki.xettuyentrungcap.vn Core, nó giúp chúng ta thêm code phía server vào HTML dễ dàng. Trong bài này chúng ta sẽ sử dụng nó trong HTML Form mà chúng ta tạo trong Strongly Typed View trước.

Bạn đang xem: Html helpers trong mvc là gì

Bạn đang xem: html helpers trong mvc là gì

Tag Helper là gì?

Tag Helper giúp chúng ta viết phần tử HTML trong Razor sử dụng cú pháp thân thiện với HTML. Nó nhìn như là HTML chuẩn vậy nhưng code được xử lý bởi Razor Engine trên server và nó tận dụng đươc các ưu điểm của việc xử lý phía server.

Razor được tạo sử dụng Tag Helper nhìn như phần tử HTML thuần. Nó thao tác với các phần tử HTML như thêm mới phần tử HTML hay thay thế các nội dung có sẵn bằng một cái mới.

Ví dụ, sử dụng thẻ Form Tag Helper, chúng ta có thể tạo ra thẻ như dưới đây. Với các thuộc tính asp-action và asp-controller của Form Tag Helper:

Sẽ được gen ra HTML:

Mục đích của Tag Helpers

Bạn có thể tạo form mà không cần dùng Tag Helper (hoặc HTML Helper) như bài trước. Tuy nhiên Tag Helper sẽ giúp tạo ra view HTML đơn giản hơn dựa trên dữ liệu từ Model gắn vào nó. Ví dụ Label Tag Helper sẽ tạo ra tiêu đề dựa trên attribute Data Annotation trong View Model. Tương tự như thế thì Input Tag Helper sẽ tạo ra id, name, type của phần tử HTML dựa trên kiểu dữ liệu của Model và thuộc tính Data Annotation.

Sử dụng Tag Helper?

wiki.xettuyentrungcap.vn Core Tag Helper nằm trong thư việnMicrosoft.AspNetCore.Mvc.TagHelpersbạn cần import thư viện này để sử dụng Tag Helper.

XEM THÊM:  Các jax mua 8 rung

Thêm Tag Helper sử dụng addTagHelper

Để sử dụng Tag Helper bạn cần thêm khai báo addTagHelper vào view, nơi mà bạn muốn sử dụng.

addTagHelper *, wiki.xettuyentrungcap.vnelpersĐoạn code trên sử dụng wildcard (“*”) để chỉ ra tất cả Tag Helper được thêm vào từ thư việnMicrosoft.AspNetCore.Mvc.TagHelpers.

Thêm Tag Helper toàn bộ các View

Thêm addTagHelper vào một view nào đó chỉ có tác dụng trên view đó. Bạn có thể thêm addTagHelper vào wiki.xettuyentrungcap.vnml để sử dụng Tag Helper trên toàn bộ các view của ứng dụng.

Bỏ Tag Helper

Đoạn code dưới đây loại bỏ tất cả tag helper từ assemblyMicrosoft.AspNetCore.Mvc.TagHelpers từ một view cụ thể:

removeTagHelper “*, wiki.xettuyentrungcap.vnelpers”

Thêm một số Tag Helper chỉ định

Thay vì add tất cả tag helper thì bạn có thể chọn ra một số cái mà bạn muốn dùng thôi:

Xem thêm: Các 50+ Fine Motor Skills Activities

addTagHelper “Microsoft.AspNetCore.Mvc.TagHelpers.InputTagHelper, wiki.xettuyentrungcap.vnelpers”

Tắt Tag Helper với !

Bằng cách sử dụng ký tự ! trước mỗi phần tử HTML, bạn sẽ có thể vô hiệu hóa tag helper cho phần tử đó:

Tag helper label này được vô hiệu hóa với đoạn code trên. Bạn phải áp dụng ký tự! cho cả thẻ đóng và thẻ mở.

Xem thêm: Luyện Tập Về Từ Chỉ Đặc Điểm Là Gì, Luyện Tập Về Từ Chỉ Đặc Điểm Và Câu “Ai Thế Nào

Sử dụng tagHelperPrefix để bật Tag Helper

Thay vì vô hiệu hóa tag helper sử dụng ký tự !, bạn có thể sử dụng tagHelperPrefix

tagHelperPrefix th:Giờ thì tiền tố th: phải được chỉ ra cho tất cả các tag helper trên view, để bật tag helper cho nó:

//Tag helper is enabled //Tag helper is disabled

Ví dụvề Tag Helper

Chúng ta xây dựng một Form đơn giản như bài trước. Hãy dùng Tag Helper. Đầu tiên mở wiki.xettuyentrungcap.vn ra và thay đổi action method Create.

XEM THÊM:  lưu ký chứng khoán tiếng anh là gì

public IActionResult Create(){ ProductEditModel model = new ProductEditModel(); return View(model);}Thể hiện của ProductEditModel được gán vào View để tạo Strongly Typed View. Mở wiki.xettuyentrungcap.vnml từ thư mục /Views/Home.

Form Tag Helper

Form Tag Helper được bao bởi thẻ . Form Tag Helper cung cấp một số thuộc tính phía server giúp chúng ta thao tác để tạo ra HTML. Một số thuộc tính đó là:

asp-controller: Chỉ ra tên Controller sử dụngasp-action: Chỉ ra tên action method sử dụngasp-area: Chỉ ra tên Area sử dụng

Ví dụ:

Đoạn code trên sẽ biên dịch ra HTML thuần là:

Chú ý là Form Tag Helper nó sẽ tự động thêm Antiy-Forgery Token vào HTML tạo ra.

Label Tag Helper

Xem thêm: Nước ngọt có gas- 100 năm một chặng đường

Label Tag Helper được áp dụng cho phần tử label. Nó có một thuộc tính là asp-for. Sử dụng như sau:

Nó sẽ dịch ra:

NameTên của trường đó sẽ được lấy từ tên của thuộc tính trong Model hoặc từ Data Annotation của thuộc tính trong Model. Sử dụng từ khóa Model là không bắt buộc. Bạn có thể chỉ ra tên thuộc tính trong Model luôn:

Cái này bạn có thể đọc Strongly Typed View ở bài trước.

Input Tag Helper

Tương tự, Input Tag Helper cũng được áp dụng cho phần tử input:

Nó sẽ dịch ra:

Thuộc tính type, id và name tự động lấy từ tên và kiểu dữ liệu của trường đó trong Model. Cuối cùng form nhìn như sau:

Khi chạy nó sẽtạo ra HTML như này:

Create

Name Rate Rating

Lợi ích của Tag Helper

Thân thiện với cú phápHTML

Tag Helper nhìn như là phần tử HTML chuẩn. Các Front end Developer không cần học cú pháp C# hay Razor để thêm các phần tử này vào View. Vì thế nó dễ dàng đạt được tính chất chia để trị. Bạn có thể dễ dàng thêm CSS hoặc bất cứ thuộc tính HTML nào vào Tag Helper như là với HTML.

XEM THÊM:  Các toán cao cấp tiếng anh là gì

Được hỗ trợ bởi IntelliSense

Tag Helper cung cấp sự hỗ trợ bởi cơ chế gợi ý thông minh của Visual Studio. Ví dụ dưới khi chúng ta thấy gợi ý cho label của thuộc tính Rating.

html helpers trong mvc là gì

Code sạch hơn

Code sẽ sạch và rõ ràng hơn sử dụng HTML Helper cũ. Không cần phải sử dụng ký tự để chuyển giữa C# và HTML.

Dễ mở rộng hơn

wiki.xettuyentrungcap.vn Core MVC cung cấp nhiều tag helper có sẵn giúp chúng ta tạo view. Nhưng nếu không có tag helper nào phù hợp với nhu cầu. Bạn cũng có thể tạo ra Tag Helper của riêng mình bằng cách mở rộng các Tag Helper có sẵn. Trong tương lai mình sẽ có bài viết về việc này.

Danh sách các Tag Helper có sẵn

Thư viện wiki.xettuyentrungcap.vnelpers chứa nhiều các Tag Helper có sẵn cho các công việc thường dùng như tạo form, validate form, label, link…

TAG HELPERTạo raThuộc tínhForm Tag Helperasp-action, asp-all-route-data, asp-area, asp-controller, asp-fragment, asp-host, asp-page, asp-page-handler,asp-protocol,asp-route, asp-route-AnchorTag Helpersasp-action, asp-all-route-data, asp-area, asp-controller, asp-Fragment, asp-host, asp-page, asp-page-handler, asp-Protocol, asp-route, asp-route-Cache Tag Helperenabled1,expires-after2,expires-on3,expires-sliding4,priority5,vary-by6Environment Tag Helpernames, include, excludeImage Tag Helperappend-versionInput Tag HelperforLabel Tag HelperforLink Tag Helperhref-include, href-exclude, fallback-href, fallback-href-include, fallback-href-exclude, fallback-test-class, fallback-test-value, fallback-test-property, fallback-test-value, append-versionOptions Tag Helperasp-for, asp-itemsPartial Tag Helpername,model,for,view-dataScript Tag Helper Bài trước

Tham khảo: List báo cáo tài chính riêng là gì

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button