ASP.NET MVC使用引导方法

作为一个Web开发人员，如果没有任何前端框架，使用HTML和CSS从头开始构建友好的页面是非常困难的。尤其是对于Windows窗体的开发者来说，更是难上加难。

正是因为这个原因，Bootstrap诞生了。Twitter Bootstrap为开发者提供了丰富的CSS样式、组件、插件、响应性布局等等。同时，微软已经完全融入了ASP.NET的MVC模板。

自举结构介绍

你可以通过http://getbootstrap.com下载最新版本的Bootstrap。

解压文件夹后，可以看到Bootstrap的文件分布结构如下，包括3个文件夹：

有4个。css文件和2。映射css字体文件夹中的文件。我们只需要在项目中包含Bootstrap.css文件，这样Bootstrap就可以应用于我们的页面。Bootstrap.min.css是上述css的压缩版本。

那个。地图文件不需要包含在项目中，可以忽略它。这些文件用作调试符号(类似于。Visual Studio中的pdb文件)，最后允许开发人员在线编辑预处理文件。

Bootstrap使用Font Awesome(一个包含所有字形图标的字体文件，只为Bootstrap设计)来显示不同的图标和符号。fonts文件夹包含四种不同格式的字体文件：

embedded OpenType(glyphicon-半身人-regular . eot)Scalable Vector Graphics(glyphicon-半身人-regular.svg) Truetype字体(glyphicon-半身人-regular . TTF)Web open font format(glyphicon-半身人-regular.woff)建议所有字体文件都应该包含在您的Web应用程序中，因为它可以使您的网站在不同的浏览器中显示正确的字体。

EOT字体格式文件需要IE9及以上浏览器的支持，TTF是传统的旧字体格式文件，WOFF是从TTF压缩而来的字体格式文件。如果只需要支持IE8、iOS 4及以上版本的浏览器，同时支持安卓，只需要包含WOFF字体即可。

js文件夹包含三个文件，所有Bootstrap插件都包含在boostrap.js文件中。bootstrap.min.js是上述js的压缩版本，npm.js由项目构建工具Grunt自动生成。

在引用boostrap.js文件之前，请确保您已经引用了JQuery库，因为所有Bootstrap插件都需要JQuery。

在ASP中向MVC项目添加引导文件。网

打开Visual Studio 2013，创建一个标准的ASP.NET MVC项目。默认情况下，所有引导文件都已自动添加，如下所示：

说明微软非常欣赏Bootstrap，并且在Visual Studio中高度集成。

值得注意的是，在Scripts文件中添加了一个名为_references.js的文件，这是一个非常有用的函数。当我们使用Bootstrap等一些前端库时，可以帮助Visual Studio启用智能提示。

当然，我们也可以创建一个空的ASP.NET MVC项目来手动添加这些依赖文件，如下图所示，选择一个空模板：

对于新创建的空白ASP.NET MVC项目，没有内容，字体，脚本文件夹——。我们必须手动创建它们，如下所示：

当然，您也可以使用Nuget自动添加引导资源文件。如果使用图形界面添加Bootstrap Nuget Package，可以直接搜索Bootstrap。如果使用程序包管理器控制台添加引导程序编号程序包，请输入安装程序包引导程序。

为网站创建布局页面

为了保持我们的网站风格一致，我将使用Bootstrap来构建布局页面。在视图文件夹中创建一个MVC布局页面(Razor)布局文件，如下图所示：

在新创建的布局页面中，使用以下代码引用引导资源文件。

链接href='@Url。内容(' rel=' external nofollow ' rel=' external nofollow ' ~/CSS/bootstrap . CSS ')' rel='样式表' script src='http:@Url。内容(' ~/Js/bootstrap . Js ')'/脚本@Url的使用。内容会将虚拟或相对路径转换为绝对路径，从而确保引导资源文件被引用。

创建一个名为Home的新控制器，并添加一个带有默认索引的视图，这样它就可以应用于上面的布局页面，如下图：所示

使用捆绑包打包和压缩来提高网站性能

