Html helpers trong mvc là gì

Tag Helpers là tính năng mới của ASP.NET bộ vi xử lý Core, nó góp chúng ta thêm code phía server vào HTML dễ dãi. Trong bài này chúng ta vẫn áp dụng nó vào HTML Form nhưng mà họ chế 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 bọn họ viết phần tử HTML trong Razor áp dụng cú pháp gần gũi với HTML. Nó chú ý như thể HTML chuẩn vậy tuy vậy code được cách xử lý vì chưng Razor Engine trên hệ thống và nó tận dụng đươc các ưu điểm của bài toán xử lý phía hệ thống.

Razor được chế tác áp dụng Tag Helper chú ý như bộ phận HTML thuần. Nó thao tác làm việc với các phần tử HTML như thêm bắt đầu thành phần HTML tuyệt thay thế sửa chữa những nội dung tất cả sẵn bằng một chiếc new.

ví dụ như, thực hiện thẻ Form Tag Helper, bạn có thể tạo thành thẻ nhỏng sau đây. Với các ở trong tính asp-action và asp-controller của Form Tag Helper:

Sẽ được gen ra HTML:

Mục đích của Tag Helpers

Quý khách hàng có thể chế tạo form nhưng ko buộc phải sử dụng Tag Helper (hoặc HTML Helper) như bài bác trước. Tuy nhiên Tag Helper sẽ giúp tạo nên view HTML dễ dàng và đơn giản hơn dựa trên dữ liệu từ bỏ Model tích hợp nó. ví dụ như Label Tag Helper sẽ tạo ra tiêu đề dựa trên attribute Data Annotation vào View Model. Tương từ như vậy thì Input Tag Helper sẽ khởi tạo ra id, name, type của phần tử HTML dựa vào kiểu dáng dữ liệu của Model và nằm trong tính Data Annotation.

Sử dụng Tag Helper?

ASPhường.NET bộ vi xử lý Core Tag Helper phía trong thỏng việnMicrosoft.AspNetbộ vi xử lý Core.Mvc.TagHelpersbạn cần import tlỗi viện này nhằm thực hiện Tag Helper.

Thêm Tag Helper thực hiện
addTagHelper

Để sử dụng Tag Helper bạn cần thêm knhị báo
addTagHelper vào view, khu vực nhưng bạn muốn thực hiện.


addTagHelper *, Microsoft.AspNetbộ vi xử lý Core.Mvc.TagHelpersĐoạn code trên áp dụng wildthẻ ("*") để chỉ ra rằng tất cả Tag Helper được phân phối từ tlỗi việnMicrosoft.AspNetbộ vi xử lý Core.Mvc.TagHelpers.

Thêm Tag Helper toàn thể những View

Thêm
addTagHelper vào một view như thế nào kia chỉ gồm tính năng bên trên view đó. quý khách rất có thể thêm
addTagHelper vào _ViewImports.cshtml để thực hiện Tag Helper bên trên toàn thể các view của áp dụng.

Bỏ Tag Helper

Đoạn code sau đây đào thải tất cả tag helper tự assemblyMicrosoft.AspNetbộ vi xử lý Core.Mvc.TagHelpers từ một view cầm thể:


removeTagHelper "*, Microsoft.AspNetbộ vi xử lý Core.Mvc.TagHelpers"

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

Ttốt vị add tất cả tag helper thì chúng ta cũng có thể lựa chọn ra một số trong những dòng mà lại bạn muốn cần sử dụng thôi:


addTagHelper "Microsoft.AspNetbộ vi xử lý Core.Mvc.TagHelpers.InputTagHelper, Microsoft.AspNetbộ vi xử lý Core.Mvc.TagHelpers"

Tắt Tag Helper cùng với !

Bằng biện pháp sử dụng cam kết trường đoản cú ! trước mỗi thành phần HTML, các bạn sẽ hoàn toàn có thể loại bỏ hóa tag helper mang đến phần tử đó:

Tag helper label này được vô hiệu hóa hóa cùng với đoạn code bên trên. Quý khách hàng phải áp dụng ký kết tự! cho cả thẻ đóng góp cùng 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

Txuất xắc vì vô hiệu hóa hóa tag helper thực hiện ký kết từ !, bạn cũng có thể áp dụng
tagHelperPrefix


