Quelle méthode trouvez-vous plus lisible pour produire du HTML dynamique?

Question

J'imagine que cela va descendre à vos préférences personnelles, mais dans quel sens iriez-vous?

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

Ou devrais-je pas faire du tout et en utilisant la classe HtmlTextWriter à la place?

EDIT: Quelques très bonnes suggestions ici. Nous sommes sur le cadre 2.0 donc LINQ n'est pas disponible

Answer 1

Un autre vote pour "AppendFormat". En outre, pour le bien du code du serveur que je pourrais mettre en place avec des guillemets simples ici pour éviter la nécessité d'échapper à quoi que ce soit:

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

Enfin, vous pouvez aussi vouloir un contrôle supplémentaire là-bas quelque part pour éviter l'injection html/XSS .

Une autre option consiste à encapsuler votre image dans une classe:

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

Ceci a l'avantage de le rendre facile de réutiliser et ajouter des fonctionnalités au concept au fil du temps. Pour avoir une réelle envie, vous pouvez transformer cette classe en un contrôle utilisateur.

Answer 2

Moi personnellement j'opterais pour la première option. Juste pour signaler également, un conseil d'économie de code rapide ici. vous pouvez utiliser AppendFormat pour StringBuilder.

EDIT: L'approche HtmlTextWriter vous donnerait un résultat beaucoup plus structuré, et si la quantité de HTML à générer augmentait, ce serait un choix évident. OU l'utilisation d'un fichier HTML et l'utiliser comme un modèle et peut-être des remplacements de chaînes

Le contrôle utilisateur ASP.NET est un autre bon choix pour la modélisation.

Answer 3

Je préfère:

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

Comme mentionné dans une autre réponse, en utilisant AppendFormat().

Jetez un oeil à SharpTemplate pour le formatage html, il est beaucoup plus facile à lire, même pour de petites quantités de HTML.

Answer 4

Je préférerais faire ceci dans aspx en utilisant le contrôle ListView qui est fait exactement à cet effet. Votre code restera donc lisible et séparé (pas de code HTML dans le code C#). Avec votre approche, vous ne recevrez pas d'avertissements de validation XHTML.

Answer 5

J'ai fait quelques classes d'aide pour créer des contrôles html, donc mon code ressemblerait à ceci:

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

Au début, il peut ne pas sembler plus simple, mais il est facile de travailler avec, crée des contrôles qui ne bonne codage html des valeurs, et il n'y a pas de problèmes d'échappement de chaîne.