asp.net-mvc 使 ASP.NET 捆绑为 CSS 捆绑指定 media=screen

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12042248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-08 02:11:13  来源:igfitidea点击:

Make ASP.NET bundling specify media=screen for CSS bundle

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

提问by GR7

I'm just trying out ASP.NET 4.5 bundling and minification, and ran into an issue.

我只是在尝试 ASP.NET 4.5 捆绑和缩小,遇到了一个问题。

I've got around 10 css files, of which 2 were originally referenced in the layout using the attribute media="screen".

我有大约 10 个 css 文件,其中 2 个最初在布局中使用属性 media="screen" 引用。

Since the syntax for adding a css to the bundle does not let you specify that such attribute should be added (makes sense, since the attribute would apply for the whole bundle), I was hoping to see an overload of @Styles.Render that would allow me to specify html attributes, like in other Html helpers, but there is none.

由于向包中添加 css 的语法不允许您指定应添加此类属性(这是有道理的,因为该属性将适用于整个包),我希望看到 @Styles.Render 的重载允许我指定 html 属性,就像在其他 Html 助手中一样,但没有。

There is an ugly solution, in which since I know the url of the bundle created, i could just craft the tag myself, but I'd lose the caching mechanism that is handled by ASP.NET by allowing it to render the tag itself.

有一个丑陋的解决方案,因为我知道创建的包的 url,我可以自己制作标签,但是我会失去由 ASP.NET 处理的缓存机制,因为它允许它自己呈现标签。

Is there a way to do this, am I missing something? Or is this just an oversight of the design team?

有没有办法做到这一点,我错过了什么吗?或者这只是设计团队的疏忽?

回答by Adam Tal

I've found a more elegant solution.

我找到了一个更优雅的解决方案。

I'm using the Styles.RenderFormat(format, bundle).

我正在使用Styles.RenderFormat(format, bundle).

I have a BundlesFormatsclass with a property called PRINTand I use it like so:

我有一个BundlesFormats名为属性的类,PRINT我像这样使用它:

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

And in the cshtml:

在 cshtml 中:

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

回答by GR7

Well, it's an ugly hack, but hopefully the team will add a built-in way to do it in the next release.

嗯,这是一个丑陋的 hack,但希望团队会在下一个版本中添加一种内置的方法来做到这一点。

This is how I solved it, maintaining the caching string and still being able to add the media attribute to the tag.

这就是我解决它的方法,维护缓存字符串并且仍然能够将媒体属性添加到标签。

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

Guess I can turn this into an Html helper, will do that later and edit.

猜猜我可以把它变成一个 Html 助手,稍后会做并编辑。

回答by Daniel Correia

Another option to solve this issue, without compromising the debug ability, could be:

在不影响调试能力的情况下解决此问题的另一种选择可能是:

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

What I'm doing is just appending the given html attributes to the end of the tags (on debug mode) or to the end of the only link tag (when minification/bundling are enabled).

我正在做的只是将给定的 html 属性附加到标签的末尾(在调试模式下)或唯一的链接标签的末尾(启用缩小/捆绑时)。

The usage in views:

视图中的用法:

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

The rest of the 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();
}

I've wrote a blog post about this subject: http://danielcorreia.net/blog/quick-start-to-mvc4-bundling/

我写了一篇关于这个主题的博客文章:http: //danielcorreia.net/blog/quick-start-to-mvc4-bundling/

回答by Hao Kung

Unfortunately there isn't a great way to hook into how the tags are rendered currently, we thought about adding a hook so you could add your own method to render each script/style tag. It sounds like we do need to do that. Should be pretty simple to add, I'll create a work item to enable this scenario...

不幸的是,目前还没有一个很好的方法来挂钩标签的呈现方式,我们考虑添加一个挂钩,以便您可以添加自己的方法来呈现每个脚本/样式标签。听起来我们确实需要这样做。添加应该非常简单,我将创建一个工作项来启用此场景...

As a temporary workaround, if you are willing to lose the debug/release functionality that Styles.Render gives you, you can render a reference to the bundle using Styles.Url which would give you just the bundle url, you can embed that inside your own tag.

作为临时解决方法,如果您愿意失去 Styles.Render 为您提供的调试/发布功能,您可以使用 Styles.Url 呈现对包的引用,它只会为您提供包 url,您可以将其嵌入到您的自己的标签。

回答by WizxX20

Why not just use @media print? Check out http://www.phpied.com/5-years-later-print-css-still-sucks/

为什么不直接使用@media 打印?查看http://www.phpied.com/5-years-later-print-css-still-sucks/

回答by Bolo

Web Forms Solution

网页表单解决方案

In BundleConfig.cs:

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

Master Page:

母版页:

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

Master Page Code File:

母版页代码文件:

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

回答by KeT4yn

So complicated, why not to use:

这么复杂,为什么不使用:

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

?

?