ASP.NET MVC で Twitter Bootstrap を使ってみた (2)

昨日は Bootstrap を使う準備で眠たくなったので、今日はフォームを中心に弄ってみましたよっと。

とりあえず適当にモデルクラスを作って、コントローラとビューをスキャフォールディングで自動生成して実行してみました。

残念な結果になりました。しかし、スキャフォールディングで生成される HTML は Bootstrap のクラスを使ってないので当然の結果ですね。

というわけで、ビューを Bootstrap を使うように修正します。

修正前

フォーム要素

<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>

ボタン

<p>
    <input type="submit" value="Create" />
</o>

修正後

フォーム要素

<div class="clearfix">
    @Html.LabelFor(model => model.Name)
    <div class="input">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

ボタン

<div class="actions">
    <input type="submit" class="btn primary" value="Create" />
</div>

基本的には class の修正だけで済んでいるので簡単ですね。それでは再度実行させるとこうなります。

フォーム要素のマージンが調整されていたり、ボタンがリッチになっていて、かっこいいですね。

しかし、この作業を毎回行うのは非常にめんどくさい作業です。なので Bootstrap 向けの HTML を出力するスキャフォールディングテンプレートを作りました。テンプレートの修正は Scott Hanselman 氏のブログを参考にしました。

Modifying the default code generation/scaffolding templates in ASP.NET MVC - Scott Hanselman

独自のテンプレートを追加したい場合には CodeTemplates ディレクトリをプロジェクトに用意すれば自動で認識してくれるようです。今回は Bootstrap Create のように prefix を付けてみました。

テンプレートの内容はデフォルトをコピーして、さっきの修正を反映しただけです。するとビューの追加ダイアログのテンプレートで選択可能になっているので、通常通りに選択して追加を行うだけで Bootstrap 向けの HTML が出力されます。

あと 1,2 回は何か書くかもしれません。