Learning in the Open is Ryan’s attempt to share the things that: trip him up, intrique him, and really cheese him off. By reading this blog you are legally bound to be kind in sharing your thoughts in the comments…hey it’s in writing sooooo….

Blazor Sourcery with ObjectHydrator

Ryan Smith

Just for fun, I thought I would live on the edge for a little experiment. I wanted to try running ObjectHydrator in a Blazor page.

So what is Blazor?

Blazor is an experiemental project, which using WebAssembly to run a variety of languages in the web just like they’d run natively. Ok so what does that mean to me a mere mortal web developer? In the interest of full disclosure, I am a complete beginner to this subject, however what it appears to mean is that I can use a full fledged class library like ObjectHydrator in the web page itself which is delivered to the browser via a series of tubes and runs ON THE VISITOR’S DESKTOP….my brain just partially exploded.

So in this example I am going to make a simple Blazor page that generates a short list of a simple Person object via ObjectHydrator and render it right on the page in a table.

Keep in mind that before just 5 minutes ago (as of the time of this writing) I have never made a single Blazor page. I mention this for two reasons, 1) to show you how easy this is and B) in the event I commit crimes against HTML and C# I can cower behind the newbie label.

What do I need?

According to this page from Daniel Roth you’ll need Visual Studio 2019 Preview 4 (I’m using the just released RTM version), .NET Core 3.0 Preview 3 SDK (3.0.100-preview3-010431), and the Blazor extension from the Visual Studio Marketpace. Please do visit the above linked page for guidance in getting started.

Now that you’ve followed those steps…there’s one big one left, and it’s not those directions. You need to enable Preview Versions of .Net Core. You can do this in Visual Studio with Tools->Options->Projects and Solutions->.NET Core and check the box next to “Use previews of the .NET Core SDK

Alright with that out of the way you can follow this MS Doc tutorial “Get started with Blazor” to make your first project. Go a head and run it and poke around in the code.

Ok…what’s next?

I’m going to start by adding a new Ravor View. Right click in the Pages folder and select New Item and select Razor View and name it Hydrator. Your empty page should look like this:

A blank slate…so many opportunities.

A blank slate…so many opportunities.

Let’s add ObjectHydrator to the project in the usual way. Right click on the project name and select Manage NuGet Packages and then search for FoundationStandard.ObjectHydrator and select version 2.0.1 (the most current at the time of this writing).

Now we need to get this page ready. In our new page replace everything there with this @page directive which will tell the routing engine how to route the request:

@page "/hydrator"

Now let’s add a link to the page in the NavMenu. Open up Shared/NavMenu.cshtml and add this snippet to the list of LI tags in the NavMenu:

<li class="nav-item px-3">
            <NavLink class="nav-link" href="hydrator">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Hydrator
            </NavLink>
</li>

Go ahead and run it again…you should get to our blank page.

Next we’re going to add the code that does all the work. This code will instantiate the Person array, which we’ll populate with ObjectHydrator and in a few steps we’ll use that to render the table. We are also defining the Person class here which is what ObjectHydrator will fill. So go ahead and add this to the file after the @page directive.

@functions {
    Person[] people;
    protected override async Task OnInitAsync()
    {
        var hydrator = new FoundationStandard.ObjectHydrator.Hydrator<Person>();
        people = hydrator.GetList(5).ToArray<Person>();
    }
    class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Currently this code just fills the Person array named people. The next bit of code on this page will render a table of first and last names. Add this after the above block of code:

@if (people == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var person in people)
            {
                <tr>
                    <td>@person.FirstName</td>
                    <td>@person.LastName</td>
                </tr>
            }
        </tbody>
    </table>

This should look fairly recognizable as this is just normal Razor code. The complete page should look like this:

Sourcery

Sourcery

Go ahead and run this again and select the Hydrator link from the left side….tada:

Magic right?

Magic right?

So what just happened?

When you first loaded the app, it sent down WebAssembly versions of the .NET libraries the app uses…you can see this in the Developer Tools Window in Chrome, check it out:

I’d be lying if I said I completely understood this black magic.

I’d be lying if I said I completely understood this black magic.

What did we learn?

I think we learned that there is a new paradigm in web development coming…this is amazing stuff. However I think we also learned this is still changing pretty rapidly so please use with caution.

I’m not even sure of the scenario I’d use this in yet, but I think the exciting part is the innovation and new ways to tackle complex tasks in the browser. I’m super intrigued and I hope you are too.

Building a custom generator with ObjectHydrator