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;")