CODEWITHSUNDEEP
c#asp.netasp.net-mvc
Darama
Darama

Reputation: 3370

How to add icon in link ASP.NET?

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?

Upvotes: 0

Views: 144

Answers (1)

Shyju
Shyju

Reputation: 218812

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.

Upvotes: 1

Related Questions