Razor et HTML Helpers

Question

J'essaie de porter l'ancienne aide HTML.Image, que je suis sûr que tout le monde a utilisé à un moment ou un autre, et j'ai des problèmes. Ce qui suit compile bien:

@Html.Image("my-id", "~/Content/my-img.png", "Alt Text") 

Mais lorsque je tente de l'utiliser dans une vue, il écrit simplement:

<img alt="Alt Text" id="my-id" src="/content/my-img.png" /> 

Et ne montre pas l'image. Quelqu'un peut-il aider?

Voici le code aide de HTML.Image que j'utilise:

public static class ImageHelper 
{ 
    public static string Image(this HtmlHelper helper, string id, string url, string alternateText) 
    { 
     return Image(helper, id, url, alternateText, null); 
    } 

    public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes) 
    { 
     // Instantiate a UrlHelper 
     var urlHelper = new UrlHelper(helper.ViewContext.RequestContext); 

     // Create tag builder 
     var builder = new TagBuilder("img"); 

     // Create valid id 
     builder.GenerateId(id); 

     // Add attributes 
     builder.MergeAttribute("src", urlHelper.Content(url)); 
     builder.MergeAttribute("alt", alternateText); 
     builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 

     // Render tag 
     var ret = new MvcHtmlString(builder.ToString(TagRenderMode.SelfClosing)); 
     return ret.ToHtmlString(); 
    } 

} 

Answer 1

Le moteur de vue Razor chaînes HTML échappement rendu automatiquement par @ -blocks.
Pour rendre le code HTML actuel, vous devez écrire une implémentation IHtmlString dans le bloc @.

Modifiez votre méthode pour renvoyer HtmlString au lieu de string.

Answer 2

Je voudrais essayer enroulant l'URL de l'image dans un appel à la méthode Content Url comme si

@Url.Content("~/Content/my-img.png") 

qui devrait convertir l'URL par rapport à absolu lorsque la page est envoyé au navigateur

Answer 3

public static HtmlString Image(this HtmlHelper helper, string id, string url, string alternateText) 
    { 
     return Image(helper, id, url, alternateText, null); 
    } 

    public static HtmlString Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes) 
    { 
     // Instantiate a UrlHelper 
     var urlHelper = new UrlHelper(helper.ViewContext.RequestContext); 

     // Create tag builder 
     var builder = new TagBuilder("img"); 

     // Create valid id 
     builder.GenerateId(id); 

     // Add attributes 
     builder.MergeAttribute("src", urlHelper.Content(url)); 
     builder.MergeAttribute("alt", alternateText); 
     builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 

     // Render tag 
     var ret = new MvcHtmlString(builder.ToString(TagRenderMode.SelfClosing)); 

     return ret; 
    } 

juste comme cela testé et fonctionne parfaitement. J'avais besoin de quelque chose comme ça pour concaténer le nom de l'image à partir du modèle.

et celui-ci fonctionne aussi.

<img src="@Url.Content("~/Content/Images/Flags/" + c.CountryCode + ".jpg") " alt=""/> 

Answer 4

J'ai eu le même problème et j'avais utilisé MvcHtmlString comme type de retour pour ces méthodes d'extension 2 et il fonctionne

public static class ImageHelper 
{ 
    public static MvcHtmlString Image(this HtmlHelper helper, string id, string url, string alternateText) 
    { 
     return Image(helper, id, url, alternateText, null); 
    } 

    public static MvcHtmlString Image(this HtmlHelper helper, string id, string url, string alternateText, 
           object htmlAttributes) 
    { 
     var builder = new TagBuilder("img"); 

     builder.GenerateId(id); 

     builder.MergeAttribute("alt", alternateText); 
     builder.MergeAttribute("src",url); 

     builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 

     return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing)); 
    } 
}