web-dev-qa-db-ja.com

ASP.NETバンドルでCSSバンドルのmedia = screenを指定する

ASP.NET 4.5のバンドルと縮小を試しているところですが、問題が発生しました。

約10個のcssファイルがありますが、そのうち2個は元々レイアウトでmedia = "screen"属性を使用して参照されていました。

Cssをバンドルに追加する構文では、そのような属性を追加するように指定できないため（属性はバンドル全体に適用されるため、理にかなっています）、@ Styles.Renderのオーバーロードが表示されることを期待していました他のHtmlヘルパーのように、html属性を指定できますが、何もありません。

作成されたバンドルのURLを知っているので、タグを自分で作成することはできますが、タグ自体をレンダリングできるようにすることでASP.NETによって処理されるキャッシュメカニズムを失うというwhichい解決策があります。

これを行う方法はありますか、何か不足していますか？または、これは設計チームの単なる監視ですか？

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

よりエレガントなソリューションを見つけました。

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

まあ、それはいハックですが、うまくいけば、チームは次のリリースでそれを行うための組み込みの方法を追加するでしょう。

これは、キャッシュ文字列を維持しながら、タグにメディア属性を追加できるようにして解決した方法です。

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

これをHtmlヘルパーに変えることができると思います。後でそれを行い、編集します。

14
GR7

デバッグ機能を損なうことなく、この問題を解決する別のオプションは次のとおりです。

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
Daniel Correia

残念ながら、現在のタグのレンダリング方法にフックする素晴らしい方法はありません。フックを追加して、独自のメソッドを追加して各スクリプト/スタイルタグをレンダリングできるようにすることを考えました。そうする必要があるようです。追加するのは非常に簡単なはずです。このシナリオを有効にするワークアイテムを作成します...

一時的な回避策として、Styles.Renderが提供するデバッグ/リリース機能を失っても構わない場合、Styles.Urlを使用してバンドルへの参照をレンダリングできます。これにより、バンドルURLのみが提供され、独自のタグ。

3
Hao Kung

@media printを使用しないのはなぜですか？チェックアウト http://www.phpied.com/5-years-later-print-css-still-sucks/

2
WizxX20

Webフォームソリューション

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
Bolo