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

时间:2009-06-12 20:57:00

标签: asp.net-mvc

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

6 个答案:

答案 0 :(得分:135)

Razor(查看引擎):

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

ASPX(View Engine):

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

显然,如果你不止一次这样做,请为它写一个帮手。并填写img / a的其他属性。但这应该给你一般的想法。

答案 1 :(得分: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);
}

希望这有帮助

答案 2 :(得分: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\" ... />"))

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

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

所以这对你来说很容易。

编辑:

带样式表或类名的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\"  ... />"))

有关ImageLink周围的ActionLink的更多参考,请访问ActionLink around Image in Asp.net MVC

答案 3 :(得分:2)

更容易......

通过以下方式更改您的代码:

<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>

答案 4 :(得分:1)

您可以使用url.content:

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

此返回相对路径

答案 5 :(得分:0)

您可以创建htmlhelper,它可以返回带链接的图像... 作为参数,您将传递给htmlhelper值,如图像路径和链接,在htmlhelper中,您将使用StringBuilder正确格式化该链接图像的html ...

欢呼声