web-dev-qa-db-fra.com

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

J'essaie simplement de regrouper et de minifier ASP.NET 4.5 et j'ai rencontré un problème.

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

Étant donné que la syntaxe pour ajouter un CSS au bundle ne vous permet pas de spécifier qu'un tel attribut doit être ajouté (est logique, car l'attribut s'appliquerait à l'ensemble du bundle), j'espérais voir une surcharge de @ Styles. permettez-moi de spécifier des attributs html, comme dans d'autres aides Html, mais il n'y en a pas.

Il existe une solution laide, dans laquelle, puisque je connais l'URL du bundle créé, je pourrais simplement 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.

Y a-t-il un moyen de le faire, est-ce que je manque quelque chose? Ou s'agit-il simplement d'une supervision de l'équipe de conception?

asp.net-mvcasp.net-mvc-4bundling-and-minificationasp.net-optimization
42
GR7

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

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

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

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")
75
Adam Tal

Eh bien, c'est un hack laid, mais j'espère que l'équipe ajoutera une manière intégrée de le faire dans la prochaine version.

C'est ainsi que je l'ai résolu, 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 cela en un assistant Html, le fera plus tard et le modifierai.

14
GR7

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 simplement 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/regroupement est activée).

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/

6
Daniel Correia

Malheureusement, il n'y a pas un excellent moyen de comprendre comment les balises sont rendues actuellement, nous avons pensé à ajouter un crochet afin que vous puissiez ajouter votre propre méthode pour rendre chaque balise de 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 activer ce scénario ...

Comme solution de contournement 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 à l'aide de Styles.Url qui vous donnerait juste l'url du bundle, vous pouvez l'intégrer dans votre propre étiquette.

3
Hao Kung

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

2
WizxX20

Solution de formulaires Web

Dans 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"));

Page maître:

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

Fichier de code de la page maître:

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