在ASP.NET MVC中围绕图像创建一个Html.ActionLink?

Kin*_*tor 65 asp.net-mvc

我怎么能做类似于Html.ActionLink()的事情,除了将生成的链接放在Image周围而不是只是吐出链接?

Cra*_*ntz 135

剃刀(查看引擎):

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

ASPX(查看引擎):

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

显然,如果您多次执行此操作,请为其编写帮助程序.并填写img/a的其他属性.但这应该给你一般的想法.


eu-*_*-ne 22

尝试这样的事情:

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);
}
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助

  • 我建议将`TagRenderMode.Normal`改为`TagRenderMode.SelfClosing`作为img; 否则它呈现为`<img rel="nofollow noreferrer" ...> </ img>`而不是`<img rel="nofollow noreferrer" ... />` (6认同)

Dil*_*165 6

@Craig Stuntz给出的第一个答案绝对是完美的,但我关心的是,如果你有Ajax.ActionLink而不是,你会做什么Html.ActionLink.在这里,我将解释两种方法的简单解决方案.您可以执行以下操作Html.ActonLink:

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

可以应用相同的概念 Ajax.ActionLink

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

所以这对你来说很容易.

编辑:

带样式表或类名的ActionLink图像

随着样式表

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

使用班级名称

<style>
.imgClass {
 width:20%
}
Run Code Online (Sandbox Code Playgroud)

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

有关ActionLink around Image的更多参考,请访问Asp.net MVC中 Image的ActionLink