HtmlHelper.ActionLink()에 이미지 삽입하기

HtmlHelper 클라스는 상당히 많은 익스텐션 메소드들을 제공하는데, 그중 하나가 ActionLink()이다. 이 ActionLink() 메소드도 받아들이는 파라미터의 종류와 갯수에 따라 굉장히 여러 가지 종류가 있는데, 가장 대표적인 것은 아래와 같다.

이것은 지정된 액션을 하이퍼 링크로 하고, <a>...</a> 사이의 텍스트로는 linkText를 갖는 하나의 완결된 HTML 앵커 태그를 생성한다. 따라서, 위와 같이 작성한 Razor 스크립트는 실제로 HTML 렌더링을 거치고 나면 아래와 같다.

굉장히 유용한 익스텐션 메소드인데, 이것의 가장 큰 단점은 저 linkText 대신 이미지를 지정할 수 없다는 것이다. 이런 경우에는 보통 아래와 같은 방식으로 @Url.Action() 메소드를 이용하여 Razor 스크립트를 작성하는 편이다.

하지만, 뭔가 다른 방법이 없을까? 결론적으로 말하자면 일단 기존의 ActionLink() 메소드로는 원하는 기능을 구현할 수 없고, 아래와 같은 식의 새로운 확장 메소드를 제작해야 한다.

이렇게 작성한 결과는

이런 결과를 기대할 수는 없을까? 그래서 만들었다. 이름하여 HtmlHelper.Extended. 이 라이브러리를 이용하면 아래 네 가지 익스텐션 메소드들을 사용할 수 있다.

HtmlHelper.Link()

@Html.Link() 메소드는 아래와 같이 여러 가지 형태로 변형해서 사용할 수 있다.

위의 결과는 아래와 같다.

HtmlHelper.Image()

@Html.Image() 메소드는 아래와 같이 여러 가지 형태로 변형해서 사용할 수 있다.

위의 결과는 아래와 같다.

HtmlHelper.ImageLink()

@Html.ImageLink() 메소드는 아래와 같이 여러 가지 형태로 변형해서 사용할 수 있다.

위의 결과는 아래와 같다.

HtmlHelper.ImageActionLink()

@Html.ImageActionLink() 메소드는 아래와 같이 여러 가지 형태로 변형해서 사용할 수 있다.

위의 결과는 아래와 같다.

꼭 써보도록 하자. 두 번 쓰자.

You might be interested in...