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>  

Довольно уродливо и трудно понять, когда вы просматриваете источник. Обычно это не проблема, но мой сайт предлагает посетителям ресурсы и учебные пособия, где просмотр источника является частью опыта.

Есть ли способ сделать эти элементы управления красиво? Отступы правильно, лучшие идентификаторы и имена и т.д?

Answer 1

В .NET 4.0 вы можете установить ClientIDMode в один из 4 вариантов AutoID, Static, Predictable и Inherit.Возможно, вы ищете Static, так как это обеспечит отображение ваших элементов управления на странице с идентификаторами, которые вы им присвоили.

Вы можете установить его на уровне приложения, добавив:

<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 (как упоминалось в ответ Роба Стоуна на ваш вопрос ). Тем не менее, отступы и разрывы строк могут быть все же менее желательны для ваших нужд.

Если исходный код HTML истинно является частью пользовательского интерфейса для вашего приложения, вы можете рассмотреть возможность написания HttpModule , присоединенного к событию ReleaseRequestState . Этот подход будет учитывать фактические разрывы строк и отступы вашего HTML-источника. Чтобы избежать повторного изобретения колеса , вы можете использовать либо порт .NET HTML Tidy , либо .NET Wrapper для HTML Tidy как часть вашего пользовательского фильтра ответа.

Есть хороший пример того, как вы можете написать собственный фильтр в 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" - , вот один из них. Я уверен, что нетрудно найти код, форматирующий HTML, который можно применить к этой концепции.

Answer 4

Опоздал на вечеринку здесь, но я столкнулся с подобной проблемой.Мы генерировали какой-то очень сложный 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>

Мы используем аналогичное переопределение метода Render дляэлементы управления, которые не являются простыми тегами HTML (в другом базовом классе / цепочке наследования).Единственным недостатком является то, что writer, переданный методу Render, по-видимому, не проинформирован о текущем уровне отступа ascx, на котором живет ваш элемент управления (если есть).Таким образом, хотя иерархия элемента управления и его дочерних элементов приятно отступает и разбивается, они сбрасываются до уровня отступа 0, нарушая общий поток от разметки объемного звука в файлах компоновки ascx или aspx.