Welche Methode finden Sie besser lesbar, um dynamisches HTML auszugeben?

Question

Ich stelle mir vor, dass dies auf persönliche Vorlieben zurückzuführen ist, aber welchen Weg würden Sie gehen?

StringBuilder markup = new StringBuilder(); 

foreach (SearchResult image in Search.GetImages(componentId)) 
{ 
    markup.Append(String.Format("<div class=\"captionedImage\"><img src=\"{0}\" width=\"150\" alt=\"{1}\"/><p>{1}</p></div>", image.Resolutions[0].Uri, image.Caption)); 
} 

LiteralMarkup.Text = markup.ToString(); 

Vs.

StringBuilder markup = new StringBuilder(); 

foreach (SearchResult image in Search.GetImages(componentId)) 
{ 
    markup.Append(String.Format(@"<div class=""captionedImage""><img src=""{0}"" width=""150"" alt=""{1}""/><p>{1}</p></div>", image.Resolutions[0].Uri, image.Caption)); 
} 

LiteralMarkup.Text = markup.ToString(); 

Oder soll ich nicht zu tun dies und die Htmltextwriter Klasse statt mit?

EDIT: Einige wirklich gute Vorschläge hier. Wir sind auf 2.0 Rahmen so LINQ ist nicht verfügbar

Answer 1

Noch eine Abstimmung für "AppendFormat". Auch im Interesse des Server-Code könnte ich mit einfachen Anführungszeichen hier untergebracht, um die Notwendigkeit zu vermeiden zu entkommen alles:

StringBuilder markup = new StringBuilder(); 

foreach (SearchResult image in Search.GetImages(componentId)) 
{ 
    markup.AppendFormat(
     "<div class='captionedImage'><img src='{0}' width='150' alt='{1}'/><p>{1}</p></div>", 
     image.Resolutions[0].Uri, image.Caption 
    ); 
} 

LiteralMarkup.Text = markup.ToString(); 

Schließlich können Sie auch eine zusätzliche Überprüfung wollen dort irgendwo html/xss Injektion zu verhindern .

Eine weitere Option ist das Bild in einer Klasse zu kapseln:

public class CaptionedHtmlImage 
{ 
    public Uri src {get; set;}; 
    public string Caption {get; set;} 

    CaptionedHtmlImage(Uri src, string Caption) 
    { 
     this.src = src; 
     this.Caption = Caption; 
    } 

    public override string ToString() 
    { 
     return String.Format(
      "<div class='captionedImage'><img src='{0}' width='150' alt='{1}'/><p>{1}</p></div>" 
      src.ToString(), Caption 
     ); 
    } 
} 

Dies hat den Vorteil, dass es leicht zu dem Konzept im Laufe der Zeit Funktionen wiederverwenden und hinzuzufügen. Um wirklich schick zu werden, können Sie diese Klasse in eine Benutzersteuerung umwandeln.

Answer 2

Ich persönlich würde ich für die erste Option entscheiden. Um nur darauf hinzuweisen, hier ein schneller Code-Tipp. Sie können AppendFormat für den StringBuilder verwenden.

BEARBEITEN: Der HtmlTextWriter-Ansatz würde Ihnen ein viel strukturierteres Ergebnis liefern, und wenn die Menge an zu generierendem HTML wächst, dann wäre dies eine naheliegende Wahl. ODER die Verwendung einer HTML-Datei und die Verwendung als Vorlage und möglicherweise Zeichenfolge ersetzt

ASP.NET User Control sind eine weitere gute Wahl für Templating.

Answer 3

Ich würde es vorziehen:

StringBuilder markup = new StringBuilder(); 
string template = "<div class=\"captionedImage\"><img src=\"{0}\" width=\"150\" alt=\"{1}\"/><p>{1}</p></div>"; 

foreach (SearchResult image in Search.GetImages(componentId)) 
{ 
    markup.AppendFormat(template,image.Resolutions[0].Uri, image.Caption); 
} 

LiteralMarkup.Text = markup.ToString(); 

Wie in einer anderen Antwort erwähnt, mit AppendFormat().

Werfen Sie einen Blick auf SharpTemplate für HTML-Templating, es macht es viel einfacher zu lesen, auch für kleine Mengen von HTML.

Answer 4

Ich würde dies in aspx mit dem ListView Control, die genau für diesen Zweck gemacht wird, vorziehen. Ihr Code bleibt also lesbar und getrennt (kein HTML im C# -Code). Mit Ihrem Ansatz erhalten Sie keine kompilierten XHTML-Validierungswarnungen.

Answer 5

Ich habe einige Hilfsklassen gemacht HTML-Steuerelemente zu erstellen, so meinen Code würde wie folgt aussehen:

foreach (SearchResult image in Search.GetImages(componentId)) { 
    ContainerMarkup.Controls.Add(
    Tag.Div.CssClass("captionedImage") 
    .AddChild(Tag.Image(image.Resolutions[0].Uri).Width(150).Alt(Image.Caption)) 
    .AddChild(Tag.Paragraph.Text(Image.Caption))); 
} 

es aussehen könnte nicht einfacher Zuerst, aber es ist leicht zu verarbeiten, schafft Steuerelemente, die richtige tut HTML-Codierung der Werte, und es gibt keine String-Escaping-Probleme.