Day 6: Reusing Design Elements on Multiple Pages

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.

While it’s important to learn the mechanics of the underlying technology we use, it’s never really much fun to have to do the same work over and over again. That’s part of why we’re here; rather than hacking out the CSS for each site or page, we use frameworks and libraries to bring a uniform look-and-feel.

Likewise, we want to make sure we’re leveraging the MVC Framework to do the heavy lifting for us when we’re trying to get our data out to the client.

Layouts and Partial Views

Back on Day x I briefly mentioned the layout page, located in your Views\Shared directory. This type of “master page” gives you the ability to create a template that can be shared on all pages where you want to wrap your content with common elements, such as side bars, menus, footers and the like, or likewise, to stuff in client-side application scripts, style sheets and other elements.

At the other end of the layout page is the concept of a partial view – a template that can be used to render a specific kind of content in different pages. You may also hear them called by the shortened name of “partials”. This allows you to define one time how a set of data will be rendered and then include the partial wherever you need to render the content.

Creating a Partial View

Let’s consider for a moment the section of labels that is rendered at the bottom of our person page that lists the skills.

That block of skills is really just a collection of strings that we are displaying as labels decorated with Bootstrap styling. I could imagine that would be handy to have in other places on my site as well.

Let’s look at that code again quickly and see what we have going on.

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

Essentially, we’re dumping a bunch of span elements to the page inside of a p tag, all wrapped up in a div. Not too complex. There is a title to describe the list of labels, and a for..each loop that walks over the collection to dump the labels to the page.

Let’s cut that code to the clipboard and paste it into a new file in the Views\Simple folder called _StringCollection.cshtml. You can add the file by right-clicking on the Simple folder and selecting Add –> View. When prompted, make sure to tick the “Create as Partial View” so that the scaffolder doesn’t set the layout or title, and select the “empty (without model)” template. Using the underscore as a prefix is a convention to let others (and remind yourself) that the file is intended be rendered as a partial view.

Paste the code into the file and update it a little so that the entire partial matches the following code, including the model definition at the top:

@model ICollection<string>

<div>
<p>
@ViewBag.ListDescription
@foreach (var value in Model)
{
<span class=”label label-primary”>@value</span>
}
</p>
</div>

Notice that rather than just writing out “Skills” to the page ahead of our labels, we’re now using a property from the ViewBag. Now, return to your Index.cshtml and, in the place of the code that you removed, add the following lines to your view:

@{
    ViewBag.ListDescription = “Skills:”;
    Html.RenderPartial(“_StringCollection”, Model.Skills);
}

Run your newly updated page and see…well, you’ll see exactly what we had before, but we’re doing it a little more cleverly!

Here we’ve set the title and then asked Razor, the view engine, to process the partial view file with the contents of the string collection we’ve passed in. From now on, anywhere in our site, we can push a collection of strings into a label set with a title in two lines of code.

Next Steps

This isn’t the only way that we can render a type of data with some kind of enhanced templating. Tomorrow we’ll look at making it even more effortless to get our data all fancied up for the ball.