ASP.NET MVC がブートストラップを使用する方法の分析例

この記事では主に ASP.NET MVC で Bootstrap を使用する方法を紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

Web 開発者として、フロントエンド フレームワークを使用せずに、HTML と CSS を使用して使いやすいページを最初から構築するのは非常に困難です。特に Windows フォーム開発者にとって、これはさらに困難です。

Bootstrap が生まれたのはこのためです。 Twitter Bootstrap は、開発者に豊富な CSS スタイル、コンポーネント、プラグイン、レスポンシブ レイアウトなどを提供します。同時に、Microsoft は ASP.NET MVC テンプレートに完全に統合されました。

Bootstrap の構造の概要

Bootstrap の最新バージョンをダウンロードします。

フォルダーを解凍すると、Bootstrap のファイル配布構造は次のとおりで、3 つのフォルダーが含まれていることがわかります:

• css

• fonts

• js

css フォルダーには 4 つの .css ファイルが含まれています。および 2 つの .map ファイル。プロジェクトに bootstrap.css ファイルを含めるだけで、Bootstrap をページに適用できるようになります。 bootstrap.min.css は、上記の CSS の圧縮バージョンです。

.map ファイルはプロジェクトに含める必要はなく、無視しても問題ありません。これらのファイルはデバッグ シンボル (Visual Studio の .pdb ファイルと同様) として使用され、最終的には開発者が前処理されたファイルをオンラインで編集できるようになります。

Bootstrap は、Font Awesome (フォント ファイルには、Bootstrap 専用に設計されたすべてのグリフ アイコンが含まれています) を使用して、さまざまなアイコンとシンボルを表示します。

• Embedded OpenType (glyphicons-halflings) の 4 種類のフォント ファイルが含まれています。 -レギュラー.eot)

• スケーラブル ベクター グラフィックス (glyphicons-halflings-normal.svg)

• TrueType フォント (glyphicons-halflings-regulator.ttf)

• Web オープン フォント フォーマット (glyphicons -halflings-regulator) .woff)

Web アプリケーションにすべてのフォント ファイルを含めることをお勧めします。これにより、サイトがさまざまなブラウザーで正しいフォントを表示できるようになります。

EOT フォント形式ファイルは IE9 以降のブラウザでサポートされている必要があります。TTF は従来の古いフォント形式ファイルで、WOFF は TTF から圧縮されたフォント形式ファイルです。 IE8 以降のブラウザ、iOS 4 以降、および Android のみをサポートする必要がある場合は、WOFF フォントを含めるだけで済みます。

js フォルダーには 3 つのファイルが含まれています。bootstrap.min.js は、プロジェクト構築ツール Grunt を通じて自動的に生成された、上記の js の圧縮バージョンです。

すべての Bootstrap プラグインには JQuery が必要であるため、boostrap.js ファイルを参照する前に、JQuery ライブラリを参照していることを確認してください。

ASP.NET MVC プロジェクトにブートストラップ ファイルを追加する

Visual Studio 2013 を開き、以下に示すように、標準の ASP.NET MVC プロジェクトを作成します。デフォルトでは、すべてのブートストラップ ファイルが自動的に追加されます。 Microsoft が Bootstrap を非常に認識しており、Visual Studio に高度に統合されていることがわかります。

_references.js という名前のファイルがスクリプト ファイルに追加されることに注意してください。これは、Bootstrap などの一部のフロントエンド ライブラリを使用するときに、Visual Studio でスマート プロンプトを有効にするのに役立ちます。

もちろん、空の ASP.NET MVC プロジェクトを作成してこれらの依存関係ファイルを手動で追加することもできます。以下の図に示すように、空のテンプレートを選択します:

新しく作成した空の ASP.NET MVC プロジェクトの場合、Content、Fonts、Scripts フォルダーはありません - 以下に示すように、手動で作成する必要があります:

もちろん、Nuget を使用して Bootstrap リソース ファイルを自動的に追加することもできます。グラフィカル インターフェイスを使用して Bootstrap Nuget パッケージを追加する場合は、「Bootstrap」を直接検索します。パッケージ マネージャー コンソールを使用して Bootstrap Nuget パッケージを追加する場合は、「Install-Package bootstrap」と入力します。

