asp.net-mvcimageactionlink

Image button in ActionLink MVC


How to put image instead text in ActionLink button:

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

So how to change text "Edit-link" to image?

Thanks for any idea.


Solution

  • do like this:

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

    or pass both action and controller name by using other override:

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

    UPDATE:

    You can also create a custom Html Helper, and can reuse it in any View in application:

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

    and use it in View:

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

    Output HTML:

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