2010-09-08 26 views
6

cómo insertar una imagen en html.actionlink - asp.net mvc?¿Cómo inserto una imagen usando HTML.ActionLink?

lo hice, pero no funciona.

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

+1

Sugeriría mucho utilizar Url.Action() –

Respuesta

14

Se están haciendo mal uso por completo el ayudante ActionLink. El ayudante realmente produce la etiqueta completa <a href=".." ></a>.

Lo que realmente desea utilizar en este caso (aparte de su propio ayudante escrito) es la siguiente:

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

su solución no funciona en absoluto –

+0

+1 me ayudó también. Gracias :) –

1

TENGO crear un ayudante para esta solución. Entonces no puedes incluir image to actionLink. Pero con esta clase de ayuda, simplemente puede agregar ancla con imagen para ver.

usando Sistema; usando System.Text; usando System.Web.Mvc; usando System.Web.Mvc.Html; usando System.Web.Routing; usando System.Web; usando 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)); 
     } 

    } 
} 

buena suerte

12

@Trimack es 100% correcto w/MVC2. Si la gente está buscando la MVC3 equivalente, aquí está ...

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

Supongo que estás usando Razor como motor de visualización, ¿verdad? –

1

si desea mostrar múltiples imágenes se pueden utilizar Html.ActionLink propiedad en su View como se muestra a continuación. En esta muestra utilizo Detalle/Editar/Eliminar imágenes como un botón en la columna Acción.

Nota: Tipo Title, Controller y Action nombre en Html.ActionLink acuerdo a su proyecto. Si desea usar el título vacío simplemente escriba "" para ellos.

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

Por ejemplo completo, lo podría hacer en aquí: How to use WebGrid in a cshtml view?

Saludos.

0

En lugar de utilizar @ Html.ActionLink ("acción" "nombre-enlace", "controlador"), puede utilizar lo siguiente:

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

"imágenes" es mi carpeta para almacenar el imágenes. @Url.Content() es conocer la ruta. Puede pasar su acción y el controlador para esa acción al @Url.Action(). @Url.Action() funciona de manera similar al @Html.ActionLink(). Ahora su enlace será reemplazado por la imagen.

+0

Este es el código completo

Cuestiones relacionadas