CREATE DROPDOWNLIST USING HTMLHELPER, TAG HELPERS TRONG ASP

Tag Helpers là tính năng được cải thiện của ASP.NET Chip Core, nó giúp bọn họ thêm code phía server vào HTML thuận tiện. Trong bài xích này bọn họ đang thực hiện nó vào HTML Form mà lại họ tạo thành vào Strongly Typed View trước.

Bạn đang xem: Create dropdownlist using htmlhelper, tag helpers trong asp

Tag Helper là gì?

Tag Helper góp bọn họ viết phần tử HTML vào Razor sử dụng cú pháp thân thiết cùng với HTML. Nó chú ý như là HTML chuẩn chỉnh vậy cơ mà code được xử trí bởi vì Razor Engine bên trên VPS cùng nó tận dụng đươc những ưu thế của bài toán xử lý phía hệ thống.

Razor được chế tạo ra sử dụng Tag Helper nhìn như thành phần HTML thuần. Nó thao tác làm việc với những phần tử HTML nhỏng thêm new phần tử HTML giỏi sửa chữa những văn bản gồm sẵn bởi một chiếc mới.

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

Sẽ được ren ra HTML:

Mục đích của Tag Helpers

Quý khách hàng hoàn toàn có thể tạo ra khung nhưng mà ko yêu cầu sử dụng Tag Helper (hoặc HTML Helper) nhỏng bài xích trước. Tuy nhiên Tag Helper sẽ giúp tạo ra view HTML đơn giản và dễ dàng rộng dựa trên tài liệu trường đoản cú Model gắn vào nó. Ví dụ Label Tag Helper sẽ tạo nên 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ẽ tạo nên ra id, name, type của thành phần HTML dựa trên loại dữ liệu của Model cùng trực thuộc tính Data Annotation.

Sử dụng Tag Helper?

ASP..NET bộ vi xử lý Core Tag Helper nằm trong thỏng việnMicrosoft.AspNetChip Core.Mvc.TagHelpersbạn phải import thư viện này để thực hiện Tag Helper.

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

Để áp dụng Tag Helper bạn cần thêm knhị báo
addTagHelper vào view, chỗ mà bạn muốn áp dụng.

addTagHelper *, Microsoft.AspNetbộ vi xử lý Core.Mvc.TagHelpersĐoạn code trên áp dụng wildcard ("*") để chỉ ra rằng tất cả Tag Helper được sản xuất từ bỏ thư việnMicrosoft.AspNetVi xử lý Core.Mvc.TagHelpers.

Thêm Tag Helper toàn bộ những View

Thêm
addTagHelper vào một view nào kia chỉ có chức năng trên view kia. Quý Khách hoàn toàn có thể thêm
addTagHelper vào _ViewImports.cshtml để áp dụng Tag Helper trên cục bộ các view của ứng dụng.

Bỏ Tag Helper

Đoạn code dưới đây vứt bỏ toàn bộ tag helper từ bỏ assemblyMicrosoft.AspNetbộ vi xử lý Core.Mvc.TagHelpers xuất phát từ một view thay thể:

removeTagHelper "*, Microsoft.AspNetVi xử lý Core.Mvc.TagHelpers"

Thêm một trong những Tag Helper chỉ định

Tgiỏi vị add toàn bộ tag helper thì bạn cũng có thể lựa chọn ra một trong những dòng nhưng bạn có nhu cầu sử dụng thôi:

addTagHelper "Microsoft.AspNetCore.Mvc.TagHelpers.InputTagHelper, Microsoft.AspNetVi xử lý Core.Mvc.TagHelpers"

Tắt Tag Helper với !

Bằng phương pháp áp dụng ký trường đoản cú ! trước mỗi bộ phận HTML, bạn sẽ rất có thể vô hiệu hóa hóa tag helper đến bộ phận đó:

