15 июня 2011 г.

ActionLink картинкой в классе стиля, для ASP.Net MVC

Я уже рассматривал варианты создания ссылки (ActionLink) в виде картинки вместо текста. Оба тех метода обьеденяет одна деталь - источник картинки мы задаем напрямую, через атрибут src.

В большинстве случаев, картинка задается не напрямую, а в качестве фонового изображения, через CSS-стиль (верстальщики всегда так делают). Поэтому передо мной возникла небольшая проблемка: повесить ActionLink на ссылку с фоновым изображением.

Допустим, верстальщик оставил нам вот такой-вот css-класс "my_img", который нужно прикручивать к ссылке:

.my_img
{
display: block;
width: 48px; height: 48px;
background: url('_youtube.png') no-repeat center center;
right: 0; top: 0;
z-index: 1;
}

Конечно же, для создания ActionLink со стилем, мы могли бы поступить вот так:

<%= Html.ActionLink("link text", "about", null, new {@class = "my_img"}) %>

Но нам же совсем не нужно, чтобы поверх изображения висел текст самой ссылки. К сожалению, хэлпер HTML.ActionLink не позволяет создавать ссылку с пустым текстовым параметром типа:

<%= Html.ActionLink("", "about", null, new {@class = "my_img"}) %>
или:

<%= Html.ActionLink(string.Empty, "about", null, new {@class = "my_img"}) %>

В такой ситуации, нам на выручку приходит HTML.Action. Этот хэлпер позволит нам решить задачу вот таким простым образом:

<a href="<%= Url.Action("about") %>" class="my_img"></a>

Вот и все. Мы создали ссылку, установили для нее адрес перехода, и задали стиль. А главное - ссылка не содержит текста.
Выглядит это как-то так:

_____
Исходники