Change a text link to a picture link ASP.NET MVC

Question

I am creating a ToDo list using ASP.NET MVC.

Every record has Action links as Edit, Details and Delete.
I would like to change these links to .PNG pictures. How exactly should it be done?

I have tried the following code, but got no luck on it.

<td>
     @Html.ActionLink("Edit", "Edit", new { id=item.ToDoID}) |
     @Html.ActionLink("Details", "Details", new { id=item.ToDoID })
     <img src="@Url.Content("~/images/details.png")" height="15" width="15" /> |
     @Html.ActionLink("Delete", "Delete", new { id=item.ToDoID })
     <img src="@Url.Content("~/images/delete.png")" height="15" width="15" /> 
</td>

There is a similar question in this post: – Miyuru Ratnayake Oct 04 '15 at 19:22 — Miyuru Ratnayake, Oct 04 '15 at 19:22

score 0 · Answer 1 · answered Oct 04 '15 at 19:23

You can't do this with Html.ActionLink. one way to achive that is to use CSS . something like this:

@Html.ActionLink(
    "Edit", 
    "Home", 
    null , 
    new { 
        style = "background: url('" + Url.Content("~/images/login_sm.bmp") + "') no-repeat center right; display:block; height:84px; width:264px;" 
    }
)

score 0 · Answer 2 · answered Oct 04 '15 at 21:06

Just create a CSS class and add it in the htmlAttributes object.

@Html.ActionLink("Link Name", "Home", null, new { @class="imgLink" })

and then create a class in your css file

a.imgLink
{
     background: url(../images/details.png) no-repeat top left;
     display: block;
     width: 15px;
     height: 15px;
     text-indent: -9999px; /* hides the link text */
}

Change a text link to a picture link ASP.NET MVC

2 Answers2