How do I make a custom ActionLink?

Question

I need to include an image within the <a> tag of an ActionLink. What is the best way to do this?

The final rendered link should look like this,

<a href="/Home/Test"><img src="test.jpg" />Test</a>

Answer 1

I'm assuming this is ASP.Net MVC?

You could create an Html helper method that constructs the anchor...

public static class HtmlHelperExtensions
  {
      /// <summary>
      /// Generates an actionLink in the form of an image
      /// </summary>
      /// <param name="htmlHelper">The HTML helper.</param>
      /// <param name="imageUrl">The image URL.</param>
      /// <param name="actionName">Name of the action.</param>
      /// <param name="controllerName">Name of the controller.</param>
      /// <param name="values">The values.</param>
      /// <returns></returns>
      public static string ActionImage(this HtmlHelper htmlHelper, string imageUrl, string actionName, string controllerName, object values)
      {
          string link = SystemWebMVCUtils.GenerateUrl(htmlHelper, actionName, controllerName, values);
          link = string.Format("<a href=\"{0}\"><img src=\"{1}\"/></a>", link, htmlHelper.ResolveUrl(imageUrl));
          return link;
      }
}

Then you could call this method in your views:

<%=Html.ActionImage("~/Content/images/someimage.png","Index","SomeController") %>

Code Reference

Answer 2

Like this:

<a href="<%= Url.Action("...")"><img src="test.jpg" alt="test" />Test</a>