Anchor Tag Helper trong ASP.NET Core

Nguồn: Anchor Tag Helper in ASP.NET Core

Anchor Tag Helper tăng cường thẻ HTML anchor (<a ... ></a>) tiêu chuẩn bằng cách thêm các thuộc tính mới. Theo quy ước, các tên thuộc tính có tiền tố asp-. Giá trị thuộc tính href của phần tử anchor được render được xác định bởi các giá trị của thuộc tính asp-.

Để có cái nhìn tổng quan về Tag Helpers, xem Tag Helpers trong ASP.NET Core.

Xem hoặc tải xuống mã mẫu

SpeakerController được sử dụng trong các mẫu xuyên suốt tài liệu này:

csharp

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

public class SpeakerController : Controller
{
    private List<Speaker> Speakers =
        new List<Speaker>
        {
            new Speaker {SpeakerId = 10},
            new Speaker {SpeakerId = 11},
            new Speaker {SpeakerId = 12}
        };

    [Route("Speaker/{id:int}")]
    public IActionResult Detail(int id) =>
        View(Speakers.FirstOrDefault(a => a.SpeakerId == id));

    [Route("/Speaker/Evaluations", 
           Name = "speakerevals")]
    public IActionResult Evaluations() => View();

    [Route("/Speaker/EvaluationsCurrent",
           Name = "speakerevalscurrent")]
    public IActionResult Evaluations(
        int speakerId,
        bool currentYear) => View();

    public IActionResult Index() => View(Speakers);
}

public class Speaker
{
    public int SpeakerId { get; set; }
}

Các thuộc tính của Anchor Tag Helper

asp-controller

Thuộc tính asp-controller gán controller được dùng để tạo URL. Markup sau liệt kê tất cả diễn giả:

cshtml

<a asp-controller="Speaker"
   asp-action="Index">All Speakers</a>

HTML được tạo ra:

html

<a href="/Speaker">All Speakers</a>

Nếu thuộc tính asp-controller được chỉ định mà không có asp-action, giá trị asp-action mặc định là controller action liên kết với view đang thực thi hiện tại. Nếu asp-action bị bỏ qua khỏi markup trên, và Anchor Tag Helper được sử dụng trong view Index của HomeController (/Home), HTML được tạo ra là:

html

<a href="/Home">All Speakers</a>

asp-action

Giá trị thuộc tính asp-action đại diện cho tên controller action được bao gồm trong thuộc tính href được tạo. Markup sau đặt giá trị thuộc tính href được tạo vào trang speaker evaluations:

cshtml

<a asp-controller="Speaker"
   asp-action="Evaluations">Speaker Evaluations</a>

HTML được tạo ra:

html

<a href="/Speaker/Evaluations">Speaker Evaluations</a>

Nếu không có thuộc tính asp-controller được chỉ định, controller mặc định gọi view đang thực thi view hiện tại được sử dụng.

Nếu giá trị thuộc tính asp-action là Index, thì không có action nào được append vào URL, dẫn đến việc gọi action Index mặc định. Action được chỉ định (hoặc mặc định) phải tồn tại trong controller được tham chiếu trong asp-controller.

asp-route-{value}

Thuộc tính asp-route-{value} cho phép một tiền tố route ký tự đại diện. Bất kỳ giá trị nào chiếm placeholder {value} được hiểu là route parameter tiềm năng. Nếu không tìm thấy route mặc định, tiền tố route này được append vào thuộc tính href được tạo như một request parameter và giá trị. Ngược lại, nó được thay thế trong route template.

Xét controller action sau:

csharp

private List<Speaker> Speakers =
    new List<Speaker>
    {
        new Speaker {SpeakerId = 10},
        new Speaker {SpeakerId = 11},
        new Speaker {SpeakerId = 12}
    };

[Route("Speaker/{id:int}")]
public IActionResult Detail(int id) =>
    View(Speakers.FirstOrDefault(a => a.SpeakerId == id));

Với route template mặc định được định nghĩa trong Program.cs:

csharp

app.MapControllerRoute(
  name: "default",
  pattern: "{controller=Home}/{action=Index}/{id?}");

MVC view sử dụng model, được cung cấp bởi action, như sau:

cshtml