Web サイトのレイアウト ページを作成します

Web サイトの一貫したスタイルを維持するために、Bootstrap を使用してレイアウト ページを構築します。以下の図に示すように、Views フォルダーに MVC レイアウト ページ (Razor) レイアウト ファイルを作成します。

新しく作成したレイアウト レイアウト ページで、次のコードを使用してブートストラップ リソース ファイルを参照します。

<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">

<script src="@Url.Content("~/js/bootstrap.js")"></script>

@Url.Content を使用すると、仮想パスまたは相対パスが絶対パスに変換され、ブートストラップ リソース ファイルが確実に参照されます。

以下に示すように、Home という名前の新しいコントローラーを作成し、デフォルトのインデックス ビューを追加して、上記のレイアウト レイアウト ページを適用します。

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

捆绑打包(bundling)和压缩(minification)是ASP.NET中的一项新功能，允许你提升网站加载速度，这是通过限制请求CSS和JavaScript文件的次数来完成的。本质上是将这类文件结合到一个大文件以及删除所有不必要的字符（比如：注释、空格、换行）。

对于大多数现代浏览器访问一个主机名都有6个并发连接的极限，这意味着如果你在一张页面上引用了6个以上的CSS、JavaScript文件，浏览器一次只会下载6个文件。所以限制资源文件的个数是个好办法，真正意义上的使命必达，而不是浪费在加载资源上。

在Bootstrap项目中使用捆绑打包

因为我们创建的是空的ASP.NET MVC项目，所以并没有自动引用与打包相关的程序集。打开Nuget Package Manager Console来完成对Package的安装，使用如下PowerShell命令：

install-package Microsoft.AspNet.Web.Optimization 来安装Microsoft.AspNet.Web.Optimization NuGet package以及它依赖的Package，如下所示：

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

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

ScriptBundle和StyleBundle对象实例化时接受一个参数用来代表打包文件的虚拟路径，Include顾名思义将你需要的文件包含到其中。

然后在Application_Start方法中注册它：

protected void Application_Start()
{
  AreaRegistration.RegisterAllAreas();
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  BundleTable.EnableOptimizations = true;
}

记住，不要去包含.min类型的文件到打包文件中，比如bootstrap.min.css、bootstrap.min.js，编译器会忽略这些文件因为他们已经被压缩过了。

在ASP.NET MVC 布局页使用@Styles.Render("~/bootstrap/css")、@Scripts.Render("~/bootstrap/js")来添加对打包文件的引用。

如果Visual Studio HTML编辑器表明无法找到Styles和Scripts对象，那就意味着你缺少了命名空间的引用，你可以手动在布局页的顶部添加System.Web.Optimization 命名空间，如下代码所示：

@using System.Web.Optimization
<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @*<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">
 <script src="@Url.Content("~/js/bootstrap.js")"></script>*@
 @Scripts.Render("~/bootstrap/js")
 @Styles.Render("~/bootstrap/css")
 </head>
 <body>
 <p>
  @*@RenderBody()*@
 </p>
</body>
</html>

当然为了通用性，最佳的实践是在Views文件夹的web.config中添加System.Web.Optimization名称空间的引用，如下所示：

<namespaces>
 <add namespace="System.Web.Mvc" />
 <add namespace="System.Web.Mvc.Ajax" />
 <add namespace="System.Web.Mvc.Html" />
 <add namespace="System.Web.Routing" />
 <add namespace="Bootstrap.Web" />
 <add namespace="System.Web.Optimization" />
</namespaces>

测试打包和压缩

为了使用打包和压缩，打开网站根目录下的web.config文件，并且更改compilation元素的dubug属性为false，即为release。

<system.web>

 <compilation debug="false" targetFramework="4.5" />

 <httpRuntime targetFramework="4.5" />

</system.web>

当然你可以在Application_Start方法中设置BundleTable.EnableOptimizations = true来同样达到上述效果（它会override web.config中的设置，即使debug属性为true）。

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

小结

在这一章节中，简单为大家梳理了Bootstrap的体系结构，然后怎样在ASP.NET MVC项目中添加Bootstrap，最后使用了打包和压缩技术来实现对资源文件的打包，从而提高了网站的性能。

以上がASP.NET MVC がブートストラップを使用する方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。