如何在链接ASP.NET中添加图标？

Question

I have the following code:

 @Ajax.ActionLink("Settings", "SettingsPopup", "Settings",
                new { area = "Customer" },
                new AjaxOptions()
                {
                    HttpMethod = "Get",
                    UpdateTargetId = "settings-content",
                    InsertionMode = InsertionMode.Replace,
                    OnSuccess = "settingsPopupLoaded",
                    AllowCache = true
                },
                new { @class = "profile-right__a icon-help" })

I need to add <i class="sub"></i> element inside this liks as:

<a href=""><i class="sub"></i></a>

How to do this?

Answer 1

When you want to have customized markup but still want the ajaxy behavior. You can simply use jQuery to wire up that (That is what the ajax helpers also does)

<a class="ajaxy" targetid="settings-content"
   href="@Url.Action("settingsPopup","Settings",new { area="Customer"})">
                <span class="glyphicon glyphicon-user text-@userLevel"></span>
</a>

The javascript will be quite simply, simply look for the elements with the css class "ajaxy", make an ajax call using jQuery $.get method and update the DOM element with the result coming back.

function settingsPopupLoaded(e) {
    console.log('settingsPopupLoaded', e);
}
$(function () {

    $(".ajaxy").click(function (e) {
        e.preventDefault();
        var _this = $(this);
        $.get(_this.attr("href"), function (res) {
            var tId = _this.attr("targetid");
            $("#" + tId).html(res);
            settingsPopupLoaded(res);    
        });
    });
});

You can also use $.load method if it is simply updating the DOM element with the response from the ajax call.