生成 HTML 表格 - 行控件答案

【问题标题】：Generating an HTML Table - Row Control生成 HTML 表格 - 行控件
【发布时间】：2013-02-03 13:51:03
【问题描述】：

我正在编写一个应用程序来生成目录的“图像摘要”。图像摘要是一个 HTML 文档，其中包含一个包含该目录图像的表格。我正在尝试使用 StreamWriter 创建 HTML 文档。我希望每行 (<tr>) 包含 6 张图片。我怎样才能做到这一点？我已经搜索过，找不到有用的东西。

【问题讨论】：

标签： c# html html-table

【解决方案1】：

我会使用ListView。这样的事情应该可以帮助您入门：

<asp:ListView runat="server" ID="ListView1" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table runat="server" id="table1" >
      <tr runat="server" id="itemPlaceholder" ></tr>
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr runat="server">
      <td runat="server">
        <asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("ImageUrl") %>' />
      </td>
    </tr>
  </ItemTemplate>
</asp:ListView>

这只会为每行数据创建一个带有单个 td 的 tr。您显然希望使用图像创建 6 个 td，而不仅仅是一个。

【讨论】：

【解决方案2】：

在我看来，最简单的方法是从Directory.GetFiles() 开始。这将返回文件路径的string[]。

从那里，您可以将该集合绑定到中继器。请参阅this question 的答案，了解每行显示 n 个元素的巧妙方法。该线程中还有一篇文章的链接，该链接显示了如何使用 ListView 进行操作。

【讨论】：

【解决方案3】：

凌乱的例子.. 但有效（我假设您没有像其他人假设的那样从 ASP.NET 执行此操作，因为您使用的是StreamWriter）：

static void renderHTML(string folder, string outputFile, int imagesPerRow, params string[] extensions) {
        string[] images = Directory.GetFiles(folder);

        using (var sw = new StreamWriter(File.OpenWrite(outputFile))) {
            sw.WriteLine("<!html><head><title>Example</title></head><body><table>");
            int counter = 0;
            sw.Write("<tr>");
            foreach (string image in images.Where(x => extensions.Any(y => x.Contains(y)))) {
                if (counter == imagesPerRow) {
                    sw.Write("</tr>");
                    sw.Write("<tr>");
                    counter = 0;
                }
                sw.Write("<td style=\"border: 1px solid;\">");
                sw.Write(string.Format("<img src=\"{0}\" />", image));
                sw.Write("</td>");

                counter++;
            }
            sw.Write("</tr></table></body></html>");
        }
    }

你可以这样称呼它：

renderHTML(@"C:\folder", @"C:\output.html", 6, new string[] { ".jpg", ".png", ".gif" });

【讨论】：