Skip to main content

Using Bootstrap with MVC Views

I’m a lazy developer by nature. That means I don’t like to do extra work when it isn’t necessary. Therefore, I am a big fan of MVC’s HTML helpers. One of my favorites is Html.EditorForModel().

In case you haven’t heard about it, Bootstrap is a newish set of CSS and JavaScript from Twitter that makes designing responsive web sites pretty easy. The CSS has a modern and clean look, and pages based on it scale very well, even on mobile devices.

The problem I ran into is that Bootstrap expects form elements (labels, inputs, etc.) to have specific classes so that it knows how to display them properly. But the EditorForModel helper doesn’t know about Bootstrap. Thus, I needed to find a way to substitute the default classes for Bootstrap’s.

The first thing I tried was to use jQuery to change the classes dynamically.

image

It worked, but I didn’t like having to rely on JavaScript for this. Short of rewriting all of the editing views and abandoning Html.EditorForModel, I thought that there must be a way to customize how the helper generates its HTML.

I found the solution at an older blog post by Brad Wilson. He describes how to override the default template used by EditorForModel to generate a table layout for the form fields.
Once I got that code, it was a simple matter of changing the HTML to include the form classes used by Bootstrap. The example uses ASP.NET syntax. I’m using Razor, so I had to make some minor modifications. The complete class is shown here.
Views/Shared/EditorTemplates/Object.cshtml

image

This is really just the default template with the classes changed to the ones used by Bootstrap:

  • control-group
  • control-label
  • controls
  • help-inline

There are obviously a lot more things that could be added to this, but this should be enough to get you started.

As is typical for me, I spent a lot of time working so that I could be lazy. In the end, however, I’m happy with this solution. I didn’t have to make any changes to my Views, and it keeps my code nice and DRY.

Comments

Popular posts from this blog

How to copy your Frozen Free Fall progress to a new phone

It's happened to all of us. You are about to get a branch new smartphone, when it hits you. You're on level 250 of Frozen Free Fall. If you get a new phone, you'll lose all of that progress! Ok, admittedly this isn't the most pressing problem of our time, but it's annoying. So today I decided to do something about it.

I have a Samsung Galaxy S4 (Android), and just received an iPhone 5c. Before you bash me on my phone choice, let me explain that the iPhone is provided by my employer at no cost to me. Now you may proceed to bash me for putting games on my work phone. 
First step: Frozen Free Fall had already been installed on both devices. Next, using the Astro File Manager on my Galaxy, I searched and found the Frozen game save stored in /storage/sdcard0/Android/data/com.disney.frozensaga_goo/files/user.dat. I imagine it will be in the same location on any Android phone. If not, just look for user.dat in a folder with a similar name. So, using a USB cable and the A…

Ionic vs. Bootstrap - for a Web App

Ionic 1.x vs Bootstrap 3.x for a Web AppI was recently asked at work to come up with a comparison between Ionic Framework and a more traditional Angular/Bootstrap combination to create a web app. The application will primarily be used in a desktop web browser (probably Chrome or IE). There are also some use cases where it will be accessed from Safari on an iPad. However, this is purely a web; there are no plans to install the app onto the iPad as a hybrid app. Thus, recommending Ionic to build the UI hadn't occurred to me until the request was made.

This is even more surprising in that I recently published a Pluralsight course on Ionic Framework 1. It should have been the first thing that crossed my mind.
One constraint is that currently only Angular 1.x and Bootstrap 3 are authorized web technologies. Ionic 1.3 was recently approved, but not Ionic 2, Angular 2, or TypeScript yet.
Given those constraints, herein is my attempt at coming up with reasons to use (or not to use) Ionic…

Record Video of Your Android Screen on a Mac with ADB

Background I've been working a lot lately on writing mobile apps using the Ionic Framework. My goal is to be able to release apps for both iPhone and Android at roughly the same time. So far, I've only released apps for Android, simply because I'm too cheap to pay Apple $99/year. But that's neither here nor there.

The Problem Today I wanted to record a demo video for one of my apps running on my Android test device, an older Samsung Galaxy S4. I had no idea how to do that. Camtasia 2 for the Mac supports iOS devices out of the box, but not Android. What to do?

After a bit of searching, I found instructions on a few different sites. None of them had all of the steps I needed. So rather than trying to remember where I found everything, I figured I'd put all of the instructions in one place on my own blog so I could find it again easily.
PrerequisitesAndroid Debugging Bridge or Android SDKUSB to Micro USB cable (preferably the one that came with the device). Record t…