Zrobić Html.ActionLink wokół obrazu w ASP.NET MVC?

Question

Jak mogę zrobić coś podobnego do Html.ActionLink() z wyjątkiem umieszczenia wygenerowanego linku wokół obrazu zamiast wypluwania linku?

Answer 1

Razor (Zobacz Engine):

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

ASPX (Zobacz Engine):

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

Oczywiście, jeśli można to zrobić więcej niż jeden raz, napisać pomocnika dla niego. I wypełnij pozostałe atrybuty img/a. Ale to powinno dać ci ogólny pomysł.

Answer 2

Spróbuj czegoś takiego:

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); 
} 

Hope this helps

Answer 3

Można utworzyć HtmlHelper, który może powrócić obraz z linkiem ... Jako parametry można przejść do HtmlHelper wartości, takich jak ścieżki obrazu oraz link aw HtmlHelper będziesz używać StringBuilder do formatu HTML tego połączonego obrazu prawidłowo ...

okrzyki

Answer 4

łatwiej ...

zmiany kodu przez:

<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

Pierwsza odpowiedź udzielona przez @Craig Stuntz jest absolutnie doskonała, ale moim problemem jest to, czy o co zrobisz, jeśli masz Ajax.ActionLink zamiast Html.ActionLink . Tutaj wyjaśnię proste rozwiązania dla obu metod. Można to zrobić jak poniżej na Html.ActonLink:

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

sama koncepcja może być stosowana dla Ajax.ActionLink

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

więc to będzie dla ciebie łatwe.

Edit:

actionlink Obraz z arkusza stylów lub nazwa klasy

z arkusza stylów

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

z klasą Nazwa

<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\" ... />")) 

Dalsze odniesienia dotyczące actionlink wokół wizyty Obrazek ActionLink around Image in Asp.net MVC

Answer 6

Można wykorzystać url.content:

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

ten powrót względna ścieżka