Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Twitter.Bootstrap.MVC4: the Bootstrap package for ASP.NET MVC4

, 9 Jan 2013 Apache
Rate this:
Please Sign up or sign in to vote.
Bootstrap package for ASP.NET MVC4.

UPDATE: To learn more about the Package read these blog posts:

Bootstrap as described by the project website is:

“Sleek, intuitive, and powerful front-end framework for faster and easier web development”.

It is open source and was written and supported by Twitter. Unlike most front end frameworks, Bootstrap is interesting because in addition to it being a full featured CSS framework, it adds JavaScript plugins, typography, HTML scaffolding, and components. The best part is that I am cool with all of Bootstraps dependencies, which means I like it. An advantage that Bootstrap has over the default ASP.NET MVC template is that it is designed to be extended and changed. There are a whole host of themes for bootstrap that build on the basic HTML structure and CSS classes, so if you want to change the look you can drop these in. Check out WrapBootstrap, Bootswatch, and other Resources.

Twitter.Bootstrap.MVC4 Nuget

Introducing the Twitter.Bootstrap.MVC4 nuget package; It will save you time adding bootstrap to MVC4. It combines the existing Bootstrap package with MVC 4 and makes you more productive from step one. This is the work of a spike Matt Hinze created, I then packaged it up to share it with the world.

Install twitter.bootstrap.mvc4 from nuget

> Install-Package twitter.bootstrap.mvc4
> Install-Package twitter.bootstrap.mvc4.sample

This nuget package does the following: (so you don’t have to)

  1. Razor Layout template, it includes the standard sections that are in the default razor templates, like the head and scripts sections.
  2. Bundles the bootstrap CSS and Javascript files, for combination and minification of the default files, using the new MVC 4 bundling feature.
  3. Navigation Routes helper to create the top menu of your site quickly.
  4. Default Views for Index, Details, and Edit. You can use this for all of your admin screens. No need to write views for any of the CRUD based screens. Spend your time writing the front end of your application/website.
  5. Alerts are added through helper function in a controller base class using tempdata for the Post-Redirect-Get pattern.
  6. View Templates, for form generation from built in MVC scaffolding.
  7. Sample controller (separate nuget package, twitter.bootstrap.mvc4.sample) to demonstrate the default views and alerts.

Before digging into the details of how this is implemented in the code, here are some examples of what these look like in the browser after installing the package into an empty MVC 4 application.

Navigation

 

image

By adding two routes ( Home and My Account) the routes show up in the main navigation bar. Here is a sample of how to create Navigation Routes.

Default Views

Three razor views are placed in the Views/Shared folder; Index, Edit, and Details. These views can act as default views, so you do not need to create views when you are just listing, displaying or editing view models. This of this as runtime scaffolding.

Index

image

This is an example of the default Index page. Simply return a IEnumerable of your view model and a listing table will be automatically created. This page uses the default bootstrap table formatting and action button dropdown. The field headers are the Property names of the view model split into natural words, and the name of the view model is listed at the top of the page. Through some small conventions you can in crease the velocity of your back end admin screen development by only writing the controllers and models, the views come for free.

Index – Action dropdown

image

The above screenshot shows the Action dropdown menu, which can be extended to add additional actions to very easily.

Details

image

This is the default Details view. Just return a view model and this will be automatically generated.

Edit/Create

The default edit/create template integrates the bootstrap forms styles using the recommended markup and styles.

image

Above is the example of the default edit screen, that takes full advantage of MVC 4 Editor Templates.

Edit Validation

image

Above is the example of the bootstrap validation which comes in the default edit view.

Alerts

The layout template has bootstrap alerts built into the template, and a base controller adds helper methods for adding data to each type of alert. 

image

The above figure shows the Success alert displayed in green above the table.

image

The above screenshot shows the Information and Warning alerts in yellow and blue, above the table. 

Want to know more about this in the mean time, look at the bootstrap documentation and the bootstrap.mvc4 project site on github. Feel free to start some discussions on the Issues list and send pull requests. If there is enough activity I will create a discussion group for the project. 

I will post more details about how to use each of these features, but for now, install the sample nuget into an Empty MVC4 application and look at the HomeController, it is pretty simple and easy to digest.

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

Share

About the Author

eric hexter
Chief Technology Officer
United States United States
I am an Architect for Dell.com on the Engineering Excellence team. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I am a Microsoft MVP.
 
I have founded some online conferences like aspConf, mvcConf, Community For MVC
Follow on   Twitter

Comments and Discussions

 
QuestionErrors Pinmemberbevans197528-Feb-14 8:03 
QuestionHow can we solve this issue? It happens with VS2012/4.5.MVC4 Razor PinmemberMember 311320116-Jan-14 0:09 
AnswerRe: How can we solve this issue? It happens with VS2012/4.5.MVC4 Razor PinmemberLawrence_7-Feb-14 3:01 
QuestionNavigationroute errors PinmemberMember 1010402812-Oct-13 11:06 
AnswerExcellent PinprofessionalFilipe Moreira de Oliveira12-Aug-13 4:49 
QuestionThe partial view '_actions' was not found or no view engine supports the searched locations. Pinmembermsdevtech3-Apr-13 15:25 
Why am I getting this error:
 

{"The partial view '_actions' was not found or no view engine supports the searched locations.
The following locations were searched:\r\n~/Views/Home/_actions.aspx
\r\n~/Views/Home/_actions.ascx\r\n~/Views/Shared/_actions.aspx
\r\n~/Views/Shared/_actions.ascx\r\n~/Views/Home/_actions.cshtml
\r\n~/Views/Home/_actions.vbhtml\r\n~/Views/Shared/_actions.cshtml
\r\n~/Views/Shared/_actions.vbhtml"}

QuestionAction dropdown doesn't work Pinmembermsdevtech27-Mar-13 15:39 
QuestionNo style =[ Pinmemberdiegooferreira21-Mar-13 4:30 
AnswerRe: No style =[ PinmemberJuanCodeProject18-Sep-13 5:03 
BugRuntime Error with jQuery 1.9 and jQuery.Validate.js PinmemberAylwyn22-Jan-13 3:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 9 Jan 2013
Article Copyright 2013 by eric hexter
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid