Razor und HTML-Helfer

Question

Ich versuche, den alten HTML.Image-Helfer zu portieren, von dem ich sicher bin, dass jeder ihn irgendwann benutzt hat, und ich habe Probleme. Die folgende kompiliert fein:

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

Aber wenn ich versuche, es in einer Ansicht zu verwenden, um es einfach schreibt:

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

Und das Bild nicht angezeigt wird. Kann jemand helfen?

Hier ist der HTML.Image Helfer-Code, ich verwende:

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

Die Razor-Ansicht-Engine wird automatisch HTML-Escape-Strings von @ -Blöcke gemacht.
Um den tatsächlichen HTML-Code darzustellen, müssen Sie eine IHtmlString Implementierung in den @-Block schreiben.

ändern Methode HtmlString statt string zurückzukehren.

Answer 2

ich versuchen würde, die Bild-URL in einem Aufruf URL Content Methode Einwickeln als so

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

, die die relative URL absolute umwandeln soll, wenn die Seite an den Browser gespült wird

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

genau so getestet und funktioniert perfekt. Ich brauchte so etwas, um den Bildnamen aus dem Modell zu verketten.

und das funktioniert auch.

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

Answer 4

hatte ich das gleiche Problem, und ich MvcHtmlString als Rückgabetyp für diese 2-Extension-Methode benutzt hatte und es funktioniert

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