Day 4: Making a Page Worth a Visit

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.

A page instantly becomes more interesting with useful data and a bit of style. Today we’re going to stuff a bit of data into our view and rock it out a little bit with some Bootstrap style.

Introducing Some Data

If you’ve been following along you’ll have a controller called SimpleController with an Index method in it.  I’m going to come back to that in a moment, but first we need a class to store our data in.  Right-click on the Models folder in the solution and select Add –> Class…, then name it Person from the dialog.  Add FirstName, LastName, Birthdate, LikesMusic and Skills (an ICollection of string) properties, so it ends up looking like so:

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime BirthDate { get; set; }
    public bool LikesMusic { get; set; }
    public ICollection<string> Skills { get; set; }
}

Those properties should give us some interesting data to look at. Now, return to your Index method on the SimpleController and update the code to do the following:

public ActionResult Index()
{
    var person = new Person
    {
        FirstName = "Billy Jo",
        LastName = "McGuffery",
        BirthDate = new DateTime(1990, 6,1),
        LikesMusic = true,
        Skills = new List<string>() { "Math", "Science", "History" }
    };

    return View(person);
}

We are initializing a new Person object and updating the call to View() to pass in the person object.

Note of Awesome In previous versions of the MVC Framework and Visual Studio, we used to have to build our solution to get the types available to the tooling, this is no longer the case, allowing for a little less back-and-forth and confusion over missing types in the tooling dialogs. A nice new feature!

Scaffolding a View

Now, as nice as that Index page was that we created in the Simple view folder, it’s just got to go! Select it from the Solution Explorer and delete it, then return to your SimpleController code file and create a new view in a similar fashion. This time, however, when you’re creating the view, you’ll need to select the “Details” template and the “Person” class.

Now when you run your application and navigate to Simple/Index, you’ll see something like the following:

…which is more interesting, but it just doesn’t sing.  We need it to look more like…

Bang! Now we’re snapping!  Let’s see how that breaks down.

Bootstrapification

The page is missing some zing  and some data. So we need to fix that. The scaffolder does its best to drop properties on the page, but it doesn’t do so well with collections (without special instructions) and tends to just dump the properties in, more or less, a list. It’s a good place to start and helps get a minimal viable product out the door, but it’s not pretty.

To get the page looking like version 2 above, there are four main components that we need to address. The first is just the setup code for the page, where you set the model type, the page title and collect some information to help render the view.

@model WebApplication29.Models.Person

@{
ViewBag.Title = “Index”;
var likesMusic = Model.LikesMusic ? “active” : null;
var notAMusicFan = !Model.LikesMusic ? “active” : null;
}

Next is three divs, each with a slightly different purpose. The first is the page header, a place to block out some info on the page and relay context.

<div class=”page-header”>
    <h1>Welcome to the Person Page <small>Read all about @Model.FirstName</small></h1>
</div>

Then we push out the primary details of the person.

<div>
    <h3>@Model.FirstName @Model.LastName</h3>
    <p>@Model.FirstName was born on @Model.BirthDate.ToString(“D”).</p>
    <p>
        <div class=”btn-group” data-toggle=”buttons”>
            <label class=”btn btn-success btn-sm @likesMusic”>
                <input type=”radio” name=”options” id=”option1”> Likes Music
            </label>
            <label class=”btn btn-success btn-sm @notAMusicFan”>
                <input type=”radio” name=”options” id=”option2”> Suffers in a Distorted Reality
            </label>
        </div>
    </p>
</div>

And finally, we loop through all the skills the person has and set them up as labels.

<div>
    <p>
        Skills:
        @foreach (var skill in Model.Skills)
        {
            <span class=”label label-primary”>@skill</span>
        }
    </p>
</div>

Up Next…

Now that we’re looking at pulling some real data into our views, it’s likely a good time to step back and get a feel for what Bootstrap is and how it can help us style our pages. Tomorrow we’ll take a look at what Bootstrap has to offer our UI.