ASP.net 很好地呈现 HTML（美化）

Question

当我在 ASP.net 中生成我的控件时，它们会如下所示：

<div id="ctl00_mainContent_ApprovalSelectPanel" class="discussWrapper">

        <span class="cbox highlighted"><input id="ctl00_mainContent_ctl00" type="checkbox" name="ctl00$mainContent$ctl00" checked="checked" value="70" /><label for="ctl00_mainContent_ctl00">Buyer1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl01" type="checkbox" name="ctl00$mainContent$ctl01" value="75" /><label for="ctl00_mainContent_ctl01">Buyer2</label></span><span class="cbox"><input id="ctl00_mainContent_ctl02" type="checkbox" name="ctl00$mainContent$ctl02" value="280" /><label for="ctl00_mainContent_ctl02">Client3</label></span><span class="cbox"><input id="ctl00_mainContent_ctl03" type="checkbox" name="ctl00$mainContent$ctl03" value="281" /><label for="ctl00_mainContent_ctl03">Client4</label></span><span class="cbox"><input id="ctl00_mainContent_ctl04" type="checkbox" name="ctl00$mainContent$ctl04" value="283" /><label for="ctl00_mainContent_ctl04">Client2</label></span><span class="cbox"><input id="ctl00_mainContent_ctl05" type="checkbox" name="ctl00$mainContent$ctl05" value="289" /><label for="ctl00_mainContent_ctl05">Client1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl06" type="checkbox" name="ctl00$mainContent$ctl06" value="346" /><label for="ctl00_mainContent_ctl06">artworker1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl07" type="checkbox" name="ctl00$mainContent$ctl07" value="362" /><label for="ctl00_mainContent_ctl07">buyer3</label></span><span class="cbox"><input id="ctl00_mainContent_ctl08" type="checkbox" name="ctl00$mainContent$ctl08" value="367" /><label for="ctl00_mainContent_ctl08">meeeee</label></span><span class="cbox"><input id="ctl00_mainContent_ctl09" type="checkbox" name="ctl00$mainContent$ctl09" value="368" /><label for="ctl00_mainContent_ctl09">stake</label></span>

    </div>  

查看源代码时非常丑陋且难以理解。这通常不是问题，但我的网站为访问者提供资源和教程，查看源代码是体验的一部分。

有什么方法可以很好地呈现这些控件？缩进正确，更好的 id 和名称等？

Answer 1

在 .NET 4.0 中，您可以将 ClientIDMode 设置为 AutoID、Static、Predictable 和 Inherit 4 个选项之一。您可能正在寻找静态，因为这将确保您的控件使用您分配给它们的 ID 呈现到页面。

您可以通过添加以下内容在应用程序级别进行设置：

<pages clientIDMode="Static">

到你的 web.config

这里有关于这些变化的更多细节：http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx

Answer 2

ASP.NET WebForms HTML 渲染和控件标记在 .NET 4.0 中得到了改进，这将有助于 HTML 元素本身的控件 ID 和结构（如您的问题中的 Rob Stone's answer 所述）。但是，缩进和换行可能仍不能满足您的需求。

如果 HTML 源代码真正 是您应用程序用户体验的一部分，您可能考虑编写一个附加到 ReleaseRequestState 事件的 HttpModule。这种方法将解决 HTML 源代码的实际换行和缩进问题。对于avoid re-inventing the wheel，您可以使用.NET port of HTML Tidy 或.NET Wrapper for HTML Tidy 作为响应的自定义过滤器的一部分。

在this blog 的 HttpModule 中有一个很好的示例，说明了如何在 HttpModule 中编写自定义过滤器。我发现最有用的代码部分如下（略有编辑，但您可以从博客本身获得完整的理解）：

public class CustomModule : IHttpModule
{
  public void Init(HttpApplication context)
  {
    context.ReleaseRequestState += new EventHandler(context_ReleaseRequestState);
  }

  private void context_ReleaseRequestState(object sender, EventArgs e)
  {
    HttpResponse response = HttpContext.Current.Response;
    if (string.Compare(response.ContentType,"text/html",true) == 0)
    {
      response.Filter = new CustomFilter(response.Filter,response.ContentEncoding);
    }
  }
}

