Сделать Html.ActionLink вокруг изображения в ASP.NET MVC?

Question

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

Answer 1

Бритва (Просмотр двигателя):

<a href="@Url.Action("ActionName", "ControllerName")">
    <img src="@Url.Content("~/Content/img/imgname.jpg")" />
</a>

ASPX (Просмотр движка):

<a href="<%= Url.Action("ActionName", "ControllerName") %>">
    <img src="<%= Url.Content("~/Content/img/imgname.jpg") %>" />
</a>

Очевидно, что если вы делаете это более одного раза, напишите для этого помощника. И заполните другие атрибуты img / a. Но это должно дать вам общее представление.

Answer 2

Попробуйте что-то вроде этого:

public static string ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName)
{
    var urlHelper = new UrlHelper(html.ViewContext.RequestContext);

    string imgUrl = urlHelper.Content(imgSrc);
    TagBuilder imgTagBuilder = new TagBuilder("img");
    imgTagBuilder.MergeAttribute("src", imgUrl);
    string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);

    string url = UrlHelper.Action(actionName);

    TagBuilder tagBuilder = new TagBuilder("a") {
        InnerHtml = img
    };
    tagBuilder.MergeAttribute("href", url);

    return tagBuilder.ToString(TagRenderMode.Normal);
}

Надеюсь, это поможет

Answer 3

Первый ответ, данный @Craig Stuntz, абсолютно идеален, но меня беспокоит вопрос, что вы будете делать, если у вас будет Ajax.ActionLink вместо Html.ActionLink. Здесь я объясню простые решения для обоих методов. Для Html.ActonLink вы можете сделать следующее:

@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" ... />"))

Та же концепция может применяться для Ajax.ActionLink

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" … />"))

так что это будет легко для вас.

Edit:

Изображение ActionLink с таблицей стилей или именем класса

С таблицей стилей

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\"  style=\"width:10%\" ... />"))

с именем класса

<style>
.imgClass {
 width:20%
}

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" class=\"imgClass\"  ... />"))

Для получения дополнительной информации о ActionLink вокруг изображения посетите ActionLink вокруг изображения в Asp.net MVC

Answer 4

проще ...

изменить код на:

<p class="site-title">@Html.ActionLink(" ", "Index", "Home",
    new
    {
        style = "background: url('" + Url.Content("~/images/logo.png") + "') no-repeat center right; display:block; height:50px;width:50px;"
    })</p>

Answer 5

Вы можете использовать url.content:

@Url.Content("~/images/img/slide.png")

этот обратный относительный путь

Answer 6

Вы можете создать htmlhelper, который может вернуть изображение со ссылкой ... В качестве параметров вы будете передавать значения htmlhelper, такие как путь к изображению и ссылка, а в htmlhelper вы будете использовать StringBuilder для правильного форматирования html этого связанного изображения ...

ура