tagHelperPrefix th:Giờ thì tiền tố th: phải được chỉ ra mang lại tất cả những tag helper trên view, nhằm bật tag helper đến nó:

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

Ví dụvề Tag Helper

Chúng ta sản xuất một Form đơn giản và dễ dàng nhỏng bài xích trước. Hãy cần sử dụng Tag Helper. Thứ nhất msinh sống HomeController.cs ra cùng biến đổi action method Create.

public IActionResult Create() ProductEditModel Model = new ProductEditModel(); return View(model);Thể hiện nay của ProductEditModel được gán vào View để tạo nên Strongly Typed View. Mngơi nghỉ Create.csthml từ thư mục /Views/Home.

Form Tag Helper

Form Tag Helper được bao vì thẻ . Form Tag Helper hỗ trợ một số thuộc tính phía VPS giúp chúng ta thao tác làm việc để tạo ra HTML. Một số nằm trong tính kia là:

asp-controller: Chỉ ra thương hiệu Controller sử dụngasp-action: Chỉ ra thương hiệu action method sử dụngasp-area: Chỉ ra tên Area sử dụng

Ví dụ:

Đoạn code bên trên đã biên dịch ra HTML thuần là:

Chú ý là Form Tag Helper nó vẫn auto thêm Antiy-Forgery Token vào HTML tạo thành.

Label Tag Helper

Label Tag Helper được áp dụng mang lại phần tử label. Nó bao gồm một trực thuộc tính là asp-for. Sử dụng nlỗi sau:

Nó sẽ dịch ra:

NameTên của trường kia sẽ được rước từ bỏ thương hiệu của trực thuộc tính trong Model hoặc trường đoản cú Data Annotation của trực thuộc tính vào Model. Sử dụng từ khóa
Model là ko bắt buộc. quý khách hàng hoàn toàn có thể chỉ ra thương hiệu trực thuộc tính vào Model luôn:

Cái này chúng ta có thể gọi Strongly Typed View nghỉ ngơi bài xích trước.

Input Tag Helper

Tương từ, Input Tag Helper cũng khá được áp dụng mang đến phần tử input:

Nó đang dịch ra:

Thuộc tính type, id cùng name auto lấy từ thương hiệu với thứ hạng dữ liệu của trường kia trong Model. Cuối cùng size chú ý như sau:

khi chạy nó sẽtạo nên HTML nhỏng này:

Create

Name Rate Rating

Lợi ích của Tag Helper

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

Tag Helper quan sát như là thành phần HTML chuẩn chỉnh. Các Front over Developer ko yêu cầu học cú pháp C# tuyệt Razor để thêm các bộ phận này vào View. Vì nắm nó dễ ợt đạt được tính chất phân tách để trị. quý khách hoàn toàn có thể dễ dãi thêm CSS hoặc bất cứ nằm trong tính HTML như thế nào vào Tag Helper như là với HTML.

Được cung ứng vì chưng IntelliSense

Tag Helper hỗ trợ sự cung cấp vì chính sách nhắc nhở tuyệt vời của Visual Studio. ví dụ như dưới khi chúng ta thấy nhắc nhở mang lại label của trực thuộc tính Rating.

*

Code sạch mát hơn

Code đang sạch và cụ thể hơn thực hiện HTML Helper cũ. Không rất cần được sử dụng ký từ bỏ
để chuyển giữa C# và HTML.

Dễ không ngừng mở rộng hơn

ASP.NET Vi xử lý Core MVC cung ứng các tag helper gồm sẵn giúp chúng ta tạo thành view. Nhưng trường hợp không có tag helper làm sao tương xứng cùng với nhu cầu. Quý Khách cũng rất có thể tạo ra Tag Helper của riêng bản thân bằng cách không ngừng mở rộng các Tag Helper bao gồm sẵn. Trong tương lai mình sẽ sở hữu được bài viết về việc này.

Xem thêm: Pr Trên Facebook Nghĩa Là Gì, Những Điều Cần Biết Về Pr Trong Fb

Danh sách những Tag Helper bao gồm sẵn

Thư viện Microsoft.AspNetVi xử lý Core.Mvc.TagHelpers chứa nhiều những Tag Helper có sẵn cho những quá trình thường được sử dụng nlỗi sản xuất form, validate form, label, links...

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-Cađậy 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 Helper

name,mã sản phẩm,for,view-dataScript Tag Helper
Bài trước

Chuyên mục: Kiến Thức