MVC Html Helper not rendering image within a link

Question

I'm creating a custom helper to create image links as follows:

    public static MvcHtmlString ImageLink(this HtmlHelper helper, string imageUrl, string imageAlt, string linkUrl, string linkTitle, string linkTarget)
{
    //create the image object
    var img = new TagBuilder("img");

    //add its attributes
    img.MergeAttribute("src", imageUrl);
    img.MergeAttribute("alt", imageAlt);

    //create the link
    var link = new TagBuilder("a");

    //add its attributes
    link.MergeAttribute("href", linkUrl);
    link.MergeAttribute("title", linkTitle);
    link.MergeAttribute("target", linkTarget);

    //set the inner html of the link to that of the img
    link.InnerHtml = img.ToString();

    //finally return the link tag
    return MvcHtmlString.Create(link.ToString(TagRenderMode.EndTag));
}

But, when I use it, it doesn't render anything at all. When I change the last line to:

return MvcHtmlString.Create(link.ToString(TagRenderMode.SelfClosing));

It only renders the a tag and encapsulates the text just beyond the statement for example:

Hello @Html.ImageLink("...params") world

The result here is that the 'world' text is wrapped in the anchor, but there's no image. I didn't even realise it could do this, since the word 'world' is not part of the helper statement.

I finally changed the final statement to:

return MvcHtmlString.Create(link.ToString(TagRenderMode.Normal));

this worked, but my questions is why? I thought EndTag made more sense especially when looking at the description given by the Intellisense for that option.

mnsr · Accepted Answer · 2012-07-13 05:07:52Z

3

Last 2 lines of your code should be:

        link.InnerHtml = img.ToString(TagRenderMode.SelfClosing);

        return MvcHtmlString.Create(link.ToString());

You don't need TagRenderMode.Normal as it's the default mode. To use it in your View, you'd do this:

@Html.ImageLink("/images/test.jpg", "testalt", "http://testlink", "linktitle", "linktarget")

I thought EndTag made more sense

You may think so, but TagRenderMode.EndTag only renders the closing tag. TagRenderMode.Normal is what you're after as it creates a normal HTML tag and allows InnerHtml.

edited Jul 13, 2012 at 5:07

answered Jul 13, 2012 at 5:02

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacques Over a year ago

One question. Wouldn't it make sense that when you render the link tag that you should use TagRenderMode.EndTag since you want the link to have an explicit </a> ending?

mnsr Over a year ago

I can see what you mean, but the default behaviour of tagbuilder is to create a html tag with an open and end tag. Explicitly seeing the mode to endtag will force it to only create the end tag. It can be useful for when you want to create a big lump of html in your code then specify a closing tag at the end. Hope that makes sense

Collectives™ on Stack Overflow

MVC Html Helper not rendering image within a link

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related