1

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.

1
  • Change the method to public static MvcHtmlString HaidarImage(..) and add return MvcHtmlString.Create(inst.ToString());
    – user3559349
    Apr 15, 2015 at 10:24

3 Answers 3

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.

1
  • 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, 2015 at 10:38
2

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.