21

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?

  • 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. – tweray Oct 06 '14 at 12:19
  • the tilde allows you not to have to write the full file path, does it not? –  Oct 06 '14 at 13:08
  • 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. – tweray Oct 06 '14 at 13:17

4 Answers4

46

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

Then you can style the appearance with CSS.

enter image description here

<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>
Win
  • 61,100
  • 13
  • 102
  • 181
  • that looks like exactly what I need! Cheers. never been much good with css, so this helped a lot! :) –  Oct 07 '14 at 08:09
  • What are the parameters that go in the Url.Action? – user2903379 Sep 16 '16 at 09:48
  • @user2903379 I'm not quite understanding your question. Could you please create a new question? – Win Sep 16 '16 at 13:08
  • 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? – user2903379 Sep 23 '16 at 11:50
  • "ListView" is the action or method you are calling and "home" is the name of the controller – BrianLegg Nov 08 '17 at 18:26
6

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.

Romias
  • 13,783
  • 7
  • 56
  • 85
  • I think this is also a great explanation, although I think SO should possibly allow multiple 'Accepts' in this sort of situation. thanks! –  Oct 07 '14 at 08:10
  • 2
    Fun fact: If you misread this and use @Html.Action, things break. Hooray for infinite loops! – Brian P Nov 18 '15 at 04:00
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?

Community
  • 1
  • 1
tarun713
  • 2,177
  • 3
  • 17
  • 31
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" }
darkwood
  • 55
  • 8