C# Cơ bản .NET Core §1 Cài đặt, chương trình C# đầu tiên §2 Biến, kiểu dữ liệu và nhập/xuất §3 Toán tử số học và gán §4 So sánh, logic và lệnh if, switch §5 Vòng lặp for, while §6 Phương thức - Method §7 Phương thức - Delegate §8 Lớp - Class §9 Namespace §10 Partial, Nested §11 Kiểu giá trị, tham chiếu §12 Kiểu vô danh và dynamic §13 Biểu thức lambda §14 Event §15 Hàm hủy - Quá tải toán tử - thành viên tĩnh - indexer §16 null và nullable §17 Mảng §18 Chuỗi ký tự §19 Tính kế thừa §20 Phương thức khởi tạo §21 Tính đa hình - abstract - interface §22 Struct và Enum §23 Ngoại lệ Exeption §24 IDisposable - using §25 File cơ bản §26 FileStream §27 Generic §28 Collection - List §29 SortedList §30 Queue / Stack §31 Linkedlist §32 Dictionary - HashSet §33 Phương thức mở rộng §34 ObservableCollection §35 LINQ §36 (Multithreading) async - bất đồng bộ §37 Type §38 Attribute Annotation §39 DI Dependency Injection §40 (Multithreading) Parallel §41 Thư viện lớp §42 (Networking) HttpClient §43 (Networking) HttpMessageHandler §44 (Networking) HttpListener §45 (Networking) Tcp TcpListenerr/TcpClient §46 (ADO.NET) SqlConnection §47 (ADO.NET) SqlCommand §48 (EF Core) Tổng quan §49 (EF Core) Tạo Model §50 (EF Core) Fluent API §51 (EF Core) Query §52 (EF Core) Scaffold §53 (EF Core) Migration §54 (ASP.NET CORE) Hello World! §55 (ASP.NET CORE) Middleware §56 (ASP.NET CORE) Map - Request - Response §57 (ASP.NET CORE) IServiceCollection - MapWhen §58 (ASP.NET CORE) Session - ISession §59 (ASP.NET CORE) Configuration §60 (ASP.NET CORE) Gửi Mail §61 (ASP.NET CORE) SASS/SCSS §62 (ASP.NET CORE) LibMan §63 (ASP.NET RAZOR) Khởi tạo và Route §64 (ASP.NET RAZOR) Cú pháp Razor §65 (ASP.NET RAZOR) Layout trong ASP.NET Core §66 (ASP.NET RAZOR) Partial §67 (ASP.NET RAZOR) ViewComponent §68 (ASP.NET RAZOR) TagHelper §69 (ASP.NET RAZOR) PageModel §70 (ASP.NET RAZOR) Model Binding §71 (ASP.NET RAZOR) HTML Form, Validation §72 (ASP.NET RAZOR) Upload File §73 (ASP.NET RAZOR) HtmlHelper §74 (ASP.NET RAZOR) Entity Framework §75 (ASP.NET RAZOR) Paging §76 (ASP.NET RAZOR) Identity (1) - Register, Login, Logout §77 (ASP.NET RAZOR) Identity (2) Lockout, Reset Password §78 (ASP.NET RAZOR) Identity (3) Google Login §79 (ASP.NET RAZOR) Identity (4) Facebook Login §80 (ASP.NET RAZOR) Identity (5) profile, password, email ... §81 (ASP.NET RAZOR) Identity (6) Role §82 (ASP.NET RAZOR) Identity (7) Role-based Authorization §83 (ASP.NET RAZOR) Identity (8) RoleClaim §84 (ASP.NET RAZOR) Identity (9) Authorization Handler §85 (ASP.NET RAZOR) IAuthorizationService §86 (ASP.NET MVC) Controller - View §87 (ASP.NET MVC) Route §88 (ASP.NET MVC) EF, Identity §89 (ASP.NET MVC) Binding, Validation §90 (ASP.NET MVC) Xây dựng Website(1) §91 (ASP.NET MVC) Xây dựng Website(2) §92 (ASP.NET MVC) Xây dựng Website(3) §93 (ASP.NET MVC) Xây dựng Website(4) §94 (ASP.NET MVC) Giỏ hàng - Cart (5) §95 (ASP.NET MVC) elFinder (5) §96 (ASP.NET MVC) SB Admin (6) §97 (ASP.NET MVC) Kestrel, publish

Tag Helper trong ASP.NET Core - Razor Page

Tag Helper là các thành phần giúp cho việc phát sinh mã HTML trong trang Razor, chủ yếu phát sinh các thẻ HTML. ASP.NET Core cung cấp sẵn những Tag Helper để phát sinh các thẻ HTML phổ biến, nâng cao hơn bạn có thể tự tạo ra Tag Helper của riêng mình.

Các Tag Helper cung cấp sẵn trong ASP.NET Core thường làm việc trên các thẻ HTML chuẩn, sau đó thêm vào các thuộc tính với tiền tố asp-, Tag Helper làm việc nó sẽ phát sinh chính xác thẻ theo yêu cầu.

Ví dụ với Anchor Tag Helper, nếu bạn viết:

<a asp-page="ViewProduct" asp-route-id="2" >Sản phẩm 2</a>

Thì kết quả có thể là (tùy thuộc vào khai báo Route trang ASP ViewProduct):

