Creare un Html.ActionLink attorno a un'immagine in ASP.NET MVC?

Question

Come posso fare qualcosa di simile a Html.ActionLink() eccetto posizionare il collegamento generato attorno ad un'immagine invece di sputare semplicemente il link?

Answer 1

Razor (Visualizza Motore):

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

ASPX (Visualizza Motore):

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

Ovviamente, se si esegue questa operazione più di una volta, scrivere un aiutante per esso. E riempi gli altri attributi di img/a. Ma questo dovrebbe darti un'idea generale.

Answer 2

provare qualcosa di simile:

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

Spero che questo aiuti

Answer 3

È possibile creare HtmlHelper che può restituire un'immagine con link ... Come parametri si passa a HtmlHelper valori come percorso di immagine e il link e in HtmlHelper si utilizzerà StringBuilder in formato HTML di quell'immagine collegato correttamente ...

applausi

Answer 4

più facile ...

modificare il codice da:

<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

La prima risposta data da @ Craig Stuntz è assolutamente perfetto, ma la mia preoccupazione è di circa se che cosa intende fare se avete Ajax.ActionLink invece di Html.ActionLink . Qui spiegherò le soluzioni facili per entrambi i metodi. Si può fare come segue per Html.ActonLink:

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

stesso concetto può essere applicato per Ajax.ActionLink

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

quindi questo sarà facile per voi.

Edit:

ActionLink Immagine con foglio di stile o nome Classe

con foglio di stile

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

With Class Nome

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

Per ulteriori riferimento per quanto riguarda ActionLink intorno visita Immagine ActionLink around Image in Asp.net MVC

Answer 6

È possibile utilizzare url.content:

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

questo ritorno percorso relativo