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のプロジェクトを作成するところから順に説明します。
- 「新しいプロジェクト」から「ASP.NET MVC 4 Webアプリケーション」を選択する。
- プロジェクトテンプレートでは、「空」を選択する。
- パッケージマネージャーコンソールを起動する。
- 「PM > Install-Package twitter.bootstrap.mvc4」を実行する。
- 「PM > Install-Package twitter.bootstrap.mvc4.sample」を実行する。
これでOK。
3.実際に使ってみる
何がどうなっているかいくつか確認して見ます。
デフォルトビュー
/Views/sharedの配下に、レイアウトファイルがいくつかと、
「Create.cshtml」、「Details.cshtml」、「Index.cshtml」が用意されています。
Controllerだけ実装すれば、上記のアクションに該当するビューを各コントローラごとに作る必要はありません。
＃要件に対して柔軟ではないですが、さくっと作れますね。
トップメニューの作成補助
Bootstrap上のトップメニューの作成補助機能です。
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]
出力は以下の感じです。
4.サンプルを書いてみての補足
普段あまりASP.NET MVCのコード書かないので、このコードは参考になりました。
アラートってあんな方法で出すとか。
5.サンプルコード
今回は大したサンプルを書かなかったので、載せません。
作者が提供しているtwitter.bootstrap.mvc4.sampleをご利用ください。
6.最後に
実はビューのテンプレートも現在鋭意作成中らしいです。
twitter.bootstrap.mvc4.template
コード自体はもう存在するので完成が待ち遠しいです。
と…思ったら、MvcScaffolding4TwitterBootstrapMvc←こんなコードもありました。
twitter.bootstrap.mvc4用のスキャッフォールディングらしいです。
インストールして触ってみたけど、なぜかコード生成するときにVisual Studioがフリーズする。
また今度調べてみよ。
コメント