¿Cómo poner el elemento span dentro de ActionLink MVC3?

Question

¿Cómo puedo poner un elemento span dentro de ActionLink PERO NO CON URL.ACTION?

Este:

<li><span> 
    @Ajax.ActionLink("LinkText", "ControllerName", new AjaxOptions 
       { 
        UpdateTargetId = "div", 
        InsertionMode = InsertionMode.Replace, 
        HttpMethod = "GET", 
        LoadingElementId = "progress" 

       }) 
</span></li> 

genera esto:

<li> 
<span> 
<a href="/Home/ControllerName" data-ajax-update="#scroll" 
data-ajax-mode="replace" data-ajax-method="GET" 
data-ajax-loading="#progress" data-ajax="true">LinkText</a> 
</span> 
</li> 

---

pero necesito algo más. ¿Cómo puedo crear un método personalizado MVC3 ActionLink que genera esta salida:

<li> 
    <a href="/Home/ControllerName" data-ajax-update="#scroll" 
    data-ajax-mode="replace" data-ajax-method="GET" 
    data-ajax-loading="#progress" data-ajax="true"> 

    <span>LinkText</span> // this span generated inside <a> 

    </a> 
</li> 

Answer 1

cómo poner elemento span dentro ActionLink pero no con URL.ACTION

Respuesta simple: no se puede. El método HTML de ActionLink codifica el texto del enlace y no hay mucho que pueda hacer al respecto (puede abrir un ticket en Microsoft para que proporcione una sobrecarga que le permita hacer esto en ASP.NET MVC vNext).

Por el momento se podría escribir un ayudante HTML personalizada que no va a codificar:

public static class AjaxExtensions 
{ 
    public static IHtmlString MyActionLink(
     this AjaxHelper ajaxHelper, 
     string linkText, 
     string actionName, 
     AjaxOptions ajaxOptions 
    ) 
    { 
     var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, null, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true); 
     return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkText, targetUrl, ajaxOptions ?? new AjaxOptions(), null)); 
    } 

    private static string GenerateLink(
     this AjaxHelper ajaxHelper, 
     string linkText, 
     string targetUrl, 
     AjaxOptions ajaxOptions, 
     IDictionary<string, object> htmlAttributes 
    ) 
    { 
     var a = new TagBuilder("a") 
     { 
      InnerHtml = linkText 
     }; 
     a.MergeAttributes<string, object>(htmlAttributes); 
     a.MergeAttribute("href", targetUrl); 
     a.MergeAttributes<string, object>(ajaxOptions.ToUnobtrusiveHtmlAttributes()); 
     return a.ToString(TagRenderMode.Normal); 
    } 
} 

y luego:

@Ajax.MyActionLink(
    "<span>LinkText</span>", 
    "ActionName", 
    new AjaxOptions { 
     UpdateTargetId = "div", 
     InsertionMode = InsertionMode.Replace, 
     HttpMethod = "GET", 
     LoadingElementId = "progress" 
    } 
) 

Answer 2

Sé que esto es viejo, pero yo uso esta manera rápida y sucia para agregar enlaces de botones con estilo en mis cuadrículas. Puede agregar sobrecargas para incluir nombres de ruta/etc. también. Espero que esto ayude a alguien.

public static MvcHtmlString GridAnchor(this HtmlHelper html, string linkText, string actionName, string controllerName, 
      object routeValues, object htmlAttributes) 
     { 
      var result = new TagBuilder("a"); 
      var url = UrlHelper.GenerateUrl(null, actionName, controllerName, new RouteValueDictionary(routeValues), html.RouteCollection, 
              html.ViewContext.RequestContext, true); 
      result.Attributes.Add("href", url); 
      result.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 
      result.InnerHtml = "<span>" + linkText + "</span>"; 

      return MvcHtmlString.Create(result.ToString()); 
     } 

Answer 3

Modificado Darins responder un poco para poder acomodar RouteValues.

 

    public static class AjaxExtensions 
    { 
     public static IHtmlString MyActionLink(
      this AjaxHelper ajaxHelper, 
      string linkText, 
      string actionName, 
      AjaxOptions ajaxOptions 
     ) 
     { 
      var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, null, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true); 
      return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkText, targetUrl, ajaxOptions ?? new AjaxOptions(), null)); 
     } 

     public static IHtmlString MyActionLink(
      this AjaxHelper ajaxHelper, 
      string linkText, 
      string actionName, 
      object routeValues, 
      AjaxOptions ajaxOptions 
     ) 
     { 
      System.Web.Routing.RouteValueDictionary routeVals = new System.Web.Routing.RouteValueDictionary(routeValues); 

      var targetUrl = UrlHelper.GenerateUrl(null, actionName, null, routeVals, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true); 
      return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkText, targetUrl, ajaxOptions ?? new AjaxOptions(), null)); 
     } 


     private static string GenerateLink(
      this AjaxHelper ajaxHelper, 
      string linkText, 
      string targetUrl, 
      AjaxOptions ajaxOptions, 
      IDictionary htmlAttributes 
     ) 
     { 
      var a = new TagBuilder("a") 
      { 
       InnerHtml = linkText 
      }; 
      a.MergeAttributes(htmlAttributes); 
      a.MergeAttribute("href", targetUrl); 
      a.MergeAttributes(ajaxOptions.ToUnobtrusiveHtmlAttributes()); 
      return a.ToString(TagRenderMode.Normal); 
     } 

    } 
 

Answer 4

¿Qué tan difícil es lograr esto usando JQuery?

Siempre podemos usar JQuery y anexar el <span></span> una vez que se carga el DOM.

Puede que no sea la solución perfecta, pero para los desarrolladores que usan jquery y no quieren escribir clases de ayudantes html como la respuesta anterior, esta podría ser la solución.

Answer 5

Sé que esto es un viejo hilo, pero también se puede hacer algo en línea a lo largo de las líneas de:

<li><span> 
@{ 
    var lnk = Ajax.ActionLink("LinkText", "ControllerName", new AjaxOptions { 
       UpdateTargetId = "div", 
       InsertionMode = InsertionMode.Replace, 
       HttpMethod = "GET", 
       LoadingElementId = "progress" 
      }); 
@Html.Raw(lnk.ToString().Replace(">LinkText<", "><span>LinkText</span><")); 
// Remember to include the open and closing >< ! 
} 
</span></li> 

Es un hackeo lo sé, pero aquí se puede escribir una extensión a lo largo de estas líneas