Anchor Tag Helper in ASP.NET Core 2.1

min read

Trong bài viết trước mình có nói về TagHelper trong ASP.NET CORE 2.1, trong bài này mình chia sẽ tìm hiểu kỷ hơn về thư viện này.
Tag Helper là một thư viện giúp có thể chèn một đường dẫn URL trong thẻ <a></a>,đối với trong ASP.NET MVC5 để gọi tới một URL, ta thường dùng @Url.Action() , nhưng trong ASP Core 2.1 ta dùng đơn giản hơn nhiều, mình sẽ đi thẳng vào ví dụ, để ta dễ hình dung ra, nhưng bạn có thể tìm hiểu thêm tại đây:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-2.1

<ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Detail" asp-route-id="2">Detail</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Product" asp-all-route-data="parms">Product</a></li>
                    <li><a asp-route="ProductCategory" asp-all-route-data="parms">Product2</a></li>
  </ul>

+ asp-controller="Home": nó sẽ gọi tới HomeController.cs trong thư mục Controllers/HomeController.cs
+ asp-action="Index": nó thực thi hành động  IActionResult Index(){} trong file HomeController.cs
+ asp-route-id="2": này dùng để chèn một id đến hàm Index(int? id){}  -> URL: https://localhost:44348/Home/Detail/2
+ asp-all-route-data: giúp ta có thể chèn các cặp giá trị có (Key,Value) -> URL: https://localhost:44348/Home/Proudct?ProductID=11&CategoryID=4
VD:productID=2,CategoryID=4

//HomeController.cs
[Route("/Home/Product",
       Name = "ProductCategory")]
public IActionResult Product(int ProductId,int CategoryId)
{
     return View();
}

Bạn có thể sử dụng nó như sau:

@{
var parms = new Dictionary<string, string>
            {
                { "ProductID", "11" },
                { "CategoryID", "4" }
            };
}
<a asp-controller="Home" asp-action="Product" asp-all-route-data="parms">Product</a>
//or
<a asp-route="ProductCategory" asp-all-route-data="parms">Product</a>

Qua bài viết này bạn có thể hình dung được ta sử dụng Tag helper để gọi tới các đường link trong project, gửi tham số đến một URL, còn nhiều thứ trong Tag Helper nửa, bạn thử tìm hiểu xem thêm nó nửa nhé.
 

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)