捆绑和缩小在ASP.NET是一个新功能，它允许你通过限制对CSS和JavaScript文件的请求数量来加速网站加载。本质上，这种文件被合并成一个大文件，所有不必要的字符(如注释、空格、换行符)都被删除。

对于大多数现代浏览器来说，访问一个主机名最多只能有六个并发连接，这意味着如果您在一个页面上引用六个以上的CSS和JavaScript文件，浏览器一次只能下载六个文件。所以限制资源文件的数量是一个好办法，真正的使命一定要实现，而不是浪费在加载资源上。

在引导项目中使用捆绑包

因为我们创建了一个空的ASP.NET MVC项目，所以我们没有自动引用与打包相关的程序集。打开Nuget软件包管理器控制台以完成软件包的安装，并使用以下PowerShell命令：

安装-打包微软。安装微软的优化。aspnet.web.optimization nuget包及其依赖包，如下所示：

安装完成后，在App_Start中添加BundleConfig类：

public static void register BundleCollection bundles(BundleCollection bundles){ bundles。添加(新的ScriptBundle('~/bootstrap/js ')。包括(' ~/js/bootstrap.js '，' ~/js/site . js ')；捆绑包。添加(新的StyleBundle('~/bootstrap/css ')。包括(' ~/css/bootstrap.css '，' ~/CSS/site . CSS ')；}ScriptBundle和StyleBundle对象在实例化时接受一个参数来表示打包文件的虚拟路径。顾名思义，Include包含您需要的文件。

然后在应用程序启动方法中注册它：

受保护的void Application _ Start(){ area registration。registerelarias()；路由图。注册路由(路由表。路线)；BundleConfig。RegisterBundles(BundleTable。捆绑包)；BundleTable。EnableOptimizations=true}请记住，不要包含类型的文件。min转换为打包文件，如bootstrap.min.css和bootstrap.min.js编译器将忽略这些文件，因为它们已经被压缩了。

在ASP.NET的MVC布局页面中使用@ style . render(~/bootstrap/CSS)和@ scripts . render(~/bootstrap/js)来添加对打包文件的引用。

如果Visual Studio HTML编辑器指示找不到样式和脚本对象，这意味着您缺少命名空间引用。您可以手动添加系统。布局页面顶部的Web.Optimization命名空间，如以下代码所示：

@使用系统。网页.优化！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title@ViewBag.Title/title @ * link href=' @ URl。内容(' rel=' external nofollow ' rel=' external nofollow ' ~/CSS/bootstrap . CSS ')' rel='样式表'脚本src='http:@Url。内容(' ~/js/bootstrap . js ')'/脚本*@ @Scripts。render(' ~/bootstrap/js ')@ style。render(' ~/bootstrap/CSS ')/head body div @ * @ render body()* @/div/body/html当然，为了通用性，最好的做法是添加一个对System的引用。视图文件夹的web.config中的Web.Optimization命名空间，如下所示：

命名空间添加命名空间='System。Web . Mvc'添加命名空间='System。Web.Mvc.Ajax' /添加命名空间='System。web . Mvc . Html '/Add namespace=' system . web . routing '/Add namespace=' bootstrap . web '/Add namespace=' system . web . optimization '/namespace测试打包和压缩

要使用打包和压缩，打开网站根目录下的web.config文件，将编译元素的dubug属性改为false，即release。

system.web编译debug=' false ' targetFramework=' 4.5 '/httpruntimetargetframework=' 4.5 '/当然可以设置Bundle Table。在Application_Start方法中EnableOptimizations=true以达到相同的效果(它会覆盖Web.config中的设置，即使debug属性为true)。

最后浏览网页，查看源代码，可以清楚的看到打包文件的路径是之前定义的相对路径。点击此链接，浏览器为我们打开压缩打包文件，如下图所示：

总结

本章简单梳理了Bootstrap架构，然后介绍了如何将Bootstrap添加到ASP.NET的MVC项目中，最后利用打包压缩技术对资源文件进行打包，从而提高网站的性能。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。