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

header

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);
}

出力は以下の感じです。

message1

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

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

5.サンプルコード

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

6.最後に

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

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

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。