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上のトップメニューの作成補助機能です。

header

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

[sourcecode language=”csharp”]
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());
}
}
[/sourcecode]

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

[sourcecode language=”csharp”]
/[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);
}
[/sourcecode]
出力は以下の感じです。

message1

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

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

5.サンプルコード

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

6.最後に

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

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