在您的 CustomFilter 类中...

public override void Write(byte[] buffer, int offset, int count)
{
  sb = new StringBuilder(count + 1024);
  sb.Append(enc.GetString(buffer,offset,count));

  // <---- Run the sb content through HTML Tidy here ---->

  byte[] buff = enc.GetBytes(sb.ToString());
  s.Write(buff,0,buff.Length);
  }
}

Answer 3

获得漂亮的输出 几乎是不可能的，因为解析器在渲染控件时没有任何上下文概念。许多控件呈现多个 HTML 元素，并且他们需要知道它们的上下文才能做到这一点......以及能够知道需要哪种格式（例如，对于列表控件，何时开始新行，何时开始再次缩进）。

此外，并非标记中的所有元素都实际呈现，并且标记的布局并不总是与输出的布局直接相关。例如：

<asp:PlaceHolder runat="server" />
    <asp:Panel runat="server" />
        <asp:DropDownList runat="server" />
    </asp:Panel />
</asp:PlaceHolder />

Placeholder 未呈现，那么这会导致输出缩进吗？ DropDownList 呈现多个 HTML 控件，它无法确定所需的呈现方式：它是否应该缩进到与第一个控件相同的级别？它应该在没有元素间间距的情况下呈现吗？从实际的角度来看，完全没有间距的渲染（这是大多数控件所做的）会更有效，以最大限度地减少需要发送到客户端的数据量。

最后，即使在简单的情况下，当您从浏览器“查看源代码”时的实际表示可能会因浏览器而异。他们都可以选择以他们选择的任何方式处理间距、换行符、缩进，因为元素间的间距不会以任何方式影响渲染。

如果您在您的网站上显示“之前/之后”示例，您实际上没有太多选择，除了手动格式化输出以进行演示，如果这是您想要的。如果人们也想查看源代码，那很好，但要使源代码始终与您的标记一样好，这将是非常具有挑战性的。

如果这对您来说真的很重要，您可以在发送到客户端之前截取输出流并重新格式化它，但这不会直接从 asp.net 的渲染引擎发生。有关如何执行此操作的示例，请在谷歌“asp.net 响应过滤器”-here's one. 中找到可以应用于此概念的格式化 HTML 的代码。

Answer 4

在这里聚会迟到了，但我遇到了类似的问题。我们正在生成一些高度复杂的 javascript，这些 javascript 变得过于复杂而无法合理调试，所有这些都与标记的其余部分混为一谈。所以我想出了这门课。

public class HtmlPrettyControl : HtmlGenericControl
{
    public bool Indent { get; set; }

    public HtmlPrettyControl(string tag) : this(tag, true) { }

    public HtmlPrettyControl(string tag, bool indent) : base(tag)
    {
        Indent = indent;
    }

    protected override void Render(HtmlTextWriter writer)
    {
        // Here you can check if you are running against a production environment
        // and just do base.Render to prevent extra code execution and space in
        // your response to the client

        if (Indent)
        {
            RenderBeginTag(writer);
            writer.WriteLine();
            writer.Indent++;
            base.RenderChildren(writer);
            writer.WriteLine();
            writer.Indent--;
            RenderEndTag(writer);
        }
        else
        {
            base.Render(writer);
        }
        writer.WriteLine();
    }
}

使用示例：

var myDiv = new HtmlPrettyControl("div");
var myLabel = new HtmlPrettyControl("label", false);
myLabel.InnerText = "I'm sorry, Dave.";
myDiv.Controls.Add(myLabel)

生成标记：

<div>
    <label>I'm sorry, Dave.</label>
<div>

对于不是简单 Html 标记的控件（在不同的基类/继承链中），我们使用类似的 Render 方法覆盖。唯一的缺点是传递给Render 方法的writer 似乎没有被告知您的控件所在的ascx 的当前缩进级别（如果有的话）。因此，虽然控件的层次结构及其子控件被很好地缩进和分解，但它们将重置为缩进级别 0，从而破坏了 ascx 或 aspx 布局文件上环绕标记的整体流程。