How to give images for the action link in asp.net mvc4

Question

I have got a task to give images for the action link

@Ajax.ActionLink("Delete", "Delete", "FiUser", new { id = item.UserID }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "DeletFiUserOnSucess", Confirm = "Do you want to delete this record?" })

the image is

<img src="../../Images/delete.png" alt="delete" />

How can I do this?

Answer 1

Inside the Actionlink,define a class MyCssClass

@Ajax.ActionLink("Delete", "Delete", "FiUser", new { id = item.UserID }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "DeletFiUserOnSucess", Confirm = "Do you want to delete this record?" }, new { @class = "MyCssClass" })

.MyCssClass
{
  background-image:url('../../Images/delete.png');
}

Answer 2

Another way it's to create a little Extension tu use any HTML code instead of the string "Delete" in your context :

public static MvcHtmlString HtmlActionLink(this AjaxHelper helper, string html, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes)
{
    var link = helper.ActionLink("[replace] ", actionName, controllerName, routeValues, ajaxOptions, htmlAttributes).ToHtmlString();
    return new MvcHtmlString(link.Replace("[replace]", html));
}

And you can use like that :

@Ajax.HtmlActionLink("<img src='delete.png' alt=''>", "Delete", "FiUser", new { id = item.UserID }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "DeletFiUserOnSucess", Confirm = "Do you want to delete this record?" }) 

Answer 3

Or use this extension and customize:

        /// <summary>
        /// Create an Ajax.ActionLink with an associated glyphicon
        /// </summary>
        /// <param name="ajaxHelper"></param>
        /// <param name="linkText"></param>
        /// <param name="actionName"></param>
        /// <param name="controllerName"></param>
        /// <param name="glyphicon"></param>
        /// <param name="ajaxOptions"></param>
        /// <param name="routeValues"></param>
        /// <param name="htmlAttributes"></param>
        /// <returns></returns>
        public static MvcHtmlString ImageActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, string glyphicon, AjaxOptions ajaxOptions, RouteValueDictionary routeValues = null, object htmlAttributes = null)
        {
            //Example of result:          
            //<a id="btnShow" href="/Customers/ShowArtworks?customerId=1" data-ajax-update="#pnlArtworks" data-ajax-success="jsSuccess"
            //data-ajax-mode="replace" data-ajax-method="POST" data-ajax-failure="jsFailure" data-ajax-confirm="confirm" data-ajax-complete="jsComplete"
            //data-ajax-begin="jsBegin" data-ajax="true">
            //  <i class="glyphicon glyphicon-pencil"></i>
            //  <span>Edit</span>
            //</a>

            var builderI = new TagBuilder("i");
            builderI.MergeAttribute("class", "glyphicon " + glyphicon);
            string iTag = builderI.ToString(TagRenderMode.Normal);

            string spanTag = "";
            if (!string.IsNullOrEmpty(linkText))
            {
                var builderSpan = new TagBuilder("span") { InnerHtml = " " + linkText };
                spanTag = builderSpan.ToString(TagRenderMode.Normal);
            }

            //Create the "a" tag that wraps
            var builderA = new TagBuilder("a");

            var requestContext = HttpContext.Current.Request.RequestContext;
            var uh = new UrlHelper(requestContext);

            builderA.MergeAttribute("href", uh.Action(actionName, controllerName, routeValues));

            builderA.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
            builderA.MergeAttributes((ajaxOptions).ToUnobtrusiveHtmlAttributes());

            builderA.InnerHtml = iTag + spanTag;

            return new MvcHtmlString(builderA.ToString(TagRenderMode.Normal));
        }