Day 7: Semi-Automatic Bootstrap – Display Templates

2014-06-07

This is an installment in a 30 day series on Bootstrap and the MVC Framework. To see more, check out Day 0 for an index.

On Day 6 we looked at the idea of using a partial view to make it easier to render certain types of data more easily. We can go even further, and allow the scaffolder and HTML helpers to render what we’re looking for without the need for the additional calls to render partials.

If you provide the MVC Framework with a template to render a type and give the right kind of hints to your class properties you’ll be duly rewarded with ease of effort in bringing a rich UI to the client. For now, we’ll start with the display end of things.

Bootstrap Styling for Checkboxes

We can really use any type that we want, but I’m going to start with Boolean properties. While they seem at first to be straightforward, they also provide a nullable case that we will need to deal with and render appropriately, much like any other type, yet they’re simple enough that we can work through an starter example.

What we’re doing here is creating a Display Template. You can think of it as a partial view in a way, but you usually do a bit more to inspect the properties and interact with data from the view engine in order to properly augment the rendering. We’ll see more of this tomorrow.

Enough chatter…now create a new folder called and located at Views\Shared\DisplayTemplates and create a file in there called Boolean.cshtml, then paste in the following code:

@model bool?

@if (Model.HasValue)
{
if (Model.Value)
{ Yes }
else
{ No }
}
else
{ Not Set }

As the view that is responsible for rendering Boolean values, we must first set the model type of the view. I’ve used a nullable bool as it’s more durable and works with either the basic bool or the nullable version.

The rest of the code is fairly straightforward, just determine if there’s a value or not, then set up the label based on the value or lack thereof.

Using the Display Template

Because we named it “Boolean.cshtml”, the MVC Framework will use our template in favor of the built-in template for Booleans, which you’ll recall from Day 4 was simply a checkbox. We saw something like this:

But with the new template in place, we’ll see this:

You can modify your Index.cshtml at this point to see this in action by adding the following line of code:

<p>Likes Music: @Html.DisplayFor(model => model.LikesMusic)</p>

And that’s it, a call to DisplayFor makes the magic happen. From now on, all Boolean values will be rendered as yes/no/not set labels throughout your site.

Next Steps

Of course, the display is interesting enough, but what about editing? What if you don’t want all checkboxes to suffer the same disappearing fate? Tomorrow we’ll look at getting the editor in place and to give the MVC Framework more direction on when to use it.