Добавить стиль к Xelement в C # для электронной почты в формате HTML - PullRequest
Новая
       4

Добавить стиль к Xelement в C # для электронной почты в формате HTML

1 голос
/ 10 февраля 2012

Я только что понял это письмо в формате html, и теперь мне нужно стилизовать его так, чтобы я мог получить пробел между этими 2 столбцами в моей таблице, вот мой код: 

    var html = new XDocument(
 new XElement("html",
     new XElement("body",
         new XElement("h2", "Your entire inventory:"),
         new XElement("table",
             new XElement("tr",
                 new XElement("th", "Product"),

                 new XElement("th", "Quantity")),
                    new XElement("tr",
                 from item in prodList
                 select new XElement("td", item.ProductName, new XElement("td", item.Quantity), new XElement("tr")))
                 ))));

Это вывод, который я получаю: 

Your entire inventory:

                Product                    Quantity
Nissin rich & savory chicken bw - 6 pack  5
The Zombie Survival Guide                 3
Maruchan Ramen Noodle Soup                5
Generic Tomatoes, Whole                   2

Так что мне нужно выяснить, как добавить стиль в теги, чтобы получить отступы / границы и т. Д. В электронном письме

Ответы [ 2 ]

2 голосов
/ 10 февраля 2012

Определение стиля элемента HTML обычно выполняется с помощью CSS: 

new XElement("html",
    new XElement("head",
        new XElement("style",
            new XAttribute("type", "text/css"),
            "td { border: 1px solid red; }"
        )
    ),
    new XElement("body", ...
1 голос
/ 10 февраля 2012

Ваша XElement структура довольно повреждена (вы определяете tr элементы внутри td элементов внутри других td элементов); довольно непредсказуемо, как браузер будет отображать результат. Вот как это выглядит: 

<html>
  <body>
    <h2>Your entire inventory:</h2>
    <table>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
      </tr>
      <tr>
        <td>Nissin rich &amp; savory chicken bw - 6 pack<td>5</td><tr /></td>
        <td>The Zombie Survival Guide<td>3</td><tr /></td>
        <td>Maruchan Ramen Noodle Soup<td>5</td><tr /></td>
        <td>Generic Tomatoes, Whole<td>2</td><tr /></td>
      </tr>
    </table>
  </body>
</html>

Для начала вам нужно исправить код генерации HTML (см. Ниже).

Поскольку вы намереваетесь использовать свой HTML в электронных письмах, вам следует избегать встроенных таблиц стилей (несмотря на их призыв избегать повторения кода). Некоторые почтовые (веб) клиенты, особенно Gmail, просто игнорируют встроенные таблицы стилей (см. Использование CSS и HTML в информационных бюллетенях электронной почты ). В большинстве случаев для электронных писем в формате HTML безопаснее использовать встроенные стили.

Чтобы ввести некоторый интервал между вашими двумя столбцами, вы можете определить атрибут style="padding-right:50px;" строки для всех ячеек в левом столбце; это обеспечит наличие 50 пикселей пробела между самым длинным названием продукта и столбцом количеств. 

var html = new XDocument(
    new XElement("html",
        new XElement("body",
            new XElement("h2", "Your entire inventory:"),
            new XElement("table",
                new XElement("tr",
                new XElement("th", "Product", 
                    new XAttribute("style", "padding-right:50px;")),
                new XElement("th", "Quantity")),
            from item in prodList
            select new XElement("tr",
                new XElement("td", item.ProductName, 
                    new XAttribute("style", "padding-right:50px;")),
                new XElement("td", item.Quantity))))));

Приведенный выше код сгенерирует: 

<html>
  <body>
    <h2>Your entire inventory:</h2>
    <table>
      <tr>
        <th style="padding-right:50px;">Product</th>
        <th>Quantity</th>
      </tr>
      <tr>
        <td style="padding-right:50px;">Nissin rich &amp; savory chicken bw - 6 pack</td>
        <td>5</td>
      </tr>
      <tr>
        <td style="padding-right:50px;">The Zombie Survival Guide</td>
        <td>3</td>
      </tr>
      <tr>
        <td style="padding-right:50px;">Maruchan Ramen Noodle Soup</td>
        <td>5</td>
      </tr>
      <tr>
        <td style="padding-right:50px;">Generic Tomatoes, Whole</td>
        <td>2</td>
      </tr>
    </table>
  </body>
</html>
...