Rectangle 27 306

Late response but you could just keep it simple and apply a CSS class to the htmlAttributes object.

<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %>

and then create a class in your stylesheet

a.classname
{
    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
}

This works perfectly for me, though you may need to replace null with a routeValues object depending on where you are linking to.

How do you handle the Button name string you assign in the action link parameter then. This did not work for me.

that is bad in all sorts of ways, it dose not work in all browsers, and you are using a side effect as functionality. witch makes it a very bad practice don't use it. Just because it works it does not make it a good solution.

@Mark - jslatts solution is the correct one and no it wont work in IE11 and just because it work's in the current browsers it is a very bad practice as you are using a side effect as functionality and if the implementation changes the side effect WILL stop working.

asp.net mvc - Html.ActionLink as a button or an image, not a link - St...

asp.net-mvc actionlink
Rectangle 27 12

A late answer but this is how I make my ActionLink into a button. We're using Bootstrap in our project as it makes it convenient. Never mind the @T since its only an translator we're using.

@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink");

The above gives a link like this and it looks as the picture below:

localhost:XXXXX/Firms/AddAffiliation/F0500
@using (Html.BeginForm())
{
<div class="section-header">
    <div class="title">
        @T("Admin.Users.Users")
    </div>
    <div class="addAffiliation">
        <p />
        @Html.ActionLink("" + @T("Admin.Users.AddAffiliation"), "AddAffiliation", "Firms", new { id = (string)@WorkContext.CurrentFirm.ExternalId }, new { @class="btn btn-primary" })
    </div>
</div>

}
new { @class="btn btn-primary" })

asp.net mvc - Html.ActionLink as a button or an image, not a link - St...

asp.net-mvc actionlink
Rectangle 27 3

Using bootstrap this is the shortest and cleanest approach to create a link to a controller action that appears as a dynamic button:

<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>
@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })

asp.net mvc - Html.ActionLink as a button or an image, not a link - St...

asp.net-mvc actionlink
Rectangle 27 2

A simple way to do make your Html.ActionLink into a button (as long as you have BootStrap plugged in - which you probably have) is like this:

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })

asp.net mvc - Html.ActionLink as a button or an image, not a link - St...

asp.net-mvc actionlink
Rectangle 27 0

The way I have done it is to have the actionLink and the image seperately. Set the actionlink image as hidden and then added a jQuery trigger call. This is more of a workaround.

'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />
$("#yourImage").click(function () {
  $('.yourclassname').trigger('click');
});

asp.net mvc - Html.ActionLink as a button or an image, not a link - St...

asp.net-mvc actionlink