Css Image For Html.ActionLink

Question

 Html.ActionLink("", "ActionResult", new { CustomerId= DataBinder.Eval(c.DataItem, "CustomerId") }, new { target = "_blank", @style = "background-image:url(/Image/edit.png); width:50px; height:30px;" }));

Hi,

I try to set image for actionlink however it is always empty.

How can i set image to html.actionlink ?

I want actionlink to appear like image(image button)

Note : Please do not offer me a href etc.

Any help will be greatly appreciated.

Thanks.

Answer 1

As mentioned in comments, your image doesn't display when you aren't providing any text as your element is set to display as inline. With no text, your element has no size, regardless of any width or height properties that are specified in the element's style. To fix this, set the element to display as inline-block:

(Html.ActionLink(
    "",
    "ActionResult",
    new {
        CustomerId= DataBinder.Eval(c.DataItem, "CustomerId")
    },
    new {
        target = "_blank",
        @style = "
            background-image:url(/Image/edit.png);
            display:inline-block;
            width:50px;
            height:30px;
        "
    })
);

Answer 2

I am using a hand made Html Helper I found on the net, here it is:

/// <summary>
/// Html helper that displays an image.
/// </summary>
/// <param name="_helper"></param>
/// <param name="_url"></param>
/// <param name="_altText"></param>
/// <param name="_clickMethod"></param>
/// <param name="_htmlAttributes"></param>
/// <returns></returns>
public static MvcHtmlString ImageClick(this HtmlHelper _helper, string _id, string _url, string _altText, string _clickMethod, object _htmlAttributes)
{
    TagBuilder builder = new TagBuilder("image");

    var path = _url.Split('?');

    string pathExtra = "";

    if (path.Length > 1)
    {
        pathExtra += "?" + path[1];
    }

    builder.Attributes.Add("src", VirtualPathUtility.ToAbsolute(path[0]) + pathExtra);
    builder.Attributes.Add("alt", _altText);
    if (!String.IsNullOrEmpty(_clickMethod))
    {
        builder.Attributes.Add("onclick", _clickMethod + "()");
    }

    builder.GenerateId(_id);

    builder.MergeAttributes(new RouteValueDictionary(_htmlAttributes));
    return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
}

Hope that will help!