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

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

@Html.ActionLink("linkText", "actionName")

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

<a href="/controllerName/actionName">linkText</a>

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

<a href="@Url.Action("actionName")">linkText</a>

하지만, 뭔가 다른 방법이 없을까? 아래와 같은 방식으로 하면 어떨까?

@Html.ImageActionLink("imageSource", "href", "actionName")

이렇게 작성한 결과는

<a href="/controllerName/actionName"><img src="imageSource" /></a>

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

`HtmlHelper.Link()`

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

@Html.Link("Link Text", "http://link.url");
@Html.Link("Link Text", "http://link.url", new { title = "Link Title" });
@Html.Link("Link Text", "http://link.url", new Dictionary<string, object> () { { "title", "Link Title" } });

위의 결과는 아래와 같다.

<a href="http://link.url">Link Text</a>
<a href="http://link.url" title="Link Title">Link Text</a>
<a href="http://link.url" title="Link Title">Link Text</a>

`HtmlHelper.Image()`

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

@Html.Image("http://image.source");
@Html.Image("http://image.source", new { alt = "Alternative Text" });
@Html.Image("http://image.source", new Dictionary<string, object>() { { "alt", "Alternative Text" } });

위의 결과는 아래와 같다.

<img src="http://image.source" />
<img src="http://image.source" alt="Alternative Text" />
<img src="http://image.source" alt="Alternative Text" />

`HtmlHelper.ImageActionLink()`

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

@Html.ImageActionLink("http://image.source", "Action Method Name");
@Html.ImageActionLink("http://image.source", "Action Method Name", new { title = "Link Title" });
@Html.ImageActionLink("http://image.source", "Action Method Name", new { title = "Link Title" }, new { border = 0 });
@Html.ImageActionLink("http://image.source", "Action Method Name", new { id = 1 }, new { title = "Link Title" }, new { border = 0 });

@Html.ImageActionLink("http://image.source", "Action Method Name", "Controller Name");
@Html.ImageActionLink("http://image.source", "Action Method Name", "Controller Name", new { title = "Link Title" });
@Html.ImageActionLink("http://image.source", "Action Method Name", "Controller Name", new { title = "Link Title" }, new { border = 0 });
@Html.ImageActionLink("http://image.source", "Action Method Name", "Controller Name", new { id = 1 }, new { title = "Link Title" }, new { border = 0 });

위의 결과는 아래와 같다.

<a href="/home/action"><img src="http://image.source" /></a>
<a href="/home/action" title="Link Title"><img src="http://image.source" /></a>
<a href="/home/action" title="Link Title"><img src="http://image.source" border="0" /></a>
<a href="/home/action/1" title="Link Title"><img src="http://image.source" border="0" /></a>

<a href="/controller/action"><img src="http://image.source" /></a>
<a href="/controller/action" title="Link Title"><img src="http://image.source" /></a>
<a href="/controller/action" title="Link Title"><img src="http://image.source" border="0" /></a>
<a href="/controller/action/1" title="Link Title"><img src="http://image.source" border="0" /></a>

이렇게 ActionLink() 메소드 대신 ImageActionLink()를 사용하여 anchor 태그 안에 이미지가 추가될 수 있게끔 할 수 있다.

Array

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