Сделать ASP.NET связывание укажите media=screen для CSS bundle

Я просто пробую. ASP.NET 4.5 связывание и минификация, и столкнулся с проблемой.

У меня есть около 10 css-файлов, из которых 2 изначально были указаны в макете с помощью атрибута media="screen".

Поскольку синтаксис добавления css в пакет не позволяет указать, что такой атрибут должен быть добавлен (имеет смысл, так как атрибут будет применяться для всего пакета), я надеялся увидеть перегрузку @Styles.Рендер, который позволит мне указать html атрибуты, как и в других Html-помощниках, но их нет.

Есть уродливое решение, в котором, поскольку я знаю url созданного пакета, я мог бы просто создать тег сам, но я бы потерял механизм кэширования, который обрабатывается ASP.NET позволяя ему отрисовывать сам тег.

Есть ли способ сделать это, я что-то упускаю? Или это просто недосмотр проектной группы?

7 39
asp.net-mvc asp.net-mvc-4 asp.net-optimization

7 ответов:

, я нашел более элегантное решение.

Я использую Styles.RenderFormat(format, bundle).

У меня есть класс BundlesFormats со свойством PRINT, и я использую его следующим образом: 

public class BundlesFormats
{
    public const string PRINT = @"<link href=""{0}"" rel=""stylesheet"" type=""text/css"" media=""print"" />";
}

И в cshtml: 

@Styles.RenderFormat(BundlesFormats.PRINT, "~/bundles/Content/print")
71

Ну, это уродливый хак, но, надеюсь, команда добавит встроенный способ сделать это в следующем выпуске.

Вот как я решил эту задачу, сохранив строку кэширования и все еще имея возможность добавить атрибут media в тег.

@{
    var cssMediaBundleUrl = BundleTable.Bundles.ResolveBundleUrl("~/stylesheets/mediacss", true);
}
<link href="@cssMediaBundleUrl" rel="stylesheet" type="text/css" media="screen" />

Думаю, я могу превратить это в HTML-помощник, сделаю это позже и отредактирую.

13

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

public static IHtmlString Render(string path, IDictionary<string, object> htmlAttributes)
{
    var attributes = BuildHtmlStringFrom(htmlAttributes);

#if DEBUG
    var originalHtml = Styles.Render(path).ToHtmlString();
    string tagsWithAttributes = originalHtml.Replace("/>", attributes + "/>");
    return MvcHtmlString.Create(tagsWithAttributes);
#endif

    string tagWithAttribute = string.Format(
        "<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\"{1} />", 
        Styles.Url(path), attributes);

    return MvcHtmlString.Create(tagWithAttribute);
}

Я просто добавляю заданные атрибуты html в конец тегов (в режиме отладки) или в конец единственного тега ссылки (когда включена минификация/связывание).

Использование в представлениях: 

@Bundles.Render("~/css/print", new { media = "print" })

Остальная часть кода: 

public static IHtmlString Render(string path, object htmlAttributes)
{
    return Render(path, new RouteValueDictionary(htmlAttributes));
}

private static string BuildHtmlStringFrom(IEnumerable<KeyValuePair<string, object>> htmlAttributes)
{
    var builder = new StringBuilder();

    foreach (var attribute in htmlAttributes)
    {
        builder.AppendFormat(" {0}=\"{1}\"", attribute.Key, attribute.Value);
    }

    return builder.ToString();
}

Я написал пост в блоге на эту тему: http://danielcorreia.net/blog/quick-start-to-mvc4-bundling/

6

К сожалению, в настоящее время нет отличного способа зацепиться за то, как отображаются теги, мы подумали о добавлении крючка, чтобы вы могли добавить свой собственный метод для визуализации каждого тега скрипта/стиля. Похоже, нам действительно нужно это сделать. Должно быть довольно просто добавить, я создам рабочий элемент, чтобы включить этот сценарий...

В качестве временного обходного пути, если вы хотите потерять функциональность отладки / выпуска, которая стилизует.Рендеринг дает вам, вы можете рендерить ссылку на пакет с помощью Стили.Url, который даст вам только URL пакета, вы можете встроить его в свой собственный тег.

3

Почему бы просто не использовать @media print? Проверить http://www.phpied.com/5-years-later-print-css-still-sucks/

2

Решение Веб-Форм

В BundleConfig.cs: 

//Print css must be a separate bundle since we are going to render it with a media=print
Bundles.Add(new StyleBundle("~/bundles/printCSS").Include("~/Content/Print.css"));

Главная Страница: 

<asp:Literal runat="server" ID="litCssPrint" />

Файл Кода Главной Страницы: 

litCssPrint.Text = Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" type=""text/css"" media=""print"" />", "~/bundles/printCSS").ToHtmlString();
0

Так сложно, почему бы не использовать: 

bundles.Add<StylesheetBundle>("~/Css/site.css", b => b.Media = "screen");

?

-1