Anchor Tag Helper 란? (앵커 태그 도우미)

Anchor Tag Helper 란?

설명

Anchor Tag Helper는 표준 HTML <a></a> 태그에 새로운 특성을 추가하여 향상시킨다.

규칙에 따라 해당 특성들의 이름은 asp- 접두사로 시작된다. 렌더링 되는 Anchor 요소의 href 특성 값은 asp- 특성들의 값에 따라 결정된다.

특성

asp-controller

asp-controller 는 URL 생성에 사용되는 Controller를 할당한다.

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

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

asp-action

asp-action 은 생성되는 href 특성에 작업되는 이름을 나타낸다. Controller 에 Route에 [action] 부분과 동일한 부분이다.

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

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

만약 asp-action 값에 Index 이면 URL에 아무 작업도 추가되지 않은 기본인 / 와 같다.

asp-route-{value}

asp-route-{value} 는 와일드카드 경로 접두사를 사용하도록 설정한다.

{value} 자리에 위치하는 모든 값은 잠재적인 경로 매개 변수로 해석된다.

기본 경로가 발견되지 않으면 이 경로 접두사는 생성되는 href에 요청 매개 변수 및 값으로 추가된다.

예)

app.UseMvc(routes =>
{
    // need route and attribute on controller: [Area("Blogs")]
    routes.MapRoute(name: "mvcAreaRoute",
                    template: "{area:exists}/{controller=Home}/{action=Index}");

    // default route for non-areas
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

예-1)

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

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

“default” 경로의 {id?}와 자리 표시자가 일치하므로 template 형태로 생성된다.

예-2)

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

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

맞는 template 이 없기 때문에 위의 형식으로 생성된다.

asp-route

asp-route 는 명명된 경로에 직접 연결되는 URL을 만드는 데 사용된다.

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

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

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

📢 asp-route 에 asp-controller 또는 asp-action 을 함께 지정하면 다른 경로가 생성될 수 있다. 그러므로 해당 특성들은 같이 사용되면 안 된다.

asp-all-route-data

asp-all-route-data 는 key-value 사전을 만들 수 있도록 지원한다. key는 매개변수 이름이고, value는 변수 값이다.

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

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

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

asp-fragment

asp-fragment 는 URL에 추가할 URL 조각을 정의한다. 해시 문자(#)를 추가한다.

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

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

asp-area

asp-area 는 적절한 경로를 설정하는 데 사용되는 영역 이름을 설정한다. ASP.NET Core 2.1 이상에서 지원된다.

Razor Pages에서 사용하는 방법

계층구조

{Project Name}
- wwwroot
- Areas
  - session
    - page
      - ViewStart.cshtml
      - Index.cshtml
      - Index.cshtml.cs
- page

아래 코드는 session 영역 Index 페이지를 참조하는 태그를 볼 수 있다.

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

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

⭐
Razor Pages 앱에서 Areas를 지원하려면 Startup.ConfigureServices에 다음 중 하나를 수행해야 한다.

◾호환성 버전을 2.1 이상으로 설정한다
◾RazorPagesOptions.AllowAreas 속성을 true로 설정한다.
services.AddMvc()
        .AddRazorPagesOptions(options => options.AllowAreas = true);

MVC에서 사용하는 방법

계층 구조

{Project name}
- wwwroot
- Areas
  - Blogs
    - Controller
      - HomeController.cs
    - Views
      - Home
        
        AboutBlog.cshtml
        
        Index.cshtml
      - _ViewStart.cshtml
- Controller

asp-area 를 'Blogs'로 설정하면 Areas/Blogs 디렉터리가 접두사로 추가된다.

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

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

⭐
MVC 앱에서 영역을 지원하려면 경로 템플릿에 해당 영역에 대한 참조가 포함되어야 한다.(존재할 경우)
해당 Template은 Startup.Configure에서 routes.Maproute 메서드 호출의 두 번째 매개 변수에 표시된다.
app.UseMvc(routes =>
{
    // need route and attribute on controller: [Area("Blogs")]
    routes.MapRoute(name: "mvcAreaRoute",
                    template: "{area:exists}/{controller=Home}/{action=Index}");

    // default route for non-areas
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

asp-protocol

asp-protocol 은 URL에서 protocol(예: https)을 지정하는 데 사용된다.

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

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

asp-host

asp-host 는 URL에 호스트 이름을 지정하는 데 사용된다.

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

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

asp-page

asp-page 는 Razor Pages와 함께 사용된다. Anchor 태그의 href 특성값을 특정 페이지로 설정하는 데 사용된다.

페이지 이름 앞에 '/'를 붙이면 앱의 루트에서 해당 페이지에 대한 URL을 생성합니다.

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

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

asp-page 는 [asp-route, asp-controller, asp-action] 과 상호 배타적이다. 대신 asp-route-{value} 와는 함께 사용가능하다.

asp-page-handler

asp-page-handler 는 Razor Pages와 함께 사용된다. 특정 페이지 처리기에 연결하기 위한 것이다.

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

    // code omitted for brevity
}

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

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

OnGetProfile 에 연결되며 On<verb>접두사는 asp-page-handler 특성 값으로 생략된다. 비동기 메서드인 경우 Async 접미사도 생략된다.

🎙️On<verb> 의 "verb"는 HTTP 동사를 나타낸다. GET, POST 같은 것들이 대상이 된다.
예를 들어 OnGet, OnPost, OnPut 같은 예시가 있다.

저작자표시 비영리 변경금지

Kor-IT

Anchor Tag Helper 란? (앵커 태그 도우미)