The Anchor Tag Helper

Tag Helper Anchor có thể giúp bạn khi bạn muốn trỏ tới các action khác nhau trong Controller. Bạn có thể tự tay làm với element HTML thông thường và thuộc tính href, nhưng khi bạn dùng Tag Helper Anchor thì thuộc tính href sẽ tự động sinh ra cho bạn.

The controller and action attributes

Trong Anchor Tag Helper này thì thuộc tính controller và action là hay được sử dụng nhất. Như tên của nó chỉ ra, chúng cho phép chúng ta định vị Action trong Controller. Vì vậy, nếu bạn có Controller gọi là MovieController với action List() để hiển thị dánh sách phim thì Anchor Tag Helper có dạng sau:

<a asp-controller="Movie" asp-action="List">Movie list</a>

Mã HTML có dạng:

<a href="/Movie/List">Movie list</a>

Chú ý tôi dùng cả hai thuộc tính (controller và action) - nếu không thì ASP.NET sẽ giả định về controller và action bạn muốn dùng dựa trên lời gọi controller/action. Trong hầu hết trường hợp, bạn nên chỉ định cả hai thuộc tính.

The route-{value} attribute

Trong ví dụ trên, chúng ta chỉ tới danh sách các phim nhưng Anchor Tag Helper có lẽ hữu ích hơn khi bạn muốn trỏ tới một đối tượng cụ thể - trong ví dụ của chúng ta là danh sách các phim. Vì vậy, khi action List được gọi thì bạn có thể trả về danh sách các phim như trong ví dụ sau:

public IActionResult List()
{
	List<Movie> movies = new List<Movie>()
	{
		new Movie() { Id = 1, Title = "The Godfather" },
		new Movie() { Id = 2, Title = "Forrest Gump" },
		new Movie() { Id = 3, Title = "Fight Club" },
	};
	return View(movies);
}

Trong View List, bạn có thể đưa ra các phim dựa trên vòng lặp:

<ul>
    @foreach(var movie in Model)
    {
        <li>
            <a asp-controller="Movie" asp-action="Details" asp-route-id="@movie.Id">@movie.Title</a>
        </li>
    }
</ul>

Chú ý tới thuộc tính cuối cùng, đó là asp-route-id. Đây là thuộc tính wildcard, với phần cuối cùng id liên quan tới tên của tham số trong action. Nếu tham số có tên khác với id như là movieID thì thuộc tính nên được gọi là asp-route-movieID.

More attributes

Những thuộc tính trên là những thuộc tính bạn có thể dùng nhiều nhất nhưng có nhiều thuộc tính khác mà bạn có thể thấy hữu ích. Ví dụ:

The fragment attribute

Nếu bạn muốn trỏ tới một phần nào đó của trang thì dùng asp-fragment như sau:

<a asp-controller="Movie" asp-action="List" asp-fragment="test">Movie list</a>

Kết quả như sau:

<a href="/Movie/List#test">Movie list</a>

The host attribute

Nếu bạn cần xác định host thì bạn có thể dùng đường dẫn ví dụ google.com. Thường không cần vì giá trị này có thể lấy tự động từ trang web nếu cần. Ví dụ:

<a asp-controller="Movie" asp-action="List" asp-host="google.com">Movie list</a>

Kết quả:

<a href="http://google.com/Movie/List">Movie list</a>

The protocol attribute

Protocol sẽ được dùng (ví dụ http hay https). Chỉ khi cần thì mới phải chỉ định rõ protocol. Ví dụ:

<a asp-controller="Movie" asp-action="List" asp-host="google.com" asp-protocol="https">Movie list</a>

Kết quả:

<a href="https://google.com/Movie/List">Movie list</a>

Summary

Trong bài này chúng ta đã đề cập tới Anchor Tag Helper cũng như thuộc tính quan trọng khác mà bạn có thể dùng. Có các thuộc tính nâng cao khác như asp-area ... Cũng nên nhớ rằng bạn có thể kết hợp thuộc tính Tag Helper với thuộc tính anchor trong HTML khác.