Twitter.Bootstrap.MVC4 - Twitter Bootstrap for ASP.NET MVC 4

I want to talk about the NuGet package, which is useful to those who decide to create an application on a bunch of ASP.NET MVC 4 and Twitter Bootstrap. This package will not only add Twitter Bootstrap resources to the project, but also provide ready-made ways to solve common problems.



To add a package from NuGet, you need to run in the console of the package manager:

> Install-Package twitter.bootstrap.mvc4

> Install-Package twitter.bootstrap.mvc4.sample

Here is what the package includes:

1. Layout , which includes standard sections, such as head and scripts, etc.
2. Bundles for CSS and JavaScript files Twitter Bootstrap, which will be combined and minifitsirovatsya standard for .NET 4.5 System.Web.Optimizations .
3. Helper to create site navigation through the declaration of routes - you can quickly create a site menu.
4. Default View for Index, Details and Edit. You can use them for the administrative interface - there is no need to create them for basic CRUD scripts. Instead, you can spend time creating the public part of the application.
5. You can display custom messages using the helper function in the base class of the controller. It uses TempData and is implemented via Post-Redirect-Get.
6. Templates for generating forms in MVC Scaffolding.
7. In addition to this, if you install the package twitter.bootstrap.mvc4.sample, you will get an example of using all of the above.

Let's see how it looks.

Navigation

Having added three routes of navigation, we will see them in the main menu of the site. Navigation routes are configured using a special extension method for the RoutesCollection:

 routes.MapNavigationRoute("Account-navigation", "My Account", "account", new { controller = "Account", action = "Index" }); 

')

Default View

This is an example of an Index page. Just return the IEnumerable your model and automatically generate a table that uses the styles of the Bootstrap tables and shows a drop-down list with actions. The headings of the table are the properties of the model, divided into words, and the name of the model appears on top of the page. Using this functionality, you can quickly create a set of administrative pages, creating for them only controllers and models.

Action list

This screenshot shows a drop-down list with actions that can be easily replenished with any additional:

Details

And this is an automatically generated details page. Just return your model and this page will be generated by default:

Editing and creating

The default template for editing a model uses Twitter Bootstrap form styles. It generates the markup recommended in Bootstrap and uses Editor Templates:

Validation

Here is an example of the validation of Bootstrap, which is included in the default templates:







Generated Layout can show messages Bootstrap. And in the base class controller added methods to display each type of message. They use TempData and the Post-Redirect-Get pattern.



The source code of the package is available on GitHub , Twitter Bootstrap documentation will also be useful.