Extending HtmlHelper class asp.net mvc4

Question

I have a problem with extending the HtmlHelper class to render an image tag

I just wrote this code

namespace Mace_CrmSystem
{
    public static class ExtendedHelper
    {
        public static TagBuilder HaidarImage(this HtmlHelper instance, string src) {
            TagBuilder inst = new TagBuilder("img");
            inst.MergeAttribute("src", src);
            return inst;     
        }
    }
}

and in the index view I wrote this code

@Html.HaidarImage("http://haidar.ws/wp-content/uploads/2014/07/ipaduse.jpg");

but the problem is that when the view render the tag , it does not render it as an Hrml tag, rather it renders it as a normal text so the result be like this

 <img src="http://haidar.ws/wp-content/uploads/2014/07/ipaduse.jpg"></img>;

another problem is that I tried to add the namespace inside the web.config page to be available over all the page but the intellisense does not show the extended method until I explicitly declare it at the view page itself.

so please could anyone help me to solve my problem.

Change the method to `public static MvcHtmlString HaidarImage(..)` and add `return MvcHtmlString.Create(inst.ToString());` — , Apr 15 '15 at 10:24

Ehsan Sajjad · Answer 1 · 2015-04-15T10:30:53.107

2

You have to return IHtmlString like this so that it is rendred as Html :

 public static IHtmlString HaidarImage(this HtmlHelper instance, string src) 
 {

    TagBuilder inst = new TagBuilder("img");
    inst.MergeAttribute("src", src);
    return MvcHtmlString.Create(inst.ToString(TagRenderMode.SelfClosing));   
  }

edited Apr 15 '15 at 10:30

answered Apr 15 '15 at 10:24

Ehsan Sajjad

61,834
16
105
160

Russ Cam · Accepted Answer · 2015-04-15T10:31:07.453

2

You should return an IHtmlString from your HtmlHelper extension method so that the output is not HTML encoded, as it is HTML markup that should not be encoded again. For example

public static IHtmlString HaidarImage(this HtmlHelper instance, string src) 
{
    TagBuilder inst = new TagBuilder("img");
    inst.MergeAttribute("src", src);
    return new HtmlString(inst.ToString(TagRenderMode.SelfClosing));   
}

To fix the method being available in all views, you need to add the namespace of the class to the web.config inside of the Views folder.

edited Apr 15 '15 at 10:31

answered Apr 15 '15 at 10:24

Russ Cam

124,184
33
204
266

Great answer, thanks a lot, that fixed my problem, but I found a lesson in pluralSight which describes the extending using the TagBuilder class and exactly the same as I wrote my code, so I do not know if that had been working in the previous version of the mvc before they released the new version of mvc . – Mo Haidar Apr 15 '15 at 10:38

score 2 · Answer 3 · edited May 23 '17 at 10:24

I am not sure why you are returning TagBuilder from your method, you should be returning MvcHtmlString instead, try this:-

public static MvcHtmlString HaidarImage(this HtmlHelper helper, string src)
{
    TagBuilder tag = new TagBuilder("img");
    tag.Attributes.Add("src", src);
    return new MvcHtmlString(tag.ToString(TagRenderMode.SelfClosing));
}

Why do we need MvcHtmlString, you can read it here.

Extending HtmlHelper class asp.net mvc4

3 Answers3