Attach Image to Actionlink in MVC 4

Attach image to ActionLink in MVC 4

This is from my application. Works ok:

.logo{
background:no-repeat url(/Content/photo/png/sprite.png) 0 0;
height:15px;
width:20px;
overflow:hidden;
float:left;
border:none;
display:inline;
}

<a href="@Url.Action("Action", "Controller")" class="logo"></a>

mvc4 actionlink image

Images are always relative to the location of the current CSS.

If you are using inline CSS you should use url helpers:

@Html.ActionLink(
    " ", 
    "Index", 
    "Home", 
    null , 
    new { 
        style = "background: url('" + Url.Content("~/images/login_sm.bmp") + "') no-repeat center right; display:block; height:84px; width:264px;" 
    }
)

or if you decide to define a CSS class:

@Html.ActionLink(
    " ", 
    "Index", 
    "Home",  
    null , 
    new { 
        @class = "mylink" 
    }
)

where you have defined the .mylink rule in ~/content/Site.css:

.mylink {
    background: url('../images/login_sm.bmp') no-repeat center right; 
    display: block; 
    height: 84px; 
    width: 264px;
}

Adding images within Html.ActionLink

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>

How to give images for the action link in asp.net mvc4

Inside the Actionlink,define a class MyCssClass

@Ajax.ActionLink("Delete", "Delete", "FiUser", new { id = item.UserID }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "DeletFiUserOnSucess", Confirm = "Do you want to delete this record?" }, new { @class = "MyCssClass" })

.MyCssClass
{
  background-image:url('../../Images/delete.png');
}

How do I add an image in @Html.ActionLink

Use @Url.Action instead:

<a href='@Url.Action("Index", "Home")'>
   <img src="IMAGE PATH HERE" />
</a>

How put a image inside an ActionLink

Do you want to use an ActionLink helper so that you do not have a hard coded path in your view (understandable).

How about this:

<a href="@Url.Action("Login", "Account")" id="loginLink" style="color:lightgreen">
    Login
    <img src="~/Content/Login-icon-door.png" />
</a>

How do I insert an image using HTML.ActionLink?

You are completely misusing the ActionLink helper. The helper actually produces the whole <a href=".." ></a> tag.

What you really want to use in this case (apart from your own written helper) is this:

<a href="<%= Url.Action("Search", new { searchText = "txtSearch" }) %>">
    <img alt="searchPage" style="vertical-align: middle;" height="17px"
        src="../../Stylesheets/search.PNG" title="search" />
</a>

MVC 4 ActionLink with alt text for background image

Try add title attribute for your link:

@Html.ActionLink(" ", null, null, new { @class = "Edit", title="Edit" })

Image equivalent of ActionLink in ASP.NET MVC

Url.Action() will get you the bare URL for most overloads of Html.ActionLink, but I think that the URL-from-lambda functionality is only available through Html.ActionLink so far. Hopefully they'll add a similar overload to Url.Action at some point.

Html.ActionLink as a button or an image, not a link

Late response but you could just keep it simple and apply a CSS class to the htmlAttributes object.

<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %>

and then create a class in your stylesheet

a.classname
{
    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
}

---

Related Topics