Visual Studio Tools For Bootstrap

This article focuses on the Tools available in Visual Studio to develop Web Applications using Bootstrap.

Scope

This article focuses on the tools available in Visual Studio to develop Web Applications using Bootstrap.

Requirements

The following article is based on Visual Studio 2013.

Introduction

Bootstrap is one of the most popular HTML, CSS and JavaScript framework for developing responsive, mobile friendly projects on the web.

Bootstrap makes front-end web development faster and easier. It's designed for folks of all skill levels, devices of all shapes and projects of all sizes.

When creating Web Apps in Visual Studio, Bootstrap is included by default in the project that helps developers create high-end responsive web applications.

To enhance the development experience, there are many tricks, tools and Visual Studio Extensions available. This article shows some of these tools that may really improve developer productivity and make development much easier.

Bootstrap support by Default for Web Apps in Visual Studio

From Visual Studio, when creating a new web application, whether web forms or MVC, Bootstrap is already installed and loaded in the project.

The following is an example of a new MVC application.

As you can see below, the Booststrap CSS and JavaScript files are already added by default.

bootstrap

properties

Moreover, Visual Studio provided IntelliSense for Bootstrap. This again makes Bootstrap much easier to use and substantially increases developer productivity.

help blok

Default Scaffolding using ASP.NET MVC

Visual Studio not only supports Bootstrap, it can also generate your views using Bootstrap.

The following is a basic example of scaffolded code.

Step 1

Create a new Model.

  1. public class People  
  2. {  
  3.    public int Id { getset; }  
  4.    public string Name { getset; }  
  5.    public string Surname { getset; }  
  6.    public string Address { getset; }  
  7. }  
Step 2

Add a Controller.

Right-click on Controller, then add a Controller.
Add Controller

Step 3

Select MVC 5 Controller with views, using Entity Framework.

MVC 5 Controller

Step 4

Select the model class and hit Add.

Select the model class

This may take a couple of seconds. Visual Studio creates the view from the model.

The following pages are created using Bootstrap as shown below.

people

Based on the model, Visual Studio will automatically detect the required fields and generate the views for the Create, Delete, Details, Edit and Index pages.

All these pages are written using Bootstrap as in the following.

Sample from Index.cshml
  1. <table class="table" >  
  2.     <tr>  
  3.         <th>  
  4.             @Html.DisplayNameFor(model => model.Name)  
  5.         </th>  
  6.         <th>  
  7.             @Html.DisplayNameFor(model => model.Surname)  
  8.         </th>  
  9.         <th>  
  10.             @Html.DisplayNameFor(model => model.Address)  
  11.         </th>  
  12.         <th></th>  
  13.     </tr>  
Sample from Edit.cshtml
  1. <div class="form-group">  
  2.     @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })  
  3.     <div class="col-md-10">  
  4.         @Html.EditorFor(model => model.Name)  
  5.         @Html.ValidationMessageFor(model => model.Name)  
  6.     </div>  
  7. </div>  
Custom Scaffolding / Scaffolding templates

In actual applications, there is a need to keep the layout standard across all the pages. For example, tables should be of a specific layout.

One way of doing that is to modify each page after scaffolding the code and that requires duplication of tasks. Another more interesting way of proceeding is to define a template so that Visual Studio knows how to scaffold the code.

This can be done using a really great Visual Studio plugin called SideWaffle.

The SideWaffle extension adds a bunch of useful snippets, project and item templates to Visual Studio. Its purpose is to make your daily work in Visual Studio a richer and more productive experience.

Installing SideWaffle

The following is the procedure to Install SideWaffle.

Step 1

Go to Tools, then Extensions and Updates > Online > Search SideWaffle.

Install SideWaffle

Step 2

Select Side Waffle Power Pack and click Download.

Step 3

This will download a VSIX package.

Step 4

Once the download completes, open it and select the versions of Visual Studio you need to install it.

Visual Studio

Generating Templates using SideWaffle

Step 1

When the installation completes, restart Visual Studio.

Step 2

Right-click on the project, Add new Item and select ASP.NET Scaffolding T4 Files.

Scaffolding T4 Files

Step 3

Identify the Code Templates.

The folder Code Templates will be added. These are the templates that are used to create the scaffolding.
To modify the "View Templates", look for the "MVC View" folder.

MVC View

Step 4

Modify the Template.

The "MVC View" folder has the templates for all the views that can be scaffolded via MVC.

Assume that when viewing the records, all the tables must be bordered and have a hover effect.

To do this, modify the list template (list.cs.t4) and add the following to the table tag.
  1. <table class="table table-bordered table-hover" >  
Step 5

Test the changes.

To test this change, delete the People controller and views and scaffold them again as explained in Part 2.

Now, if you go to the Index.html of the folder people, the classes table-bordered table-hover have automatically been added.

The same thing will happen if you scaffold another view for any other model.
  1. <table class="table table-bordered table-hover" >  
  2.    <tr>  
  3.        <th>  
  4.            @Html.DisplayNameFor(model => model.Name)  
  5.        </th>  
  6.        <th>  
  7.            @Html.DisplayNameFor(model => model.Surname)  
  8.        </th>  
  9.        <th>  
  10.            @Html.DisplayNameFor(model => model.Address)  
  11.        </th>  
  12.        <th></th>  
  13.     </tr>  
The following is the output of the generated code.

output of the generated code

Bootstrap Snippet Pack

Bootstrap Snippet Pack
has a collection of Bootstrap snippets for Visual Studio.

Very often, web developers need to go to minimize their development environment then go to the Bootstrap website to find a piece of HTML of a specific component.

Doing this all day reduces the developer productivity since he must switch back and forth between the browser and the development environment.

Fortunately, with Bootstrap Snippet Pack, a code snippet can be retrieved via Visual Studio.

To install the Bootstrap Snippet Pack, from Visual Studio, go to Tools, then Extensions and Updates > Online > Search Bootstrap Snippet Pack.

Bootstrap Snippet Pack

Once Installed, from Visual Studio editor, hit CTL+K, CTL+X to bring in the snippet tool.

snippet tool

Then select Bootstrap and the component needed.

select bootstrap

The Bootstrap Snippet Pack will automatically generate the required HTML.

HTML

Bootstrap Bundle

Another great Visual Studio Extension is Bootstrap Bundle.

Bootstrap Bundle includes a project template for all the Bootstrap example layouts and to start Bootstrap's Modern Business and Business Casual full website templates.

The extension guides you through the creation of a Bootstrap themed ASP.Net MVC website, you can choose your site layout as well as the site color scheme based on BootSwatch.

Installing Bootstrap Bundle

This plugin can be downloaded from Visual Studio itself. Just go to Tools, then Extensions and Updates > Online and search for Bootstrap Bundle.

Select the plug-in and hit download then install.

Select the plugin

Creating a template using Bootstrap Bundle

Step 1

To use the plugin, select File, then New Project.

Step 2

Select Bootstrap Bundle MVC Site.

Bootstrap Bundle MVC Site

Step 3

This will show a wizard that will help you create a Bootstrap WebSite.

create a Bootstrap WebSite

Step 4

For this example, select from the templates, then select Modern Business.

select from template

Step 5

Select the pages that will be needed.

select the pages

Step 6

Click Next to select a theme.

theme

Step 7

Click Next to Add the WebSite title, then click Finish.

site title

Step 8

This takes a couple of seconds for the code and pages to be scaffolded.

css

Step 9

You may then run the application.

All the code has been scaffolded and a clean template is created within minutes.

The user just must customize the contents and it's all done.

The following are some screenshots of the output.

Slide one

map

two column portfolio

References