Visual Studio Tools For 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 Bootstrap 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, but it can also generate your views using Bootstrap.
 
The following is a basic example of a 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


Similar Articles