Adding images within Html.ActionLink - html

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?

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>

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.

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?

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