How do I insert an image using HTML.ActionLink?

Question

how to insert image in html.actionlink - asp.net mvc?

i did it so, but it doesnt works.

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

Silent

I'd highly suggest using Url.Action() – Melicent

Answer 1

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>

Popover

Answer 2

@Trimack is 100% correct w/ MVC2. If people are searching for the MVC3 equivalent, here it is...

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

Tatary

Answer 3

i have create a helper for this solution. So u can't include image to actionLink. But with this helper class u can simply add anchor with image to view.

using System; using System.Text; using System.Web.Mvc; using System.Web.Mvc.Html; using System.Web.Routing; using System.Web; using System.Security.Policy;

namespace Helpers
{
    public static class ActionWithImageHelper
    {
        public static string AnchorIm(this HtmlHelper helper)
        {

            var builder = new TagBuilder("img");
            var link = helper.ActionLink("[replaceInnerHTML]", "replaceAction").ToHtmlString();


                builder.MergeAttribute("src", "<imagePath>");
                builder.MergeAttribute("alt", "<altText>");

                var renderedLink = link.Replace("replaceAction", "<>");
                link = renderedLink;


            return link.Replace("[replaceInnerHTML]",builder.ToString(TagRenderMode.SelfClosing));
        }

    }
}

good luck

Underclay

Answer 4

If you want to display multi images you can use Html.ActionLink property in your View as shown below. In this sample I use Detail/Edit/Delete images as a button under Action column.

Note: Type Title, Controller and Action name in Html.ActionLink according to your project. If you want to use empty title simply type " " for them.

....
//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Action", format: (item) =>
 new HtmlString(
       Html.ActionLink("Show Details", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,               
           title = "Detail",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/detail.png')"
       }, null).ToString() +
       Html.ActionLink("Edit Record", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID, 
           title = "Edit",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/edit.png')"
       }, null).ToString() +
       Html.ActionLink("Delete Record", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,
           title = "Delete",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/delete.png')"
       }, null).ToString()
 )
)
....


<style type="text/css">
    a.icon-link {
        background-color: transparent; 
        background-repeat: no-repeat; 
        background-position: 0px 0px;
        border: none;
        cursor: pointer; 
        width: 16px;
        height: 16px;
        margin-right: 8px; 
        vertical-align: middle;
    }
</style>

For full example, you might look at here: How to use WebGrid in a cshtml view?

Regards.

Ingrate

Answer 5

Instead of using @Html.ActionLink("linkname","action","controller") you can use following:

<a href='@Url.Action("action", "controller")'>

"images" is my folder for storing the images. @Url.Content() is to know the path. You can pass your action and the controller for that action to @Url.Action(). @Url.Action() works similar to the @Html.ActionLink(). Now your link will get replaced by the image.

Octosyllable

This is the complete code <a href='@Url.Action("action", "controller")'> <img src='@Url.Content("~/images/imageName.png")' /></a> – Octosyllable