create ajax actionlink with html elements in the link text

Question

I would like to convert a link to an ajax action link. I can't figure out how to display html elements within the link text?

Here is the original link:

<a href="#onpageanchor" id="myId" class="myClass" title="My Title."><i class="icon"></i>Click Me</a>

Here is the ajax actionlink:

@Ajax.ActionLink("<i class='icon'></i>Click Me", "MyActionMethod", new { id = "testId" },
                        new AjaxOptions
                        {
                            UpdateTargetId = "mytargetid"
                        }, new
                        {
                            id = "myId",
                            @class = "myClass",
                            title="My Title."
                        })

the link text rendered is the actual string: "<i class='icon'></i>Click Me</a>"

http://stackoverflow.com/questions/9194876/asp-net-mvc-ajax-actionlink-with-a-htmlstring — Forte L., Aug 17 '12 at 15:47
Have you thought about just using jQuery to send the request? — Paul, Aug 17 '12 at 16:09
Please, see my answer to this in http://stackoverflow.com/questions/341649/asp-net-mvc-ajax-actionlink-with-image/17151675#17151675 — JotaBe, Jun 17 '13 at 17:19
@FiveTools any chance you could mark my answer as correct if it did indeed help you out? — Dan, Mar 07 '14 at 13:37

score 33 · Accepted Answer · answered Jun 07 '13 at 11:56

over a year late and everything but this is what I use. Hope it helps someone else.

@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" })

Then the helper...

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

Exactly what I am looking for; fantastic! – pookie Jul 25 '16 at 17:10 — pookie, Jul 25 '16 at 17:10

score 0 · Answer 2 · answered Jul 15 '14 at 11:05

I have created Ajax.ActionLink to display image instead of link text

    @Ajax.ActionLink(".", "Delete_Share_Permission", "Share", new { delwhich = "one", delid = @UserSharingDetails.PK_User_Sharing_Id }, new AjaxOptions { UpdateTargetId = "sharelist", InsertionMode = InsertionMode.Replace, OnBegin = "return confirmdeleteone();" }, new { @class = "deleteButton", @id = "fna" })

Applying class

 .deleteButton {        
    background-image: url("/images/DeleteData.png");
    position: absolute;
    right: 6px;
    background-repeat: no-repeat;
    border: none;
    background-position: 50% 50%;
    margin-left: 10px;
    background-color: transparent;
    width: 13px;
    color: #ffffff !important;
    display: block;
    top: 5px;
}

I hope this code is useful to you.

Thank you.

score 0 · Answer 3 · answered Sep 06 '16 at 17:29

@Ajax.ActionLink(" Name", "AjaxGetAllUsers", "Admin", new { sortBy = ViewBag.SortByName, search = Request.QueryString["search"] }, new AjaxOptions() { UpdateTargetId = "userlist", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "fa fa-sort" })

create ajax actionlink with html elements in the link text

3 Answers3

Linked