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

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

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

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

1. Создайте метод расширения, который поможет вам встроить 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;
           }
       }
   }
   

2. Затем в шаблоне Razor просто перейдите:

   @Html.EmbedCss("~/Content/EmailStyles.css")
   

   для встраивания вашего CSS-текста.

3. Установите пакет Premailer.Net в свой проект; вы можете получить его через NuGet.

4. Превратите представление Razor в строку (думаю, для этого в вашем процессе используется Postal? тоже так делай).

5. Пропустите строку через Premailer.Net:

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

6. Отправить по электронной почте!

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

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

Проголосовал за ответ Поля д'Оуста, но я обнаружил, что эта версия его вспомогательного метода работает для меня немного лучше (не стал бы пытаться кодировать такие вещи, как кавычки в 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;
    }
  }
}

Я понимаю, что это старый вопрос, но вот модифицированная версия ответа dprothero, которая будет включать пакеты. Создайте статический класс C# и поместите в него этот метод:

public static IHtmlString EmbedCss(this HtmlHelper htmlHelper, string path)
{
  try
  {
      // Get files from bundle
      StyleBundle b = (StyleBundle)BundleTable.Bundles.GetBundleFor("~/Content/css");
      BundleContext bc = new BundleContext(new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, "~/Content/css");
      List<BundleFile> files = b.EnumerateFiles(bc).ToList();
      // Create string to return
      string stylestring = "";
      // Iterate files in bundle
      foreach(BundleFile file in files)
      {
          // Get full path to file
          string filepath = HttpContext.Current.Server.MapPath(file.IncludedVirtualPath);
          // Read file text and append to style string
          string filetext = File.ReadAllText(filepath);
          stylestring += $"<!-- Style for {file.IncludedVirtualPath} -->\n<style>\n{filetext}\n</style>\n";
      }
      return htmlHelper.Raw(stylestring);
  }
  catch
  {
      // return nothing if we can't read the file for any reason
      return null;
  }

Затем перейдите к тому представлению, в котором вы хотите его использовать. Обязательно добавьте оператор using, чтобы ваше представление могло видеть помощник CSS. Я также использую TempData, чтобы решить, отображать ли его в строке:

<!-- Using statement -->
@using Namespace.Helpers;

<!-- Check tempdata flag for whether or not to render inline -->
@if (TempData["inlinecss"] != null)
{
    <!-- Embed CSS with custom code -->
    @Html.EmbedCss("~/Content/css")
}
else
{
    <!-- Use links to reference CSS -->
    @Styles.Render("~/Content/css")
}