@model Speaker
<!DOCTYPE html>
<html>
<body>
    <a asp-controller="Speaker"
       asp-action="Detail" 
       asp-route-id="@Model.SpeakerId">SpeakerId: @Model.SpeakerId</a>
</body>
</html>

Placeholder {id?} của route mặc định được khớp. HTML được tạo ra:

html

<a href="/Speaker/Detail/12">SpeakerId: 12</a>

Giả sử tiền tố route không phải là một phần của routing template khớp, như trong MVC view sau:

cshtml

@model Speaker
<!DOCTYPE html>
<html>
<body>
    <a asp-controller="Speaker"
       asp-action="Detail"
       asp-route-speakerid="@Model.SpeakerId">SpeakerId: @Model.SpeakerId</a>
<body>
</html>

HTML sau được tạo ra vì speakerid không được tìm thấy trong route khớp:

html

<a href="/Speaker/Detail?speakerid=12">SpeakerId: 12</a>

Nếu asp-controller hoặc asp-action không được chỉ định, thì quá trình xử lý mặc định tương tự như trong thuộc tính asp-route.

asp-route

Thuộc tính asp-route được dùng để tạo URL liên kết trực tiếp đến một named route. Sử dụng routing attributes, một route có thể được đặt tên như được hiển thị trong SpeakerController và được sử dụng trong action Evaluations:

csharp

[Route("/Speaker/Evaluations", 
       Name = "speakerevals")]

Trong markup sau, thuộc tính asp-route tham chiếu đến named route:

cshtml

<a asp-route="speakerevals">Speaker Evaluations</a>

Anchor Tag Helper tạo route trực tiếp đến controller action đó sử dụng URL /Speaker/Evaluations. HTML được tạo ra:

html

<a href="/Speaker/Evaluations">Speaker Evaluations</a>

Nếu asp-controller hoặc asp-action được chỉ định thêm vào asp-route, route được tạo có thể không như mong đợi. Để tránh xung đột route, asp-route không nên được sử dụng với các thuộc tính asp-controller và asp-action.

asp-all-route-data

Thuộc tính asp-all-route-data hỗ trợ việc tạo dictionary các cặp key-value. Key là tên parameter, value là giá trị parameter.

Trong ví dụ sau, dictionary được khởi tạo và truyền đến Razor view. Ngoài ra, dữ liệu cũng có thể được truyền vào với model của bạn.

cshtml

@{
var parms = new Dictionary<string, string>
            {
                { "speakerId", "11" },
                { "currentYear", "true" }
            };
}

<a asp-route="speakerevalscurrent"
   asp-all-route-data="parms">Speaker Evaluations</a>

Code trên tạo ra HTML sau:

html

<a href="/Speaker/EvaluationsCurrent?speakerId=11&currentYear=true">Speaker Evaluations</a>

Dictionary asp-all-route-data được làm phẳng để tạo querystring đáp ứng các yêu cầu của action Evaluations overloaded.

Nếu bất kỳ key nào trong dictionary khớp với route parameters, các giá trị đó được thay thế trong route theo cách phù hợp. Các giá trị không khớp khác được tạo ra như request parameters.

asp-fragment

