您认为哪种方法输出动态 HTML 更具可读性？

Question

我想这将取决于个人喜好，但你会走哪条路呢？

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

对比。

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

或者我根本不应该这样做并使用 HtmlTextWriter 类来代替？

编辑：这里有一些非常好的建议。 我们使用 2.0 框架，因此 LINQ 不可用

Answer 1

另一次投票给“AppendFormat”。 另外，为了服务器代码的缘故，我可能会在此处使用单引号，以避免需要转义任何内容：

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

最后，您可能还需要在某处进行额外的检查以防止 html/xss 注入。

另一种选择是将图像封装在一个类中：

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

这样做的优点是可以轻松地重复使用并随着时间的推移向概念添加功能。 为了获得真正的奇特效果，您可以将该类转换为用户控件。

Answer 2

我个人会选择第一个选项。 还想指出的是，这里有一个快速代码保存技巧。 您可以将 AppendFormat 用于 StringBuilder。

编辑：HtmlTextWriter 方法将为您提供更加结构化的结果，如果要生成的 HTML 数量增加，那么这将是一个明显的选择。 或者使用 HTML 文件并将其用作模板，也许还有字符串替换

ASP.NET 用户控件是模板化的另一个不错的选择。

Answer 3

我更喜欢：

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

正如另一个答案中提到的，使用 AppendFormat()。

看看 SharpTemplate 的 html 模板，它使得即使是少量的内容也更容易阅读HTML 的。

Answer 4

我更喜欢在 aspx 中使用 ListView 控件来执行此操作，该控件正是为此目的而制作的。 因此，您的代码将保持可读性并且是独立的（C# 代码中没有 HTML）。 使用您的方法，您将不会收到编译时 XHTML 验证警告。

Answer 5

我创建了一些帮助程序类来创建 html 控件，因此我的代码如下所示：

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

起初它可能看起来并不简单，但它很容易使用，创建对值进行正确 html 编码的控件，并且没有字符串逃避问题。