<a href="/sanpham/2" >Sản phẩm 2</a>

asp-page, asp-route-id là thuộc tính của Tag Helper này

Kích hoạt nạp các Tag Helper

Để Razor sử dụng được các Tag Helper cung cấp sẵn bạn cần nạp vào bằg chỉ thị @addTagHelper, mặc định các trang Razor được nạp khi đã khai báo trong _ViewImports.cshtml (vai trò file _ViewImports) với dòng:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Một số Tag Helper

Tag helper Sử dụng
Anchor

Tạo các link, hoạt động khi bạn viết thẻ <a>, các thuộc tính có thể dùng như:

  • asp-controller Controller (MVC) để phát sinh href của thẻ
  • asp-action Action của controller
  • asp-route-{value} tham số của Route, ví dụ asp-route-id, asp-route-name ...
  • asp-route Route để phát sinh href
  • asp-all-route-data thuộc tính gán giá trị bằng đối tượng kiểu Dictionary<string, string> để phát sinh phần query của url
  • asp-fragment phần fragment của URL
  • asp-area tên Area (Xem Area trong ASP.NET Core Razor)
  • asp-page tên trang Razor
<a asp-page="ViewProduct" asp-route-id="2">Sản phẩm khác</a>
// Kết quả: <a href="/ViewProduct/2/" >Sản phẩm khác</a>
Form

Chức năng phát sinh phần tử Form HTML, làm việc trên thẻ <form> với các thuộc tính

Thuộc tính Mô tả
asp-controller Tên của controller
asp-action Actionn trong controller
asp-area Tên Area
asp-page Tên trang Razor
asp-page-handler Tên handler của Razor (OnGet, OnPost ..)
asp-route Tên route
asp-route-{value} Giá trị thành phần route
asp-all-route-data Giá trị xây dựng query action
asp-fragment fragment của action form

Bạn có thể sử dụng Input, Button để tạo ActionForm với các thuộc tính trên.

Image Làm việc trên thẻ <img> với thuộc tính asp-append-version="true" để thêm query v=xxxx vào địa chỉ ảnh.
Input Làm việc trên thẻ <input> với thuộc tính asp-for="@data", phần tử sinh ra phụ thuộc vào kiểu data, ví dụ như data là bool thì input có thuộc tính type="checkbox". Ngoài ra kiểu cũng xác định bởi các thuộc tính bổ sung như: [EmailAddress], [DataType(DataType.Time)] ...
Label Làm việc trên thẻ <label> với thuộc tính asp-for="@data"
Link Làm việc trên thẻ <link>
Select Làm việc trên thẻ <select>, ví dụ:
<select asp-for="Country" asp-items="Model.Countries"></select>
Textarea Làm việc trên thẻ <textarea> với thuộc tính asp-for="s"

Tạo Tag Helper riêng

Thực hành tạo ra một Tag Helper, đặt tên thẻ là myul với dữ liệu truyền vào là list-items là một danh sách chuỗi, list-title tiêu đề, kết quả là phát sinh HTML cấu trúc ul, li như sau:

<h2>Tiêu đề</h2>
<ul class="list-group">
    <li class="list-group-item">item1</li>
    <li class="list-group-item">item2</li>
    ...
</ul>

Để tạo ra một Tag Helper, cần tạo ra lớp kế thừa lớp TagHelper sau đó phải nạp chồng phương thức Process hoặc ProcessAsync nếu dùng bất đồng bộ.

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Razor.TagHelpers;


namespace MyTagHelper
{
  // thẻ sẽ là myul
  [HtmlTargetElement("myul")]
  public class MyULTagHelper : TagHelper
  {
    // Thuộc tính sẽ là list-title
    public string ListTitle { get; set; }
    // Thuộc tính sẽ là list-items
    public List<String> ListItems {set; get;}


    // ProcessAsyn nếu bất đồng bộ

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "ul";    // ul sẽ thay cho myul
        output.Attributes.SetAttribute("class", "list-group");
        output.TagMode = TagMode.StartTagAndEndTag;
        output.PreElement.AppendHtml($"<h2>{ListTitle}</h2>");
        StringBuilder stringBuilder = new StringBuilder();
        foreach (var name in ListItems)
        {
            stringBuilder.Append($@"<li class=""list-group-item"">{name}</li>");
        }
        output.Content.SetHtmlContent(stringBuilder.ToString());
    }

  }
}

Như vậy đã khai báo xong một Tag Helper. Để nạp và sử dụng chúng hãy cho chỉ thị sau vào file _ViewImports.cshtml

@addTagHelper *, razor04.codebehide

Ở đây razor04.codebehideassembly chứa Helper này. Ở đây là file build được từ mã nguồn.

Sử dụng:

@{
   var productlist = new List {
        "Tên Sản phẩm 1",
        "Tên Sản phẩm 2",
        "Tên Sản phẩm 3"
     };
}
<myul list-title="Danh sách sản phẩm" list-items="@productlist"></myul>

Kết quả là:

<h2>Danh sách sản phẩm</h2>
<ul class="list-group">
    <li class="list-group-item">Tên Sản phẩm 1</li>
    <li class="list-group-item">Tên Sản phẩm 2</li>
    <li class="list-group-item">Tên Sản phẩm 3</li>
</ul>
Đăng ký theo dõi ủng hộ kênh