Sử dụng TagHelpers vs ViewComponents trong ASP.NET MVC6

Question

Tôi đang cố gắng hiểu sự khác biệt về trường hợp sử dụng giữa TagHelpers và ViewComponents trong asp.net 5 vì chức năng kết quả cuối cùng có vẻ rất giống nhau. Chúng tôi có TagHelpers có thể tạo các thẻ HTML mới được phân tích cú pháp bởi công cụ Razor và sau đó là ViewComponents được gọi một cách rõ ràng. Cả hai trả về một số nội dung HTML, cả hai đều được hỗ trợ bởi các lớp cơ sở tương ứng của chúng, cả hai đều có phiên bản không đồng bộ của các phương thức mà chúng có thể thực hiện để hoàn thành công việc của chúng.

Vì vậy, khi nào người ta sẽ sử dụng cái khác? Hay tôi thiếu một số thông tin?

Answer 1

Chắc chắn có một số chồng chéo khái niệm giữa TagHelpers và ViewComponents. TagHelpers là tiện ích của bạn để làm việc với HTML, nơi ViewComponents là cách của bạn để dính vào C#, làm công việc bị cô lập và sau đó nhổ HTML. Tôi sẽ đi sâu vào từng chi tiết:

ViewComponents
Bộ điều khiển nhỏ tương đương về khái niệm của bạn; bạn sẽ thấy rằng nhiều phương thức/thuộc tính mà ViewComponents trưng ra rất quen thuộc với những phương thức tồn tại trên một Controller. Bây giờ là để gọi ViewComponents, điều đó tương đương với việc sử dụng các trình trợ giúp HTML (một điều mà TagHelpers làm cho tốt hơn). Để tổng hợp ViewComponents: Mục đích chính của chúng là cảm thấy như một bộ điều khiển, ở trong vùng đất C# (có thể không cần phải thêm tiện ích vào HTML), làm công việc nhỏ hơn/bị cô lập và sau đó nhổ HTML bị xâu chuỗi.

TagHelpers
Một tiện ích cho phép bạn làm việc cùng phía HTML đang tồn tại hoặc tạo ra các phần tử HTML mới sửa đổi những gì xảy ra trên một trang. Không giống như ViewComponents TagHelpers có thể nhắm mục tiêu bất kỳ HTML hiện có nào và sửa đổi hành vi của nó; ví dụ: bạn có thể thêm một thuộc tính có điều kiện có điều kiện cho tất cả các phần tử HTML có điều kiện sẽ hiển thị phía máy chủ phần tử. TagHelpers cũng cho phép bạn trộn lẫn thuật ngữ HTML thông thường, ví dụ:

<myTagHelper class="btn">Some Content</myTagHElper>

Như bạn có thể thấy chúng ta đang thêm một thuộc tính lớp để TagHelper của chúng tôi cũng giống như thể nó là HTML. Để làm điều này trong ViewComponents, bạn cần phải chuyển vào một từ điển thuộc tính hoặc một cái gì đó tương đương (không tự nhiên). Cuối cùng, nhiều TagHelpers có thể chạy trên một phần tử HTML duy nhất; mỗi người có giai đoạn riêng của họ tại sửa đổi đầu ra (cho phép nhập cho các bộ công cụ mô-đun TagHelper). Để tổng hợp TagHelpers: Họ có thể làm bất cứ điều gì mà ViewComponents có thể làm và nhiều NHƯNG không cảm thấy quen thuộc với những thứ như Controllers mà các nhà phát triển ASP.NET đã quen; cũng một số dự án có thể không muốn xen kẽ HTML phía máy chủ.

Thêm:
Gần đây, tôi đã trình chiếu video về những lợi ích của TagHelpers. Về cơ bản là đi qua những gì họ giỏi và cách sử dụng chúng. Bạn có thể xem nó here.

Answer 2

Chỉ ra rằng trong .Net Core 1.1, bạn có thể gọi một ViewComponent bằng cú pháp tagHelper.

Về nhận xét của Taylor "Mục đích chính của chúng là cảm nhận như một bộ điều khiển", nhưng vì bạn không thể trực tiếp gọi trực tiếp "bộ điều khiển vi mô" này, hành vi "giống như bộ điều khiển" bị hạn chế chỉ tạo một phần của một trang, bạn không thể gọi lại nó (nói qua một cuộc gọi ajax, một hành động chỉnh sửa, vv).

Answer 3

Một sự khác biệt chính giữa TagHelpers và ViewComponents liên quan đến bao nhiêu công việc cần phải được thực hiện bởi đối tượng. TagHelpers khá cơ bản, chỉ yêu cầu một lớp duy nhất ghi đè phương thức Process để tạo ra đầu ra của TagHelper.Nhược điểm là nếu bạn làm bất kỳ công việc phức tạp nào để tạo HTML bên trong trong TagHelper, thì tất cả phải được thực hiện bằng mã. Trong ViewComponent, bạn có một bộ điều khiển mini có khả năng thực hiện nhiều công việc hơn, cộng với nó trả về một khung nhìn, trong đó bạn có mã cú pháp Razor thực tế có thể được ánh xạ tới một mô hình.

Bài đăng khác đã đề cập rằng ViewComponents có nhiều "Trình trợ giúp HTML" hơn trong cách bạn gọi cho họ. ASP.NET 1.1 giải quyết vấn đề đó, để bạn có thể gọi nó với

<vc:view-component-name param1="value1" param2="value2></vc:view-component-name> 

Vì hầu hết các mục đích, một TagHelper có lợi thế nhất định, vì nó dễ dàng hơn. Nhưng nếu bạn cần một giải pháp mạnh mẽ hơn, ViewComponent là con đường để đi.

Answer 4

Và điều gì đó đánh bại mục đích của Xem thành phần (IMHO) là từ lớp Xem thành phần có vẻ không có cách nào để truy cập vào Html bên trong của VC nếu bạn sử dụng cú pháp trợ giúp thẻ:

Tuy nhiên

<vc:MyComponent id="1" att="something"> 
    Some HTML markup you would not want to put in an attribute 
</vc:MyComponent> 

có những ứng dụng tốt của một VC như Bootstrap Navigation Bar Xem Component tôi đã thấy trong một TechieJourney bài blog.

Answer 5

Khi quyết định sử dụng cái nào tôi luôn xem xét độ phức tạp của HTML của thành phần.

Nếu đó là một cái gì đó đơn giản như một cái nhìn cây hoặc một pager

<ul class="jstree"> 
    <li>Node 1</li> 
    <li>...</li> 
</ul> 

Đó là ứng cử viên cho thẻ helper, bởi vì nó đơn giản. HTML lớn trong mã C# sẽ khó duy trì.

---

Mặt khác nếu đó là HTML phức tạp với nhiều divs, hình ảnh và cấu hình như một menu thổi đầy đủ nơi nó có thể được theo chiều dọc hoặc ngang đó là nhìn của bạn thành phần. Lợi ích của thành phần xem là bạn có thể sử dụng nhiều chế độ xem để trình đơn để bạn có thể tách riêng horizontal.cshtml & vertical.cshtml trong khi sử dụng lại cùng một mã phụ trợ.