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 add an image, as well as scale it to the 'correct height' (the same height as the next next to it).

I was looking to create something like:

Desired Result:

---------------------------------------------------------------------------------

[≡­] List View | [+] Widget View

---------------------------------------------------------------------------------

where the [≡] and [+] were actually small icon images.

Attempts so far include:

The action link was something like:

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

which only displayed the text.

I also tried creating the actionlink like:

<img src="~/Content/Images/listIcon.png" />@Html.ActionLink("List View", "Index")

but this resolved in

a) the image wasn't part of the link; and

b) the image was almost twice the size of the text (similar to diagram below)

 _    _               _    _
|      |             |      |
| icon |             | icon |
|_    _| List View | |_    _| Widget View

I wouldn't even mind trying to create it like:

Alternative:

---------------------------------------------------------------------------------

 _    _               _    _
|      |             |      |
| icon | List View | | icon | Widget View
|_    _|             |_    _| 

if I had to.

Would anyone know/advise how to solve/create this?

Sunroom

First remove the ~ in background-image:url and you should at least see your icon. You will need some other css to move the icon to the right position you want. – Corelative

the tilde allows you not to have to write the full file path, does it not? – Sunroom

The tilde only works on certain field that razor view engine can identify as link. In your case @style = is just considered as plain string and razor view engine won't do any conversion for it. You have to pass in a path that browser can directly understand instead. – Corelative

Answer 1

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>

Shuttering

that looks like exactly what I need! Cheers. never been much good with css, so this helped a lot! :) – Sunroom

What are the parameters that go in the Url.Action? – Bromley

@Bromley I'm not quite understanding your question. Could you please create a new question? – Shuttering

sorry.. I mean where it says @Url.Action("ListView", "home"). What are these two values? I.e What is the list view and home? What are these values? – Bromley

"ListView" is the action or method you are calling and "home" is the name of the controller – Oyer

Answer 2

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.

Gameness

I think this is also a great explanation, although I think SO should possibly allow multiple 'Accepts' in this sort of situation. thanks! – Sunroom

Fun fact: If you misread this and use @Html.Action, things break. Hooray for infinite loops! – Inandin

Answer 3

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?

Litterbug

Answer 4

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" }

Vedi