Putting HTML inside Html ActionLink plus No Link Text

Question

I have two questions    I m wondering how I can display no link text when using Html ActionLink   in an MVC view  actually  this is Site Master      There is not an overloaded version that does not allow link text  and when I try passing in just a blank string  the compiler tells me it needs a non-empty string    How can I fix this    I need to put  lt span gt  tags within the anchor tag  but it s not working with Html ActionLink     I d like to see the following output   Span text   How can I put tags inside of the anchor tag in ASP NET MVC

User · Answer

I ended up with a custom extension method. Its worth noting, when trying to place HTML inside of an Anchor object, the link text can be either to the left, or to the right of the inner HTML. For this reason, I opted to provide parameters for left and right inner HTML - the link text is in the middle. Both left and right inner HTML are optional.

Extension Method ActionLinkInnerHtml:

    public static MvcHtmlString ActionLinkInnerHtml(this HtmlHelper helper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues = null, IDictionary<string, object> htmlAttributes = null, string leftInnerHtml = null, string rightInnerHtml = null)
    {
        // CONSTRUCT THE URL
        var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
        var url = urlHelper.Action(actionName: actionName, controllerName: controllerName, routeValues: routeValues);

        // CREATE AN ANCHOR TAG BUILDER
        var builder = new TagBuilder("a");
        builder.InnerHtml = string.Format("{0}{1}{2}", leftInnerHtml, linkText, rightInnerHtml);
        builder.MergeAttribute(key: "href", value: url);

        // ADD HTML ATTRIBUTES
        builder.MergeAttributes(htmlAttributes, replaceExisting: true);

        // BUILD THE STRING AND RETURN IT
        var mvcHtmlString = MvcHtmlString.Create(builder.ToString());
        return mvcHtmlString;
    }

Example of Usage:

Here is an example of usage. For this example I only wanted the inner html on the right side of the link text...

@Html.ActionLinkInnerHtml(
    linkText: "Hello World"
        , actionName: "SomethingOtherThanIndex"
        , controllerName: "SomethingOtherThanHome"
        , rightInnerHtml: "<span class=\"caret\" />"
        )

Results:

this results in the following HTML...

<a href="/SomethingOtherThanHome/SomethingOtherThanIndex">Hello World<span class="caret" /></a>

User · Answer

I thought this might be useful when using bootstrap and some glypicons    lt a class  btn btn-primary       href   lt    Url Action  Download File    Download        new   id   msg Id  distributorId   msg DistributorId      gt   gt      Download      lt span class  glyphicon glyphicon-paperclip  gt  lt  span gt   lt  a gt    This will show an A tag  with a link to a controller  with a nice paperclip icon on it to represent a download link  and the html output is kept clean

User · Answer

Just use Url Action instead of Html ActionLink    lt li id  home nav  gt  lt a href   lt    Url Action  ActionName     gt   gt  lt span gt Span text lt  span gt  lt  a gt  lt  li gt

User · Answer

A custom HtmlHelper extension is another option   Note  ParameterDictionary is my own type   You could substitute a RouteValueDictionary but you d have to construct it differently   public static string ActionLinkSpan  this HtmlHelper helper  string linkText  string actionName  string controllerName  object htmlAttributes         TagBuilder spanBuilder   new TagBuilder   span         spanBuilder InnerHtml   linkText       return BuildNestedAnchor  spanBuilder ToString    string Format     0   1    controllerName  actionName    htmlAttributes       private static string BuildNestedAnchor  string innerHtml  string url  object htmlAttributes         TagBuilder anchorBuilder   new TagBuilder   a         anchorBuilder Attributes Add   href   url        anchorBuilder MergeAttributes  new ParameterDictionary  htmlAttributes          anchorBuilder InnerHtml   innerHtml       return anchorBuilder ToString

User · Answer

Here is an uber expansion of  tvanfosson s answer   I was inspired by it and decide to make it more generic       public static MvcHtmlString NestedActionLink this HtmlHelper htmlHelper  string linkText  string actionName          string controllerName  object routeValues   null  object htmlAttributes   null          RouteValueDictionary childElements   null                var htmlAttributesDictionary   HtmlHelper AnonymousObjectToHtmlAttributes htmlAttributes            if  childElements    null                        var urlHelper   new UrlHelper htmlHelper ViewContext RequestContext                var anchorTag   new TagBuilder  a                anchorTag MergeAttribute  href                   routeValues    null                       urlHelper Action actionName  controllerName                        urlHelper Action actionName  controllerName  routeValues                anchorTag MergeAttributes htmlAttributesDictionary               TagBuilder childTag   null               if  childElements    null                                foreach  var childElement in childElements                                        childTag   new TagBuilder childElement Key Split      0                        object elementAttributes                      childElements TryGetValue childElement Key  out elementAttributes                        var attributes   HtmlHelper AnonymousObjectToHtmlAttributes elementAttributes                        foreach  var attribute in attributes                                                switch  attribute Key                                                        case   class                                   childTag AddCssClass attribute Value ToString                                     break                              case  InnerText                                   childTag SetInnerText attribute Value ToString                                     break                              default                                  childTag MergeAttribute attribute Key  attribute Value ToString                                     break                                                                      childTag ToString TagRenderMode SelfClosing                       if  childTag    null  anchorTag InnerHtml    childTag ToString                                                                    return MvcHtmlString Create anchorTag ToString TagRenderMode Normal                      else                       return htmlHelper ActionLink linkText  actionName  controllerName  routeValues  htmlAttributesDictionary

User · Answer

This has always worked well for me  It s not messy and very clean    lt a href   Url Action  Index    Home    gt  lt span gt Text lt  span gt  lt  a gt

User · Answer

Instead of using Html ActionLink you can render a url via Url Action   lt a href   lt    Url Action  Index    Home     gt   gt  lt span gt Text lt  span gt  lt  a gt   lt a href   Url Action  Index    Home    gt  lt span gt Text lt  span gt  lt  a gt    And to do a blank url you could have   lt a href   lt    Url Action  Index    Home     gt   gt  lt  a gt   lt a href   Url Action  Index    Home    gt  lt  a gt

User · Answer

Please try below Code that may help you     Html ActionLink   SignIn    Login    Account   routeValues  null  htmlAttributes  new    id    loginLink      class  glyphicon glyphicon-log-in

User · Answer

It s very simple   If you want to have something like a glyphicon icon and then  Wish List     lt span class  glyphicon-heart  gt  lt  span gt   Html ActionLink  Wish List  0     Index    Home

User · Answer

Here is  low and dirty  workaround in case you need to use ajax or some feature which you cannot use when making link manually  using  tag     lt    Html ActionLink  LinkTextToken    ActionName    ControllerName   ToHtmlString   Replace  LinkTextToken    Refresh  lt span class  large sprite refresh  gt  lt  span gt     gt    You can use any text instead of  LinkTextToken   it is there only to be replaced  it is only important that it does not occur anywhere else inside actionlink

User · Answer

My solution using bootstrap components    lt a class  btn btn-primary  href   Url Action  resetpassword    Account    gt       lt span class  glyphicon glyphicon-user  gt  lt  span gt  Reset Password  lt  a gt

[c#] Putting HTML inside Html.ActionLink(), plus No Link Text?

Examples related to c#

Examples related to .net

Examples related to asp.net-mvc

Examples related to actionlink