Faire en sorte que le bundling ASP.NET spécifie media=screen pour le bundle CSS

Question

Je suis en train d'essayer le regroupement et la minification ASP.NET 4.5, et j'ai rencontré un problème.

J'ai environ 10 fichiers css, dont 2 ont été référencés à l'origine dans la mise en page en utilisant l'attribut media="screen".

Puisque la syntaxe pour ajouter une css au bundle ne permet pas de spécifier qu'un tel attribut doit être ajouté (ce qui est logique, puisque l'attribut s'appliquerait à tout le bundle), j'espérais voir une surcharge de @Styles.Render qui me permettrait de spécifier des attributs html, comme dans d'autres aides Html, mais il n'y en a pas.

Il existe une solution peu glorieuse, dans laquelle, puisque je connais l'url du bundle créé, je pourrais créer la balise moi-même, mais je perdrais le mécanisme de mise en cache qui est géré par ASP.NET en lui permettant de rendre la balise elle-même.

Existe-t-il un moyen de faire cela, ai-je raté quelque chose ? Ou s'agit-il simplement d'un oubli de l'équipe de conception ?

Answer 1

J'ai trouvé une solution plus élégante.

J'utilise le Styles.RenderFormat(format, bundle) .

J'ai un BundlesFormats avec une propriété appelée PRINT et je l'utilise comme suit :

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

Et dans le cshtml :

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

Answer 2

Il s'agit d'un piratage peu esthétique, mais il est à espérer que l'équipe ajoutera un moyen intégré de le faire dans la prochaine version.

Voici comment j'ai résolu le problème, en conservant la chaîne de mise en cache et en étant toujours en mesure d'ajouter l'attribut media à la balise.

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

Je suppose que je peux transformer ceci en une aide Html, je le ferai plus tard et j'éditerai.

Answer 3

Une autre option pour résoudre ce problème, sans compromettre la capacité de débogage, pourrait être :

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

Ce que je fais, c'est ajouter les attributs html donnés à la fin des balises (en mode débogage) ou à la fin de la seule balise de lien (lorsque la minification/le regroupement sont activés).

L'utilisation dans les vues :

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

Le reste du code :

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();
}

J'ai écrit un article de blog sur ce sujet : http://danielcorreia.net/blog/quick-start-to-mvc4-bundling/

Answer 4

Malheureusement, il n'y a pas de bonne façon de s'accrocher à la façon dont les balises sont rendues actuellement, nous avons pensé à ajouter un crochet pour que vous puissiez ajouter votre propre méthode pour rendre chaque balise script/style. Il semble que nous ayons besoin de le faire. Cela devrait être assez simple à ajouter, je vais créer un élément de travail pour permettre ce scénario...

Comme solution temporaire, si vous êtes prêt à perdre la fonctionnalité de débogage/libération que Styles.Render vous donne, vous pouvez rendre une référence au bundle en utilisant Styles.Url qui vous donnera juste l'url du bundle, vous pouvez l'incorporer à l'intérieur de votre propre balise.

Answer 5

Pourquoi ne pas utiliser @media print ? Consultez http://www.phpied.com/5-years-later-print-css-still-sucks/