CODEWITHSUNDEEP
htmlasp.net-mvcrazorhtml.actionlink
user3913686
user3913686

Reputation:

Adding images within Html.ActionLink

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?

Upvotes: 22

Views: 78323

Answers (4)

darkwood
darkwood

Reputation: 65

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

Upvotes: 1

Win
Win

Reputation: 62301

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>

Upvotes: 47

Romias
Romias

Reputation: 14133

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.

Upvotes: 7

tarun713
tarun713

Reputation: 2187

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?

Upvotes: 2

Related Questions