猿教程 Logo

Asp.Net MVC中的StyleBundle:

阿里云服务器,每月低至7.8元,项目演示即建站必备,比腾讯云更便宜,并且不需学生认证,从此链接购买有效:去购买

猿教程(www.yuanjiaocheng.net)的上一节中您已经学习了如何创建一组JavaScript文件。 在这里,您将学习如何创建一组样式表文件(CSS)。

ASP.NET MVC API包括StyleBundle类,它执行CSS缩小和绑定。 StyleBundle也是从Bundle类派生的,所以它支持与ScriptBundle相同的方法。

如上一节所述,您应该在App_Start - > BundleConfig.cs文件中包含的BundleConfig类的RegisterBundles()方法中创建一组脚本和CSS文件。

以下代码显示了RegisterBundles()方法的一部分。

使用ScriptsInclude或IncludeDerictory方法将css文件添加到bundle中,如下所示:

相关实例:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {            
        bundles.Add(new StyleBundle("~/bundles/css").Include(
                                                    "~/Content/bootstrap.css",
                                                    "~/Content/site.css"
                                                ));
        // add ScriptBundle here..  
        
    }
}

从上面的例子可以看到,我们创建了StyleBundle实例,其bundle名称为虚拟 path。 软件包名称(虚拟路径)必须以〜/开头。 使用Include()或IncludeDirectory()方法将css文件名作为字符串。

您可以使用与ScriptBundle相同的方式使用通配符和CDN路径,如上一节所示。


在Razor视图中包含样式包:

您可以在布局视图中使用StyleBundle,并使用静态样式类在单个请求中呈现大量的CSS文件。 样式是一个帮助类来渲染CSS包。

相关实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/bundles/css")
</head>
<body>
    @*html code removed for clarity *@
</body>
</html>

如上例所示,使用Styles.Render()方法在运行时包括指定的css包。 打开浏览器的开发者工具,并检查它是否已缩小和加载css文件,如下所示。


要点
  1. 捆绑和缩小最小化静态脚本或CSS文件加载时间,从而最小化页面加载时间。

  2.  MVC框架提供ScriptBundle,StyleBundle和DynamicFolderBundle类。 

  3. StyleBundle对CSS文件进行缩小。 

  4. 在App_Start文件夹中包含的BundleConfig类中创建脚本或css软件包。 

  5. 在运行时使用通配符{version}来渲染可用的版本文件。 

  6. 使用Styles.Render(“bundle name”)方法在Razor视图中包含样式包。

阿里云服务器,每月低至7.8元,项目演示即建站必备,比腾讯云更便宜,并且不需学生认证,从此链接购买有效: 去购买


版权声明:本站所有教程均为本站原创或翻译,转载请注明出处,请尊重他人劳动果实。请记住本站地址:www.yuanjiaocheng.net (猿教程) 作者:卿文刚
本文标题: C#环境
本文地址:http://www.yuanjiaocheng.net/mvc/stylebundle-mvc.html