Методы построения HTML в коде

Question

Методы построения HTML в коде

HTML-шаблон компилируется в приложение как ресурс. Фрагмент шаблона HTML выглядит так:

<A href="%PANELLINK%" target="_blank">
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
</A><BR>
%CAPTIONTEXT%

Мне это нравится, потому что HTML-файл большего размера содержит стили, режим без излишеств и т. д.

Но, как всегда, они теперь хотят, чтобы опция Anchor tag была опущена, если ссылки нет. Также, если заголовок отсутствует, тег BR следует опустить.

Рассмотренная Техника № 1

Учитывая, что я не хочу создавать целые фрагменты HTML в коде C#, я подумал что-то вроде:

%ANCHORSTARTTAGPREFIX%<A href="%PANELLINK%" target="_blank">%ANCHORSTARTTAGPOSTFIX%
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
%ANCHORENDTAGPREFIX%</A>%ANCHORENDTAGPOSTFIX%CAPTIONPREFIX%<BR>
%CAPTIONTEXT%%CAPTIONPOSTFIX%

с идеей, что я мог бы использовать пре и постфиксы, чтобы превратить код HTML в:

<!--<A href="%PANELLINK%" target="_blank">-->
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
<!--</A>--><!--<BR>
%CAPTIONTEXT%-->

Но это просто смешно, плюс один ответчик напоминает нам, что это бесполезная трата времени и может содержать ошибки.

Рассмотренная Техника № 2

Оптовая замена бирок:

%AnchorStartTag%
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
%AnchorEndTag%%CaptionStuff%

и делать найти-заменить, чтобы изменить

%AnchorStartTag%

с

"<A href=\"foo\" target=\"blank\""

Рассмотренная Техника № 3

я подумал дать ID для важных элементов HTML:

<A id="anchor" href="%PANELLINK%" target="_blank">
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
</A><BR id="captionBreak">
%CAPTIONTEXT%

а затем с помощью анализатора HTML DOM для программного удаления узлов. Но нет простого доступа к надежному анализатору HTML DOM. Если бы HTML был вместо xhtml, я бы использовал различные встроенные / нативно доступные парсеры XML DOM.

Рассмотренная Техника № 4

Что у меня на самом деле есть:

private const String htmlEmptyTemplate = 
    @"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01//EN\"""+Environment.NewLine+
    @"   ""http://www.w3.org/TR/html4/strict.dtd"">"+Environment.NewLine+
    @"<HTML>"+Environment.NewLine+
    @"<HEAD>"+Environment.NewLine+
    @"  <TITLE>New Document</TITLE>"+Environment.NewLine+
    @"  <META http-equiv=""X-UA-Compatible"" content=""IE=edge"">"""+Environment.NewLine+
    @"  <META http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"">"+Environment.NewLine+
    @"</HEAD>"+Environment.NewLine+
    @""+Environment.NewLine+
    @"<BODY style=""margin: 0 auto"">"+Environment.NewLine+
    @"  <DIV style=""text-align:center;"">"+Environment.NewLine+
    @"      %ContentArea%"+Environment.NewLine+
    @"  </DIV>" + Environment.NewLine +
    @"</BODY>" + Environment.NewLine +
    @"</HTML>";

private const String htmlAnchorStartTag = 
    @"<A href=""%PANELLINK%"" target=""_blank"">";

//Image is forbidden from having end tag
private const String htmlImageTag = 
    @"<IMG border=""0"" src=""%PANELIMAGE%"" style=""%IMAGESTYLE%"">";

private const String htmlCaptionArea =
    @"<BR>%CAPTIONTEXT%";

И я уже хочу выбить глаза. Сборка HTML в коде - это кошмар. Это кошмар для написания, кошмар для отладки и кошмар для обслуживания - и это усложнит жизнь следующему парню. Я надеюсь на другое решение - так как я следующий парень.

3

html language-agnostic code-generation

Источник

user12597 17 дек '08 в 20:22

6 ответов

Решение

Мои очки репутации в этой игре уже низки, и я могу совершенно ясно сказать вам, что вы, сэр или мадам, серьезно нуждаетесь в XSLT. В противном случае (и вы, вероятно, будете) вам нужно взглянуть на литералы XML в VB.NET (который предоставляет вам решение на основе шаблонов, которое вы ищете...). Поскольку я предпочитаю оставаться в C# (хотя я родился и вырос на VBA), я использую XSLT.

