Hỏi đáp

Html Helpers Trong Mvc Là Gì, Lập Trình Asp, Tag Helpers Trong Asp

Create by : https://globalizethis.org

Tag Helpers là tính năng mới của ASP.NET 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ì

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?

ASP.NET 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.

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 *, Microsoft.AspNetCore.Mvc.TagHelpersĐ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 _ViewImports.cshtml để 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 “*, Microsoft.AspNetCore.Mvc.TagHelpers”

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:

addTagHelper “Microsoft.AspNetCore.Mvc.TagHelpers.InputTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers”

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ở HomeController.cs ra và thay đổi action method Create.

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ở Create.csthml 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

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.

Đượ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.

*

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

ASP.NET 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 Microsoft.AspNetCore.Mvc.TagHelpers 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…

Danh mục: Hỏi đáp
Nguồn: https://globalizethis.org
TAG HELPERTạo raThuộc tính Form Tag Helper asp-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 Helpers asp-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 Helper enabled1,expires-after2,expires-on3,expires-sliding4,priority5,vary-by6 Environment Tag Helper names, include, exclude Image Tag Helper append-version Input Tag Helper for Label Tag Helper for Link Tag Helper href-include, href-exclude, fallback-href, fallback-href-include, fallback-href-exclude, fallback-test-class, fallback-test-value, fallback-test-property, fallback-test-value, append-version Options Tag Helper asp-for, asp-items Partial Tag Helper name,model,for,view-data Script Tag Helper

Bài trước

Khi copy nhớ ghi nguồn : https://globalizethis.org nhé . Chúc bạn may mắn

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 *

Related Articles

Back to top button