ASP.NET MVC & Twitter Bootstrap project templates and wizards. What if?
It is not often that you see an ASP.Net article here at Add-in Express, but we’ve been toying with an idea and I want to share that with you today.
- ASP.Net MVC background
- Using UI frameworks with ASP.Net MVC
- Creating an ASP.Net MVC website – how to speed things up
ASP.Net MVC background
I’ve been using ASP.Net MVC since its version 2 release back in 2010 and recently I’ve also been helping companies harness the power of ASP.Net MVC to migrate some of their desktop software to the web. Even though the MVC framework was built on top of the existing ASP.Net framework, it does not include visual designers as with ASP.Net Web forms.
A complaint I hear often is that it takes a lot of time to get the site design ready when using MVC, because everything needs to be hand coded. This is a valid concern, but by using some of the popular and widely used open source UI frameworks available on the internet, developers can quickly prototype and build websites.
The UI frameworks that I’m talking about are:
The main benefit of using an UI framework for your website designs is that they provide a collection of assets, such as components and layouts, for building your sites or applications.
Using UI frameworks with ASP.Net MVC
To use the open source frameworks with ASP.Net MVC requires some manual work, for example to use Twitter bootstrap, you’d need to add the following files to your project:
- css/bootstrap.css
- js/bootstrap.js
- img/glyphicons-halflings.png
- img/glyphicons-halflings-white.png
The folders where you save the above files in are up to your personal preference. So, when you’ve added the necessary files, the project in the Visual Studio Solution Explorer can look similar to the following:
At this stage we’re still not ready to start building our website using the Twitter bootstrap UI framework, we still need to take care of the CSS and JavaScript minification and bundling as well as building the layout/master page.
Bundling and minification in ASP.Net 4.5 are two techniques that can help you improve your website load time by reducing the size of you CSS and JavaScript. To minify and bundle the Twitter bootstrap CSS and JavaScript files, edit the BundleConfig.cs file, located in the App_Start folder, to include the necessary files.
public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/twitterbootstrap").Include( "~/js/bootstrap.js")); bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/js/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/js/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/js/jquery.unobtrusive*", "~/js/jquery.validate*")); bundles.Add(new StyleBundle("~/style/twitterbootstrap").Include("~/css/bootstrap.css")); } }
Next, we need to build the layout/master page. We’ll use the Twitter Bootstrap Basic marketing site template. Let’s take a look at its design:
The parts highlighted in red indicate which areas we need to add to our Layout/masterpage and the area in blue is the content that will change per page. With this in mind, we can add the following mark-up to the _Layout.cshtml file in the Shared folder:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title</title> @Styles.Render("~/style/twitterbootstrap") <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form pull-right"> <input class="span2" type="text" placeholder="Email"> <input class="span2" type="password" placeholder="Password"> <button type="submit" class="btn">Sign in</button> </form> </div> <!--/.nav-collapse --> </div> </div> </div> <div class="container"> @RenderBody() <hr> <footer> <p>© Company 2013</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/twitterbootstrap") @RenderSection("scripts", required: false) </body> </html>
This takes care of the master layout for our site, but we need to add a new Home controller as well as a View for the Index action of the controller. To do this, right-click on the Controllers folder in the Solution Explorer and select Add > Controller
Type the name for the controller and select “Empty MVC controller” in the Template dropdown list. In the HomeController.cs file, inside the Index action result right-click and select Add View…
A dialog will be displayed, leave the view name as Index and select _Layout.cshtml as die layout or master page.
This will create an Index.cshtml file in the Views\Home folder. Open the file and change its mark-up to the following:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
With all these steps in place, you can run your website and you will see the design look similar to the layout I’ve discussed earlier.
Creating an ASP.Net MVC website – how to speed things up
I’ve shown you a way to manually create an ASP.Net MVC website that uses the Twitter Bootstrap framework, but as you may have seen it takes a number of steps to just get started. So here is an idea on how to speed things up…
Visual Studio Twitter Bootstrap project template
A Visual Studio project template that will automatically create the layout and add the necessary files to the project to create an ASP.Net MVC project based on Twitter Bootstrap.
New Twitter Bootstrap Project Wizard
When you select the Twitter Bootstrap Project template, a new project wizard should pop up (Similar to the Add-in Express project templates) that guides you through the creation of the website) the wizard should prompt you to select some project specific settings and options such as ‘site master layout style’ for example.
Visual Studio Twitter Bootstrap item / page templates
The previous two points take care of creating the base project layout, but it would be nice to have item templates so we can add specific page styles to the project, such as Sign in, Contact us etc.
The pages should automatically adopt the Twitter bootstrap styling, saving the developer from hand coding it.
Ideally, a new item wizard should also be shown, giving the developer the option to automatically create the controller and/or controller action as well as the view or only the view page. At a later stage a “Scaffolded” view item template can be added that will automatically generate a Twitter Bootstrapped themed form based on a model object in the project.
Visual Studio Twitter Bootstrap specific editor extensions
The open source CSS UI frameworks are great, but it can be somewhat of a daunting task to get to know and discover all the features. For example, the Twitter Bootstrap button component offers a variety of options:
To add a large blue button to my page is as easy as adding the following mark-up:
<a href="#" class="btn btn-primary btn-large">Click Here</a>
However, if I decide the button should be orange, I would need to refer to the Twitter Bootstrap documentation, in order to see what the class name should change to. What I propose is a series of Visual Studio editor extensions that automatically “detects” which element I selected in the editor and shows me the different options for the element, e.g.:
Ideally, when the element is selected and it is a Twitter Bootstrap component, it could also show all the options in the Visual Studio property grid.
Wrapping up
So, I’ve shown you how to use Twitter Bootstrap in your own ASP.Net MVC projects and then I’ve explored another option that could make the entire process much easier. By adding these UI framework specific enhancements to Visual Studio, I propose that developers can create prototype and production websites using ASP.Net MVC much faster.
It will also provide developers with a good industry standard starting point for their web projects. This approach can be applied to not just Twitter Bootstrap but all the most popular UI CSS frameworks out there.
So what do you say?
Should we build it?
10 Comments
This is an awesome idea! It would have saved me many hours of development time if I had something like this before. I would like to try this out. When will you release this?
Regards.
Jaco
As I develop asp.net by using webform with telerik for a long time, I dislike Asp.net MVC 4. The main reason is that I need to write more and more code to do same thing on UI rather than using same amount of time to write business logic.
May be my bias !
Rex Chan
Hi Jaco,
Thanks for your interest! I’m glad an idea like this could save you many hours of work.
Keep checking back regularly for future updates.
Hi Rex,
I hear what you’re saying. Hopefully, this idea will allow you to also focus more time on writing business logic.
Thanks for your comment!
Peter,
This is probably one of the best ideas I have heard in a loooong time. Are you and the team currently developing on this…? and if that is the case what would be the estimate release date…? I would really like to offer my services if there is a need for more resources, please feel free to contact me in this regard.
Thanks Jay.
Keep an eye on the Add-in Express site for future news and release dates.
Hi Pieter ,
New project for office 365 development ?
Rex Chan
Hi Rex,
This is more for building your own website using ASP.Net MVC and one of the most popular UI frameworks on the internet.
Where exhaust extensions for visual studio type New Twitter Bootstrap Project Wizard ?
Hi Andrea,
If you’re asking where are theses extensions the answer is they do not exist yet. This article only details an idea we’ve been throwing around here at Add-in Express.
Please keep watching this space for more info!