How to insert an image in ActionLink (View model)

Question

I want to display an image for each bike, but these codes didn't work:

<ul>
@foreach (var bike in Model.Bikes)
 {
     <li>@Html.ActionLink(bike.Name, "Categories", new { id = bike.Id, name = bike.Name, @class = "image"}, null)</li> 
 } 
</ul>

Anybody can help me with this, thanks a lot!

I just updated my CSS file:

a.image {
    background: url('~/Store Project(new)/Store Project/AdventureCycle/Content/Images/') no-repeat center right; 
    display: block; 
    height: 84px; 
    width: 264px;
}

See [this link](http://stackoverflow.com/questions/596444/html-actionlink-as-a-button-or-an-image-not-a-link) and [this link](http://stackoverflow.com/questions/19245343/attach-image-to-actionlink-in-mvc-4). Please learn to use the "search tool". — Andrei V, Feb 17 '14 at 08:24

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

There is no inbuilt html helpers for Image Hyperlinks.we have to create custom html helper inorder to get this requirement.So refer the below links you will get an idea.

Action Image MVC3 Razor

Based upon your comment.i give the solution like this:

@if (Convert.ToString( bike.Name) == null || Convert.ToString(bike.Name) == "")
            {
                bike.Name = "Empty";
            }
            @Html.ActionLink(Convert.ToString(bike.Name), "Categories", new { @id =bike.Id, @name = bike.Name },new{ @class = "image" })

Here i gave "Empty" if bike.Name is Null or Empty.

edited May 23 '17 at 10:25

Community

1
1

answered Feb 17 '14 at 08:28

Ajay

2,022
19
33

@foreach (var bike in Model.Bikes) {
<%=Html.Action(bike.Name, "Categories", new {id = bike.Id, name = bike.Name,null ,@()class="image"}) %>

Trung Pham

Feb 17 '14 at 09:06

r u using razor view engine or aspx view engine.For Razor:use this.@Html.ActionLinkFor (bike.Name, "Categories", new {@id = bike.Id, @name = bike.Name,@class="image"}) – Ajay Feb 17 '14 at 09:18

**Html.ActionLinkFor**... didn't appear in razor view – Trung Pham Feb 17 '14 at 09:31

I'm waiting for your answer. :) – Trung Pham Feb 17 '14 at 10:02

do you get solution? – Ajay Feb 17 '14 at 10:14

if you fullfill with the answer.Accept the answer.It will help to others – Ajay Feb 17 '14 at 14:01

Hi Ajay! I just updated my CSS above. And I fixed exactly the solution you recommended, but it still not work. – Trung Pham Feb 18 '14 at 01:48

run the application in chrome and press f12.if you see any error?in the panel(F12) – Ajay Feb 18 '14 at 02:14

I ran it and it comes the error like this **Resource interpreted as Image but transferred with MIME type text/plain** . – Trung Pham Feb 18 '14 at 03:49

hai dude you mention location not image i.e;"~/Store Project(new)/Store Project/AdventureCycle/Content/Images/" Make it into "~/Store Project(new)/Store Project/AdventureCycle/Content/Images/yourimage.jpg" – Ajay Feb 18 '14 at 04:05

How to insert an image in ActionLink (View model)

1 Answers1