Методы построения HTML в коде - PullRequest
Новая
       36

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

3 голосов
/ 17 декабря 2008

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

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

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

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

Рассмотренная техника Nº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\""

Рассмотренная техника Nº3

я подумал о том, чтобы дать идентификатор важным 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 был HTML, я бы использовал различные встроенные / нативно доступные парсеры XML DOM.

Рассмотренная техника Nº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 в коде - это кошмар. Это кошмар для написания, кошмар для отладки и кошмар для обслуживания - и это усложнит жизнь следующему парню. я надеюсь на другое решение - так как я am следующий парень.

Ответы [ 6 ]

11 голосов
/ 17 декабря 2008

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

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

2 голосов
/ 18 декабря 2008

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

2 голосов
/ 18 декабря 2008

А как насчет: Сохранить 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%
0 голосов
/ 25 декабря 2008

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

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

0 голосов
/ 18 декабря 2008

Я бы использовал Template Toolkit , к сожалению, в настоящее время он реализован только в Perl и Python.

test.pl: 

use Template;

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

$template->process( 'test.tt', {
    panel => {
      link  => "http://Stackoverflow.com/",
      image => "/Content/Img/stackoverflow-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 %]

Выходы: 

<A href="http://Stackoverflow.com/" alt="logo link to homepage" target="_blank">
   <IMG border="0" src="/Content/Img/stackoverflow-logo-250.png" style="default">
</A><BR>
Place Caption Here

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

   <IMG border="0" src="/Content/Img/stackoverflow-logo-250.png" style="default">
<BR>
Place Caption Here
0 голосов
/ 17 декабря 2008

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