A few months ago, I wrote some blog posts about the way we implemented forms in the Cloud Auction project. These posts cover quite a lot of topics, such as:
- The Bootstrap front-end framework
- Server- and client-side validation based on DataAnnotations attributes
- Globalization and localization
- Rich text using Markdown
- Bootstrap datepicker, timepicker and file-upload controls
- Use of MVC EditorTemplates
We decided to make it a lot easier to consume all this, by publishing it in a NuGet package. And, since Bootstrap version 3 is now released, we also ported all controls to be compatible with this version. By adding this NuGet package to your MVC4 or MVC5 project, you will get these control templates completely pre configured. This makes it very easy to create good-looking and user friendly web forms.
This post I’ll describe how to use the new NuGet package. For more background information, please read my original blogposts on form validation, localizationand markdown. Sourcecode of the Bootstrap.MVC.EditorTemplates package is available on Github.
Try it out
We start by creating a new project. We can use Visual Studio 2012 or 2013. I will use the latest version: Visual Studio 2013 RC, and also use the new “One ASP.NET” MVC5 project template, that already use Bootstrap by default.
Create a new solution:
Add MVC 5 project to the solution:
Select the new One ASP.NET template:
Pick the MVC (version 5) template. For this blog post I have selected “No Authentication”, but you can select any supported authentication method:
Now, Visual Studio will create the project:
If you compile and run the project, you’ll see almost the same site that I created in my introductory blog post about setting up a website with Bootstrap and MVC 4.
There are a few things to note:
- The site uses Bootstrap 2.3.1. I don’t know if Microsoft will update the template for the final release of Visual Studio 2013 to Bootstrap 3.0
- The site uses pre-compiled bootstrap files and does not work from the .less sources, making it hard to modify the default bootstrap design
These things will be improved in a moment.
Use the Bootstrap.MVC.EditorTemplates package
Now we will import the Bootstrap.MVC.EditorTemplates.Sample NuGet package in the project. Go to the package manager console.
The MVC5 project template contains bootstrap 2.3.1, that will conflict with the 3.0.0 version. To avoid this, we’ll remove the old version before installing the package. Note
- If you don’t uninstall, you will be prompted if you want to overwrite files.
- If you started with a MVC4 template, you don’t have to uninstall bootstrap, because it is not used.
Type the following commands:
PM> Uninstall-Package bootstrap
PM> Install-Package Bootstrap.mvc.EditorTemplates.Sample
This command will add several NuGet packages and sourcefiles into the project. This takes a while. After installation, you’ll see the readme.txt file:
Before this all works we need to initialize the script and style bundles. Let’s do that: copy the line containing
and open global.asax. Add the line at the end of the Application_Start function:
One last thing to do: open your web.config and check the culture and timezone settings.
By default, they are set to en-US and PST timezone. These server-side settings will also be used client-side. Change them to the setting that your website will use. Note that this assumes your website is targeted at a single culture for all visitors. With a few modifications you could also make the culture change per visitor, based on some client setting.
<add key="TimeZoneId" value="Pacific Standard Time" />
<globalization culture="en-US" uiCulture="en-US" enableClientBasedCulture="false" requestEncoding="utf-8" responseEncoding="utf-8" />
To get the available timezone Id’s, see this Stackoverflow question.
Now, you can compile and run the site. Then browse to the test page that has been added as part of the Bootstrap.MVC.EditorTemplates.Sample package:
You can see all the controls in action. Note that data is validated client-side, with nice red highlights and a warning text telling the user about the error.
If you want to change appearance of the controls, you can do so easily by editing the markup. The controls are in \Views\Shared\EditorTemplates. You can also merge or rename the code in _Layout.BootstrapEditorTemplates.cshtml and _MenuBar.BootstrapEditorTemplates.cshtml (named this way to avoid conflicts with existing files) with the default _Layout.cshtml and _MenuBar.cshtml files to implement Bootstrap 3 throughout the whole project.
[This post is part of a series: Development of a mobile website with apps and social features]