Bootstrap MVC4 scaffolding for Visual Studio 2012

Question

I am developing a ASP.NET MVC4 application in Visual Studio 2012. I am also using twitter bootstrap.

Whenever I generate a new Controller, VS2012 will automatically generate default CRUD pages for me, which is nice.

However I am getting tired modifying the pages so that the DIVs are laid out the way bootstrap needs it.

Is there a VS2012 plugin that help generate these views the way bootstrap expects it to be?

Here is a sample div generated by VS2012.

<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>

.. and I will manually change it to be...

<div class="editor-label control-group">
    @Html.LabelFor(model => model.Name, new { @class = "control-label" })
    <div class="editor-field controls">
        @Html.EditorFor( model => model.Name, "CustomTemplate", 
                                     new { @class = "input-xlarge" })
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

Answer 1

ASP.NET MVC uses T4 templates to scaffold Views (and also Controllers) through the Add View and Add Controller dialogs.

You can easilly customize these templates with your custom Bootsrtap markup.

You just need to copy the CodeTemplates directory from (the path can be different on your machine depending on the installed OS, VS, and ASP.NET MVC version)

c:\Program Files (x86)\
    Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 4

Inside your MVC project under a CodeTemplates directory and they are ready for customization.

Here is good step by step guide on the process: Modifying the default code generation/scaffolding templates in ASP.NET MVC

If you want to take the scaffolding one step further I suggest that you check out the MVC.Scaffolding project which has more features than the built in one.

Or because you are looking for customization targeting Bootstrap you can check out the twitter.bootstrap.mvc project (intro blog post)

Some of its features:

• Runtime Scaffolding – default Index, Edit and Detail views.. You provide the POCOs and we will render the CRUD views.
• MVC code templates to generate new views from the mvc add view / add controller dialogs

The custom MVC Code Templates (still a work in progress) are available in a separate nuget packge:

PM> Install-Package twitter.bootstrap.mvc4.templates