Thuộc tính asp-fragment định nghĩa URL fragment để append vào URL. Anchor Tag Helper thêm ký tự hash (#). Xét markup sau:

cshtml

<a asp-controller="Speaker"
   asp-action="Evaluations"
   asp-fragment="SpeakerEvaluations">Speaker Evaluations</a>

HTML được tạo ra:

html

<a href="/Speaker/Evaluations#SpeakerEvaluations">Speaker Evaluations</a>

Hash tags hữu ích khi xây dựng ứng dụng client-side. Chúng có thể được dùng để đánh dấu và tìm kiếm dễ dàng trong JavaScript.

asp-area

Thuộc tính asp-area đặt tên area được dùng để đặt route phù hợp. Các ví dụ sau mô tả cách thuộc tính asp-area gây ra việc ánh xạ lại các routes.

Sử dụng trong Razor Pages

Razor Pages areas được hỗ trợ trong ASP.NET Core 2.1 trở lên.

Xét cấu trúc thư mục sau:

{Tên project}
wwwroot
Areas
Sessions
Pages
\_ViewStart.cshtml
Index.cshtml
Index.cshtml.cs
Pages

Markup để tham chiếu đến Razor Page Index trong area Sessions là:

cshtml

<a asp-area="Sessions"
   asp-page="/Index">View Sessions</a>

HTML được tạo ra:

html

<a href="/Sessions">View Sessions</a>

Để hỗ trợ areas trong ứng dụng Razor Pages, hãy đảm bảo rằng area routing được bật trong cấu hình routing của ứng dụng.

Sử dụng trong MVC

Xét cấu trúc thư mục sau:

{Tên project}
wwwroot
Areas
Blogs
Controllers
HomeController.cs
Views
Home
AboutBlog.cshtml
Index.cshtml
\_ViewStart.cshtml
Controllers

Đặt asp-area thành "Blogs" sẽ tiền tố thư mục Areas/Blogs vào các routes của controllers và views liên kết cho thẻ anchor này. Markup để tham chiếu đến view AboutBlog là:

cshtml

<a asp-area="Blogs"
   asp-controller="Home"
   asp-action="AboutBlog">About Blog</a>

HTML được tạo ra:

html

<a href="/Blogs/Home/AboutBlog">About Blog</a>

Để hỗ trợ areas trong ứng dụng MVC, route template phải bao gồm tham chiếu đến area, nếu có. Cấu hình area routes trong Program.cs bằng cách dùng MapControllerRoute với một area pattern, ví dụ:

``csharp app.MapControllerRoute( name: "mvcAreaRoute", pattern: "{area:exists}/{controller=Home}/{action=Index}");``

asp-protocol

Thuộc tính asp-protocol dùng để chỉ định protocol (như https) trong URL. Ví dụ:

cshtml

<a asp-protocol="https"
   asp-controller="Home"
   asp-action="About">About</a>

HTML được tạo ra:

html

<a href="https://localhost/Home/About">About</a>

Tên host trong ví dụ là localhost. Anchor Tag Helper sử dụng domain công khai của website khi tạo URL.

asp-host

Thuộc tính asp-host dùng để chỉ định tên host trong URL. Ví dụ:

cshtml

<a asp-protocol="https"
   asp-host="microsoft.com"
   asp-controller="Home"
   asp-action="About">About</a>

HTML được tạo ra:

html

<a href="https://microsoft.com/Home/About">About</a>

asp-page

Thuộc tính asp-page được dùng với Razor Pages. Sử dụng nó để đặt giá trị thuộc tính href của thẻ anchor đến một page cụ thể. Thêm tiền tố / trước tên page sẽ tạo URL cho page khớp từ root của ứng dụng:

Với mã mẫu, markup sau tạo liên kết đến Razor Page attendee:

cshtml

<a asp-page="/Attendee">All Attendees</a>

HTML được tạo ra:

html

<a href="/Attendee">All Attendees</a>

Thuộc tính asp-page loại trừ lẫn nhau với các thuộc tính asp-route, asp-controller, và asp-action. Tuy nhiên, asp-page có thể được dùng với asp-route-{value} để kiểm soát routing, như markup sau minh họa:

cshtml

<a asp-page="/Attendee"
   asp-route-attendeeid="10">View Attendee</a>

HTML được tạo ra:

html

<a href="/Attendee?attendeeid=10">View Attendee</a>

Nếu page được tham chiếu không tồn tại, một liên kết đến page hiện tại được tạo bằng cách dùng ambient value từ request. Không có cảnh báo nào được chỉ ra, ngoại trừ ở debug log level.

asp-page-handler

Thuộc tính asp-page-handler được dùng với Razor Pages. Nó dự định để liên kết đến các page handlers cụ thể.

Xét page handler sau:

csharp

public void OnGetProfile(int attendeeId)
{
    ViewData["AttendeeId"] = attendeeId;

    // code omitted for brevity
}

Markup liên kết của page model liên kết đến page handler OnGetProfile. Lưu ý rằng tiền tố On<Verb> của tên method page handler được bỏ qua trong giá trị thuộc tính asp-page-handler. Khi method là async, hậu tố Async cũng được bỏ qua.

cshtml

<a asp-page="/Attendee"
   asp-page-handler="Profile"
   asp-route-attendeeid="12">Attendee Profile</a>

HTML được tạo ra:

html

<a href="/Attendee?attendeeid=12&handler=Profile">Attendee Profile</a>