Обе мои нежелательные рекомендации требуют использования XHTML вместо HTML. Одно только это требование является довольно сложным для многих традиционных разработчиков. Я уже вижу, как вы используете заглавные буквы для элементов HTML, что вы найдете мои замечания совершенно бесполезными. Поэтому я должен прекратить писать сейчас.

11

Источник

user22944 17 дек '08 в 20:48

Используйте шаблонизатор, как один из них.

2

Источник

user21239 17 дек '08 в 23:12

Шаблоны - серьезный запах кода. Посмотрите, как Seaside генерирует HTML.

[Править] Еще один, где кто-то без понятия понизил.

0

Источник

user35306 24 дек '08 в 21:20

1.) Не используйте комментарии, вы отправите бесполезные данные в браузер, тратя впустую пропускную способность и сталкиваясь с ошибками в IE.

2.) Не будет ли это лучше, чем какой-то метод? (Я не знаком с C#), но что-то подобное имеет для меня больше смысла.

//using PHP in this example
function HTMLImage($imageData, $linkData){
  var str = '';
  //if there is link data, start <a> tag
  $str .= '<a '.{expand any attributes}.'>';

  //add image tag and attributes from $imageData
  $str .= '<img '.{expand any attributes}.'/>';

  //if there is link data, close <a> tag
  $str .= '</a>';
  return $str;
}

0

Источник

user6144 17 дек '08 в 20:48

Я бы использовал http://template-toolkit.org/, к сожалению, в настоящее время он реализован только в Perl а также Python,

`test.pl`:

use Template;

my $template = Template->new({
  VARIABLES => {
    ImageStyle  => "default",
    CaptionText => "Place Caption Here"
  },
});

$template->process( 'test.tt', {
    panel => {
      link  => "http://Stackru.com/",
      image => "/Content/Img/stackru-logo-250.png",
      alt   => "logo link to homepage"
    }
} );

`test.tt`:


[% IF panel.link -%]
<A href="[% panel.link %]" alt="[% panel.alt %]" target="_blank">
[%- END -%]

[%- IF panel.image -%]
   <IMG border="0" src="[% panel.image %]" style="[% ImageStyle %]">
[%- END -%]

[%- IF panel.link %]</A>[% END %]<BR>
[% CaptionText %]

Выходы:


   
 

Разместить подпись здесь

Если переменная panel.link не определено, пропускает якорные теги.

   


Разместить подпись здесь

0

Источник

user1337 17 дек '08 в 23:08

Другие вопросы по тегам html language-agnostic code-generation

user18771 17 дек '08 в 21:06 2008-12-17 21:06 · Accepted Answer · 2008-12-17 21:06

Как насчет этого: Храните XML как ваш фрагмент:

<fragment type="link_img_caption">
  <link href="%PANELLINK%" />
  <img src="%PANELIMAGE%" style="%IMAGESTYLE%" />
  <caption text="%CAPTIONTEXT%" />
</fragment>

Вытащите его, замените заполнители на "настоящие" строки (которые вы, конечно, тщательно избежали XML),

... и использовать простое преобразование XML для вывода HTML:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="4.0" encoding="iso-8859-1" indent="yes"/>

  <xsl:template match="/">
    <xsl:apply-templates select="fragment" />
  </xsl:template>

  <xsl:template match="fragment[@type = 'link_img_caption']">
    <xsl:choose>
      <xsl:when test="link[@href != '']">
        <a href="{link/@href}" target="_blank">
          <img src="{img/@src}" style="{img/@style}" border="0" />
        </a>
      </xsl:when>
      <xsl:otherwise>
        <img src="{img/@src}" style="{img/@style}" border="0" />
      </xsl:otherwise>
    </xsl:choose>
    <xsl:if test="caption[@text !='']">
      <br />
      <xsl:value-of select="caption/@text" />
    </xsl:if>
  </xsl:template>

</xsl:stylesheet>

Другие типы фрагментов могут быть добавлены из-за type приписывать. Существует много возможностей для улучшения этого, поэтому посмотрите на это как на пример того, как это можно сделать.

Выход:

<a href="%PANELLINK%" target="_blank">
  <img src="%PANELIMAGE%" style="%IMAGESTYLE%" border="0">
</a>
<br>
%CAPTIONTEXT%

и, если ссылка href пуста в XML:

<img src="%PANELIMAGE%" style="%IMAGESTYLE%" border="0">
<br>
%CAPTIONTEXT%

Методы построения HTML в коде

Рассмотренная Техника № 1

Рассмотренная Техника № 2

Рассмотренная Техника № 3

Рассмотренная Техника № 4

6 ответов

test.pl:

test.tt:

Выходы:

`test.pl`:

`test.tt`: