How to insert an image using HTML.ActionLink?

Question

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

I did it like this, but it does not work.

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

Answer 1

You are abusing the ActionLink Assistant ActionLink . The helper actually produces the entire <a href=".." ></a> tag.

What you really want to use in this case (besides your own assistant) is the following:

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

Answer 2

@Trimack is 100% correct w / MVC2. If people are looking for the equivalent of MVC3, 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> 

Answer 3

I am creating an assistant for this solution. Therefore, you cannot include an image in actionLink. But with this helper class u, you can simply add an anchor with an image for viewing.

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)); } } } 

luck

Answer 4

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

Note. Enter the Title , Controller and Action name in the Html.ActionLink according to your project. If you want to use an empty title, just enter "" 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> 

As a complete example, you can look here: How to use WebGrid in cshtml view?

Sincerely.

Answer 5

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

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

"images" is my folder for storing images. @Url.Content() must know the path. You can pass your action and controller for this action to @Url.Action() . @Url.Action() works similarly to @Html.ActionLink() . Your link will now be replaced by an image.