ASP.NET MVC4とTwitter Bootstrapを組み合わせる（Twitter.Bootstrap.MVC4を使ってみた）

0.前置き

以前、「HTML・CSSデザインフレームワークを使ってみた」というポストを書きました。
こういったデザインフレームワークをWebアプリケーションフレームワークと組み合わせるときに、
少しだけですけど面倒な時があります。
ASP.NET MVC4でも同じです。テンプレートページを作るのとか…。

1.Twitter.Bootstrap.MVC4の紹介

今回紹介するTwitter.Bootstrap.MVC4は、ASP.NET MVC4とTwitter Bootstrapを組み合わせる機能（ツール、テンプレートなど）を提供します。
作者による紹介ページは、「Twitter.Bootstrap.MVC4; the Bootstrap package for ASP.Net MVC4」です。
Githubのサイトはこちらです。

2.インストール

Visual Studioのプロジェクトを作成するところから順に説明します。

1. 「新しいプロジェクト」から「ASP.NET MVC 4 Webアプリケーション」を選択する。
2. プロジェクトテンプレートでは、「空」を選択する。
3. パッケージマネージャーコンソールを起動する。
4. 「PM > Install-Package twitter.bootstrap.mvc4」を実行する。
5. 「PM > Install-Package twitter.bootstrap.mvc4.sample」を実行する。

これでOK。

3.実際に使ってみる

何がどうなっているかいくつか確認して見ます。

デフォルトビュー
/Views/sharedの配下に、レイアウトファイルがいくつかと、
「Create.cshtml」、「Details.cshtml」、「Index.cshtml」が用意されています。
Controllerだけ実装すれば、上記のアクションに該当するビューを各コントローラごとに作る必要はありません。
＃要件に対して柔軟ではないですが、さくっと作れますね。

トップメニューの作成補助
Bootstrap上のトップメニューの作成補助機能です。

NavigationExtensions.csとして提供されています。
実装は以下のような感じです。

public class ExampleLayoutsRouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.MapNavigationRoute<ExampleLayoutsController>("Example Layouts", c => c.Starter())
                .AddChildRoute<ExampleLayoutsController>("Marketing", c => c.Marketing())
                .AddChildRoute<ExampleLayoutsController>("Fluid", c => c.Fluid())
                .AddChildRoute<ExampleLayoutsController>("Sign In", c => c.SignIn());
    }
}

アラート出力
BootstrapBaseControllerを継承してコントローラを作成すれば、TempDataを用いたアラート出力が可能になります。
こんな感じです。メッセージの出力については、_alerts.cshtmlでよしなにやってくれます。この実装方法いいかも。

/[HttpPost/]
public ActionResult Create(HomeInputModel model)
{
    if (ModelState.IsValid)
    {
        // ...
        Success("Your information was saved!");
        return RedirectToAction("Index");
    }
    Error("there were some errors in your form.");
    return View(model);
}

出力は以下の感じです。

4.サンプルを書いてみての補足

普段あまりASP.NET MVCのコード書かないので、このコードは参考になりました。
アラートってあんな方法で出すとか。

5.サンプルコード

今回は大したサンプルを書かなかったので、載せません。
作者が提供しているtwitter.bootstrap.mvc4.sampleをご利用ください。

6.最後に

実はビューのテンプレートも現在鋭意作成中らしいです。
twitter.bootstrap.mvc4.template
コード自体はもう存在するので完成が待ち遠しいです。

と…思ったら、MvcScaffolding4TwitterBootstrapMvc←こんなコードもありました。
twitter.bootstrap.mvc4用のスキャッフォールディングらしいです。
インストールして触ってみたけど、なぜかコード生成するときにVisual Studioがフリーズする。
また今度調べてみよ。