Adding images within Html.ActionLink

Question

I was trying to create an option to switch between a list view and widget view in ASP.net MVC (with razor view engine).

However, I am having some trouble trying to both

Answer 1

Try this:

Html.ActionLink(" ", "Edit", new {id = c.ID}, new { @style = "background:url('../../Images/Menu/edit.png') no-repeat center right; display:block; height: 30px; width: 50px" }

Answer 2

The reason this code did not work:

@Html.ActionLink("List View", "listView", new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)

was because the 3rd parameter of @Html.ActionLink is to add additional route values. If you want to add more HTML attributes, you need to use:

@Html.ActionLink("List View", "listView", null, new { @style = "background-image:url('~/Content/Images/listIcon.png')" })

Additionally, like others have said, you can't use the ~.

Note that inline styles are generally frowned upon, as the best practice would be to create a CSS class that contains your background-image and add the class as the HTML attribute instead, but @style would functionally work here as well. More info on why inline styles are bad can be found here: What's so bad about in-line CSS?

Answer 3

You need to create the anchor by hand, and insted of using the @Html.ActinLink helper... you can use the @Url.Action helper

<a href="@Url.Action("YourAction", "YourController", null)">
     <img src="yourImageSource"  style="vertical-align: middle; width: 30px;"> List View
<a/> |
<a href="@Url.Action("YourAction", "YourController", null)">
     <img src="yourImageSource" style="vertical-align: middle; width: 30px;"> Grid View
<a/>

The size of the image can be modified via CSS.

The Url.Action gives you the "link to your action". The ActionLink, creates an anchor with the link to the action.

Answer 4

You can use Url.Action for hyperlink and Url.Content for image source.

Then you can style the appearance with CSS.

<ul class="links">
    <li>
       <a href="@Url.Action("ListView", "Home")" title="List View" class="links">
            <img alt="List View" src="@Url.Content("~/Images/ListView.png")"> 
            List View
       </a>
    </li>
    <li>
       <a href="@Url.Action("WidgetView", "Home")" title="Widget View" class="links">
            <img alt="Widget View" src="@Url.Content("~/Images/WidgetView.png")"> 
            Widget View
       </a>
    </li>
</ul>
<style type="text/css">
    ul.links {
        list-style-type: none;
    }    
        ul.links li {
            display: inline-block;
            border-left: 1px solid black;
            padding-left: 10px;
            margin-left: 10px;
        }    
            ul.links li:first-child {
                border-left: 0;
                padding-left: 0;
                margin-left: 0;
            }
</style>