How to use Bootstrap Glyphicons with @Ajax.ActionLink() Method?

Question

In the following code I would like to include a Bootstrap glyphicons after the "Animal Name".

@Ajax.ActionLink("Animal Name", "_Index", new { sortOrder = ViewBag.NameSortParam, searchString = Request["searchString"] }, new AjaxOptions
           {
               HttpMethod = "GET",
               UpdateTargetId = "PartialTable",
               InsertionMode = InsertionMode.Replace
           })

Is it possible?? If not possible, is there any other alternative solution like:

<a href="@Url.Action("Index", "Animal", new {sortOrder = ViewBag.NameSortParam, searchString = Request["searchString"] })">
             <span style="font-size:18px">Animal Name</span>
            <i class="glyphicon glyphicon-triangle-bottom"></i>
 </a>

Which is used as an alternative method to use Bootstrap Glyphicons with @Html.ActionLink() Method!

No, its not possible using `ActionLink()`. An alternative is towrite you own extension method — , Sep 21 '16 at 04:07
No. You need to write your own `HtmlHelper` extension method to generate the html you want — , Sep 21 '16 at 04:22

score 1 · Answer 1 · answered Jul 23 '20 at 15:49

As two years later, none of the answer are correct, let me share mine.

@Ajax.ActionLink(" ", "Action", new { id = 1 }, new AjaxOptions
{   
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "div"
},
new 
{ 
    @class = "glyphicon glyphicon-search"
});

score 0 · Answer 2 · edited May 23 '17 at 12:24

   @Ajax.RawActionLink(string.Format("<i class='icon'></i>Click Me"), "ActionResultName", null, new { item.Variable}, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "taget-div", LoadingElementId = "target-div" }, new { @class = "class" })

Helper Method

   public static MvcHtmlString RawActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes)
    {
        var repID = Guid.NewGuid().ToString();
        var lnk = ajaxHelper.ActionLink(repID, actionName, controllerName, routeValues, ajaxOptions, htmlAttributes);
        return MvcHtmlString.Create(lnk.ToString().Replace(repID, linkText));
    }

Source : https://stackoverflow.com/a/16983575/5326667

score 0 · Answer 3 · answered Aug 22 '17 at 14:21

Here's what I came up with:

In your Ajax.ActionLink add htmlAttributes attribute with a class value and use javascript/jquery to change the value.

html attribute example:

new { @class = "expand" }

Script:

<script>
    $(document).ready
    (
        function()
        {
            $('.expand').html("<span class='glyphicon glyphicon-chevron-right'></span>")
        }
    )
</script>

How to use Bootstrap Glyphicons with @Ajax.ActionLink() Method?

3 Answers3