Как включить стили CSS, встроенные в Razor?

Я использую Postal для визуализации представлений MVC Razor и отправки их по электронной почте. У меня есть пользовательский CSS, который я определил специально для просмотров электронной почты. В настоящее время я включаю их следующим образом:

@Styles.Render("~/Content/EmailStyles.css")

Однако это относится только к относительной ссылке на таблицу стилей, которая не будет работать в электронном письме:

<link href="/Content/EmailStyles.css" rel="stylesheet"/>

Я хочу включить таблицу стилей, чтобы она правильно работала в письме. Каков наилучший способ отображения содержимого файлового ресурса в представлении MVC?

Ответ 1

Думаю, для этого вам понадобится специальный помощник. На мой взгляд, нет такого метода для рендеринга css-пути, включая абсолютный путь к веб-сайту.

например. Http: www.example.com/css/EmailStyles.css

Ответ 2

У меня был тот же самый вопрос, и наткнулся на Premailer.Net. Похоже, вам нужна библиотека. Вот что вам нужно сделать:

Создайте метод расширения, который поможет вам вставлять CSS в вашу страницу; там ответьте на вопрос о том, как вставлять HTML в вид Razor, который должен вам помочь. Я изменил его для вложение CSS:

public static class HtmlHelpers
{
    public static MvcHtmlString EmbedCss(this HtmlHelper htmlHelper, string path)
    {
        // take a path that starts with "~" and map it to the filesystem.
        var cssFilePath = HttpContext.Current.Server.MapPath(path);
        // load the contents of that file
        try
        {
            var cssText = System.IO.File.ReadAllText(cssFilePath);
            var styleElement = new TagBuilder("style");
            styleElement.InnerHtml = cssText;
            return MvcHtmlString.Create(styleElement.ToString());
        }
        catch (Exception ex)
        {
            // return nothing if we can't read the file for any reason
            return null;
        }
    }
}

Затем в шаблоне Razor просто зайдите:
```
@Html.EmbedCss("~/Content/EmailStyles.css")
```
чтобы вставить ваш текст CSS.
Установите пакет Premailer.Net в свой проект; вы можете получить его через NuGet.
Извлеките представление Razor в строку (я думаю, что для Postal в вашем процессе? Я верю RazorEngine также может это сделать).

Запустите строку через Premailer.Net:

PreMailer pm = new PreMailer();
string premailedOutput = pm.MoveCssInline(htmlSource, false);

Отправить как электронное письмо!

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

Изменить. Помните, что стили для псевдоэлементов не могут быть встроены, потому что они не существуют в разметке. Я также заметил необычную небольшую ошибку в Premailer.Net - я думаю, что их специфика и каскадные правила не совсем соответствуют друг другу. Тем не менее, это довольно хорошо, и это еще один фрагмент кода, который мне не нужно писать!

Ответ 3

Приобретенный Paul d'Aoust ответ, но я нашел, что эта версия его вспомогательного метода работает немного лучше для меня (не пытайтесь кодировать такие вещи, как кавычки в CSS):

public static class CssHelper
{
  public static IHtmlString EmbedCss(this HtmlHelper htmlHelper, string path)
  {
    // take a path that starts with "~" and map it to the filesystem.
    var cssFilePath = HttpContext.Current.Server.MapPath(path);
    // load the contents of that file
    try
    {
      var cssText = File.ReadAllText(cssFilePath);
      return htmlHelper.Raw("<style>\n" + cssText + "\n</style>");
    }
    catch
    {
      // return nothing if we can't read the file for any reason
      return null;
    }
  }
}