Image button link options in ASP.Net MVC3

There are several ways to skin this cat, but below are a couple options for using an image, in lieu of text, as a link to content. There are other overloads for the Url.Action and the Html.ActionLink, but in this example I was linking to a different controller passing in the integer id of the item to display a list of child records. The "STEPS” image is displayed if the parent record has child records.

Url.Action method

<a href='@Url.Action("ActionName", "ControllerName", new {Id = item.ID}) '><img src='@Url.Content("~/Content/Images/buttonimage.gif") ' alt="View Detail" border="0"  /></a> 

Html.ActionLink method

@Html.ActionLink(" ", "ActionName", "ControllerName", new { Id = item.ID }, new { @class = "steps-button", alt = "View Detail", title = "View Detail" })

Note that the first parameter in the action link is a space (because I didn’t want any text to show over the button background image) and the first argument cannot be null or empty.

In the site CSS layout I added the following steps-button class that adds the image to the link as a background image.

a.steps-button      

{

    background: url(../Content/Images/buttonimage.gif) no-repeat top left; 

    width: 14px;

    height: 44px; 

    display: block;

}