Day 11: Realistic Test Data for Our View

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.

If a controller deals with a certain type of data – say, entities of the Person type – the index will typically contain a collection of data of that type, or perhaps some other related interface (such as search or filter capabilities, or partial views of related data). Let’s add a PersonController and get a feel for what that looks like.

Creating the Person Controller

Back on Day 3 we added a SimpleController to our project. Use the same approach to create a new, empty controller now called PersonController.  The Index method is the only one in the class, but it’s going to need some data.

Generating Realistic Test Data

Now, we have a couple of options to get data. We can hand-bomb 25 (or 5 or 10 or 100) entries into some kind of text file. We can new up dozens of objects with copy & paste and have 60 of the exact same person. Or, we can use a test data generator while we flush out our application and get realistic test data with minimum effort.  Let’s try that!

Go to your Package Manager Console. If you don’t see that window, typically in the bottom of Visual Studio in one of the tabs. If you still don’t see it, try opening it from View –> Other Windows –> Package Manager Console.

Now, let’s install a package that will generate our data for us, called AngelaSmith. Type the following command in the Package Manager Console:

Install-Package AngelaSmith -Version 1.0.1

You should see confirmation that the package is installed. ## Configuring AngelaSmith We’ll need a place to store the data that is generated, so at the class level, add a static field.

private static ICollection<Person> _people;

We’re making it static so that we don’t have to recreate the data on each page load, just when the app starts up.  Now add a static controller to configure the data generator.

static PersonController()
{
    _people = Angie.Configure<Person>()
        .Fill(p => p.BirthDate)
        .AsPastDate()
        .Fill(p => p.LikesMusic)
        .WithRandom(new List<bool>(){true, true, true, false, false})
        .Fill(p => p.Skills, () => new List<string>() { "Math", "Science", "History" })
        .MakeList<Person>(20);
}

It might seem like a lot is going on, but it’s actually quite straightforward. First is a call to the Configure method to enter configuration mode.

_people = Angie.Configure<Person>()

Then we have three Fill statements that demonstrate a few of the ways that we can generate data. For example, you can get a date from the past, fill a property with a random value (60% of the time LikesMusic will be true), or, here, use a lambda to set up an anonymous function to populate the value.

.Fill(p => p.Skills, () => new List<string>() { "Math", "Science", "History" })

Finally, we call the MakeList method to get the list of 20 entities. By default, it will generate 25 but you can specify however many you like.

.MakeList<Person>(20);

## Adding the Index View We’ll need to pass the view some data, when it’s ready, so let’s now update our Index method so that it does that.

public ActionResult Index()
{
    return View(_people);
}

You’re going to like this part. Add an empty View to the project by right-clicking on the Index method of the Person Controller. Then add the following code:

@model IEnumerable<SimpleSite.Models.Person>

@Html.DisplayForModel(Model)

Yeup! That’s it! Run your site to see your list of peeps!

Next Steps

Now that we’ve got some data to work with, let’s start exploring the parts of Bootstrap that can be easily used to add some zing to our site. Tomorrow, we’ll create a form that can be used to search our people.