Tag helper label này được loại bỏ hóa với đoạn code bên trên. Quý khách hàng yêu cầu vận dụng ký kết tự! cho tất cả thẻ đóng và thẻ mnghỉ ngơi.

Xem thêm: Annihilation Bd Game Beta Access Registration & Download Link &Ndash; Info Official

Sử dụng
tagHelperPrefix để nhảy Tag Helper

Ttuyệt vị loại bỏ hóa tag helper áp dụng ký kết trường đoản cú !, bạn có thể thực hiện
tagHelperPrefix

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

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

Ví dụvề Tag Helper

Chúng ta xây dừng một Form dễ dàng nlỗi bài bác trước. Hãy cần sử dụng Tag Helper. Trước hết mngơi nghỉ HomeController.cs ra cùng đổi khác 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 nhằm chế tạo ra Strongly Typed View. Mngơi nghỉ Create.csthml từ bỏ thư mục /Views/Home.

Form Tag Helper

Form Tag Helper được bao vị thẻ . Form Tag Helper cung cấp một số trong những trực thuộc tính phía VPS giúp họ thao tác để tạo ra HTML. Một số ở trong tính đó là:

asp-controller: Chỉ ra thương hiệu 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 đã 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 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 nằm trong tính là asp-for. Sử dụng nlỗi sau:

Nó đã dịch ra:

NameTên của ngôi trường đó sẽ tiến hành lấy tự thương hiệu của trực thuộc tính vào Model hoặc trường đoản cú Data Annotation của nằm trong tính vào Model. Sử dụng trường đoản cú khóa
Model là ko cần. quý khách hoàn toàn có thể chỉ ra tên trực thuộc tính trong Model luôn:

Cái này chúng ta cũng có thể phát âm Strongly Typed View sống bài xích trước.

Input Tag Helper

Tương từ bỏ, Input Tag Helper cũng rất được vận dụng mang lại phần tử input:

Nó đã dịch ra:

Thuộc tính type, id với name tự động rước trường đoản cú tên với giao diện dữ liệu của trường kia trong Model. Cuối thuộc form nhìn nhỏng sau:

khi chạy nó sẽtạo thành HTML nlỗi này:

Create

Name Rate Rating

Lợi ích của Tag Helper

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

Tag Helper quan sát như là bộ phận HTML chuẩn. Các Front over Developer ko đề xuất học cú pháp C# giỏi Razor để thêm những thành phần này vào View. Vì gắng nó dễ dàng đạt được tính chất phân tách nhằm trị. Quý khách hàng hoàn toàn có thể dễ ợt thêm CSS hoặc bất kể thuộc tính HTML như thế nào vào Tag Helper như thể với HTML.

Được hỗ trợ vày IntelliSense

Tag Helper cung ứng sự cung cấp vì chưng hiệ tượng gợi nhắc lý tưởng của Visual Studio. lấy ví dụ như bên dưới khi bọn họ thấy gợi ý mang lại label của nằm trong tính Rating.

Code sạch sẽ hơn

Code sẽ không bẩn với cụ thể hơn áp dụng HTML Helper cũ. Không rất cần được áp dụng ký kết tự
nhằm gửi thân C# cùng HTML.

Dễ mở rộng hơn

ASPhường.NET Core MVC hỗ trợ nhiều tag helper tất cả sẵn góp bọn họ tạo thành view. Nhưng trường hợp không có tag helper nào phù hợp cùng với nhu yếu. quý khách hàng cũng có thể tạo nên Tag Helper của riêng biệt bản thân bằng phương pháp không ngừng mở rộng những Tag Helper bao gồm sẵn. Trong tương lai mình sẽ sở hữu bài viết về việc này.

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

Thỏng viện Microsoft.AspNetVi xử lý Core.Mvc.TagHelpers chứa nhiều các Tag Helper có sẵn cho những quá trình hay được sử dụng nhỏng chế tác size, validate khung, 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-Cabít 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,Model,for,view-dataScript Tag Helper
Bài trước