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

Tag Helper trong ASP.NET Core - Razor Page

Các Tag Helper là các phần tử của ngôn ngữ đánh dấu (markup - quen thuộc với các phần tử HTML như <a>, <input> <form> ...), nó được viết trong các View (các file .html, Razor file) , qua đó nó phát sinh mã HTML một cách thích hợp (được gọi là dựng HTML phía server - server side) .

Ví dụ Anchor Tag Helper, giúp bạn phát sinh phần tử <a> với thuộc tính href sinh ra trỏ đến một trang Razor, Control ... Giả sử bạn có trang Razor là ViewProduct, có thiết lập địa chỉ URL là @page "/sanpham/{id?}"

Nếu vậy trong View bạn có thể viết:

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

Thì kết quả HTML sinh ra là:

<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


Có rất nhiều Tag Helper được xây dựng sẵn cho các tác vụ phổ biến như tạo form, tạo các đường link liên kết ... Các Tag Helper xây dựng sẵn này chủ yếu sử dụng đúng tên thẻ HTML mà nó sinh ra để đặt cho Tag Helper. Như ví dụ trên, khi viết thẻ <a> là sẽ gọi đến Anchor Tag Helper, từ các thuộc tính nó sẽ phát sinh ra giá trị cho href của thẻ <a>

Tag Helper và HTML Helper

Sử dụng Tag Helper giảm thiểu việc sử dụng code C# trong trang Razor (.cshtml), ngoài ra trong các View (.cshtml) còn sử dụng lớp HtmlHelper để phát sinh HTML - nếu dùng Html Helper thì có nghĩa sử dụng trực tiếp mã C#. Trong các View (.cshtml) có thuộc tính Html, bạn có thể truy cập và gọi các phương thức là các Html Helper.

Hãy xét ví dụ sau, để nhận biết cách sử dụng Html Helper và Tag Helper. Giả sử Model của View có thuộc tính như sau:

[DisplayName("Tên người dùng")]
public string UserName { get; set; } = "xuanthulab";

Lúc này để phát sinh HTML tạo ra control của form để nhập liệu (gồm có lable và textbox):

Nếu dùng Html Helper bạn có thể viết (dùng phương thức Lable và TextBox của lớp HtmlHelper)

@Html.Label("UserName")
@Html.TextBox("UserName", null, new {@class = "text-primary"})

Nếu dùng Tag Helper bạn có thể viết (dùng LabelTagHelper, InputTagHelper):

<label asp-for="UserName"></label>
<input asp-for="UserName" class="text-secondary" />

Cả hai cách này đều thu được kết quả là mã HTML như sau:

<label for="UserName">Tên người dùng</label>
<input class="text-secondary" type="text" id="UserName"
    name="UserName" value="xuanthulab" />

Nạp hoặc loại bỏ Tag Helper

(@addTagHelper, @removeTagHelper, !)

Bản chất các Tag Helper cũng là các thư viện lớp .NET, muốn sử dụng Tag Helper trong .cshtml thì phải dùng chỉ thị @addTagHelper để nạp vào.

Mặc định thêm chỉ thị này trong _ViewImports.cshtml (vai trò file _ViewImports) với dòng:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Ký hiệu * cho biết nạp tất cả các Tag Helper có trong Microsoft.AspNetCore.Mvc.TagHelpers

Nếu muốn vô hiệu hóa một Tag Helper thì dùng chỉ thị @removeTagHelper

Khi bạn viết thẻ HTML, thì Tag Helper tương ứng nếu có sẽ được triệu gọi, nếu muốn hủy tác dụng này thì sử dụng ký tự ! vào trước tên thẻ, ví dụ:

<!label for="UserName">Tên người dùng</!label>

Một số Tag Helper

Dưới đây là một số Tag Helper xây dựng sẵn (trong Microsoft.AspNetCore.Mvc.TagHelpers)

Tag Sử dụng
Anchor

Anchor Tag Helper cải tiến thẻ <a>, bằng cách thêm vào các thuộc tính, các thuộc tính này bắt đầu bằng tiền tố asp-. Từ các thuộc tính asp-, nó sinh ra giá trị cho thuộc tính href, một số thuộc tính đó là:

  • 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 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
  • asp-page-handler thiết lập handler của 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

Cải tiến thẻ <form> với các thuộc tính thêm vào để phát sinh giá trị cho thuộc tính action

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.

Chú ý thuộc tính src phải trỏ đến một file tĩnh, ví dụ src="~/images/1.png", nếu vậy nếu asp-append-version="true" thì mỗi phiên bản hình ảnh sẽ cache địa chỉ (phát sinh query v=xxx)

Input

Làm việc trên thẻ <input> với thuộc tính asp-for="@data"

@data là biểu thức, chỉ ra tên dữ liệu.

qua đó nó sinh ra phần tử HTML <input> với các thuộc tính sinh ra là

  • type 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)] ...
  • Phát sinh id dựa vào biểu thức asp-for
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à mylist 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.Collections.Generic;
using System.Text;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace XTLAB
{
      // thẻ sẽ là mylist
    [HtmlTargetElement("mylist")]
    public class MyListTagHelper : 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;}

            public override void Process(TagHelperContext context, TagHelperOutput output)
            {
                  output.TagName = "ul";    // ul sẽ thay cho myul
                  output.TagMode = TagMode.StartTagAndEndTag;

                  output.Attributes.SetAttribute("class", "list-group");
                  output.PreElement.AppendHtml($"<h2>{ListTitle}</h2>");


                  StringBuilder content = new StringBuilder();
                  foreach (var item in ListItems)
                  {
                      content.Append($@"<li class=""list-group-item"">{item}</li>");
                  }
                  output.Content.SetHtmlContent(content.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. Hãy thay bằng tên dự án của bạn, là file build được từ mã nguồn.

Sử dụng:

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

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>