Hi guys, I want in MVC to render a text with an image as an ActionLink. For creating a simple anchor tag, we use Html.ActionLink() helper which generates anchor tag for us.
If you want to create something a bit more complicated, you must create you own component. For this reason, I created the following code. It allows you to create an anchor with an image and a text.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace PSC.MVC.Helpers { public static class CustomHtmlHelpers { ////// Enum ImageAndText /// public enum ImageAndText { ////// Image on the left, text on the right /// ImageOnTheLeft, ////// Text on the left, image on the right /// ImageOnTheRight } ////// Images the action link. /// /// The HTML helper. /// The link text. /// The action. /// The controller. /// The route values. /// The HTML attributes. /// The image source. /// The alternate text. /// The text style. /// The image style. /// The image position. ///IHtmlString. public static IHtmlString ImageActionLink( this HtmlHelper htmlHelper, string linkText, string action, string controller, object routeValues, object htmlAttributes, string imageSrc, string alternateText = "", string textStyle = "", string imageStyle = "", ImageAndText imagePosition = ImageAndText.ImageOnTheLeft) { var urlHelper = new UrlHelper( htmlHelper.ViewContext.RequestContext); // create the image var img = new TagBuilder("img"); img.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc)); if (!string.IsNullOrEmpty(alternateText)) img.Attributes.Add("alt", alternateText.Trim()); if (!string.IsNullOrEmpty(imageStyle)) img.Attributes.Add("style", imageStyle); // create a render for the image and the text string render = ""; if (imagePosition == ImageAndText.ImageOnTheLeft) render = img.ToString(TagRenderMode.SelfClosing) + linkText; else render = linkText + img.ToString(TagRenderMode.SelfClosing); // create the anchor with image and text var anchor = new TagBuilder("a") { InnerHtml = render }; if (!string.IsNullOrEmpty(textStyle)) anchor.AddCssClass(textStyle); // add reference to the anchor anchor.Attributes["href"] = urlHelper.Action(action, controller, routeValues); anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes)); return MvcHtmlString.Create(anchor.ToString()); } } }
In your MVC code you have to add:
@using PSC.MVC.Helpers;
and then you can call your component:
@Html.ImageActionLink("Your text", "Index", "Home", null, null, "~/Content/images/img.png", "Logo", "navbar-brand", "width: 40px;")