Làm thế nào để đặt phần tử span bên trong ActionLink MVC3?

Question

Làm cách nào để đặt phần tử span trong ActionLink NHƯNG KHÔNG VỚI URL.ACTION?

này:

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

       }) 
</span></li> 

tạo này:

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

---

Nhưng tôi cần cái gì khác. Làm thế nào tôi có thể tạo ra một tùy chỉnh phương pháp MVC3 ActionLink mà tạo ra sản lượng này:

<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

Làm thế nào để đưa phần tử span bên ActionLink NHƯNG KHÔNG VỚI URL.ACTION

câu trả lời đơn giản: bạn không thể. Phương thức ActionLink HTML mã hóa văn bản liên kết và bạn không thể làm gì nhiều (bạn có thể mở một vé tại Microsoft để cung cấp quá tải cho phép bạn thực hiện điều này trong ASP.NET MVC vNext).

Tại thời điểm này bạn có thể viết một helper tùy chỉnh html đó sẽ không mã hóa:

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

và sau đó:

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

Answer 2

Tôi biết điều này là cũ nhưng tôi sử dụng cách này nhanh chóng và bẩn để thêm các liên kết nút theo kiểu trong lưới của tôi. Bạn có thể thêm quá tải để bao gồm tên tuyến/etc. cũng. Hy vọng điều này sẽ giúp một ai đó.

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

Tôi đã sửa đổi Darins chỉ trả lời một chút để có thể chứa 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

Khó khăn để đạt được điều này bằng cách sử dụng JQuery?

Chúng tôi luôn có thể sử dụng JQuery và nối thêm <span></span> khi DOM được tải. Có thể không phải là giải pháp hoàn hảo nhưng đối với các nhà phát triển bằng cách sử dụng jquery và không muốn viết các lớp trợ giúp html như trên, trả lời điều này có thể là công việc xung quanh.

Answer 5

Tôi biết đây là một chủ đề cũ, nhưng bạn cũng có thể làm điều gì đó inline dọc theo dòng:

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

Its a hack tôi biết, nhưng bạn có thể dễ dàng viết một phần mở rộng dọc theo những dòng