ActionLink MVC中的图像按钮

时间:2014-05-08 07:44:07

标签: asp.net-mvc image actionlink

如何在ActionLink按钮中放置图像而不是文本:

@Html.ActionLink("Edit-link", "Edit", new { id=use.userID })

那么如何更改文字"编辑链接"想象?

感谢您的任何想法。

3 个答案:

答案 0 :(得分:12)

这样做:

<a href="@Url.Action("Edit")" id="@use.userID">
<img src="@Url.Content("~/images/someimage.png")" />
</a>

或使用其他覆盖传递操作控制器名称:

<a href="@Url.Action("Edit","Controller")" id="@use.userID">
    <img src="@Url.Content("~/images/someimage.png")" />
    </a>

UPDATE:

您还可以创建custom Html Helper,并可以在应用程序的任何视图中重复使用它:

namespace MyApplication.Helpers
{
  public static class CustomHtmlHelepers
  {
    public static IHtmlString ImageActionLink(this HtmlHelper htmlHelper, string linkText, string action, string controller, object routeValues, object htmlAttributes,string imageSrc)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var img = new TagBuilder("img");
        img.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc));
        var anchor = new TagBuilder("a") { InnerHtml = img.ToString(TagRenderMode.SelfClosing) };
        anchor.Attributes["href"] = urlHelper.Action(action, controller, routeValues);
        anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        return MvcHtmlString.Create(anchor.ToString());

    }
  }
}

并在View中使用它:

@using MyApplication.Helpers;

@Html.ImageActionLink("LinkText","ActionName","ControllerName",null,null,"~/images/untitled.png")

输出HTML:

<a href="/ControllerName/ActionName">
  <img src="/images/untitled.png">
</a>

答案 1 :(得分:2)

试试这段代码:

@Html.Raw(@Html.ActionLink("Edit-link","Edit", new { id=use.userID }).ToHtmlString().Replace("Edit-link", "<img src=\"/Contents/img/logo.png\" ... />"))

enter image description here

答案 2 :(得分:0)

 <a href="@Url.Action("Edit Link","Edit",new {id = item.EId })">
    <img src="@Url.Content("~/img/iconfinder_new-24_103173.png")" style="height:20px;width:20px;color:blue" title="Edit" />
 </a>

尝试此代码。它将添加设置为Edit()的链接到id操作的图像。