In the fifth article in this series, I talked about and showed how to code the communications layer for this cloud solution using Web API. In this article I’m going to add the user experience (UX) layer to maintain the ad data using ASP.NET Core using the new Blazor framework (in preview).

Real World Cloud App - From Start To Finish - The User Experience Layer

You can see how everything connects for this article. At this point, the only person that will be using the UX, written in Blazor, is me so I can maintain the advertisement data that will be used by my free dotNetTips.Utility Dev App that I created a few years ago for .NET developers. Let’s get going.

Blazor

Microsoft describes Blazor as a new framework for building interactive client-side web UI with .NET. It features:

Create rich interactive UIs using C# instead of JavaScript.
Share server-side and client-side app logic written with .NET.
Render the UI as HTML and CSS for wide browser support, including mobile browsers.

Using .NET for client-side web development offers the following advantages:

Write code in C# instead of JavaScript.
Leverage the existing .NET ecosystem of .NET libraries.
Share app logic across the server and client.
Benefits from .NET's performance, reliability, and security.
Stay productive with Visual Studio on Windows, Linux, and macOS.
Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

I want to highlight that with Blazor, you can easily create an interactive website with NO JAVASCRIPT! Coming from a structured language background, I’ve never been a fan of JavaScript since it isn’t. I’ve always avoided having to write JavaScript and now with Blazor, I don’t need to! This is the framework I’ve been waiting for a very long time. I even might enjoy creating websites again. Once I was at a meeting at Microsoft with Anders Hejlsberg, the original architect of C#, where he stated that JavaScript is completely broken and someone needs to fix it. I guess he believed that so much that he later left the C# team and created TypeScript.

The current preview of Blazor requires Visual Studio 2019 Preview and .NET 3.0. Below is the architecture of Blazor.

As you can see from the above diagram, your C# code runs in the browser using Razor Views. For a long time, in classes I teach and conferences I speak at, I have been stating that users have powerful computers now, so why not move as much of the processing to the client machine and off the backend servers? This allows these servers to process more transactions and can lead to having to stand up less servers. This is a huge cost savings, especially if you are using the cloud.

Creating A Blazor Site

Before you can create a Blazor project, go to this URL and following the instructions. https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started. After that, fire up Visual 2019 Preview and create a ASP.NET Core project and on the next screen, select the Blazor client-side template.

After the solution is created, it will look like any other ASP.NET site that uses Razor pages. The magic is in those Razor pages.

Razor Pages

If you have used Razor pages in the past, then they will look very similar. Below is the markup for the index page for the Blazor app for this article. This page shows the total number of ad clicks from the client app and a list of ads that are currently enabled.

@page "/"
@inject HttpClient Http
<h1>Live Ads</h1>
<hr />
<h2>Total Ad Clicks = @clicks</h2>
<hr />
@if (ads != null)
{
<table class="table">
<thead>
<tr>
<th>App</th>
<th>Title</th>
<th>Message</th>
<th>Link</th>
<th>Schedule</th>
<th>Language</th>
</tr>
</thead>
<tbody>
@foreach (var ad in ads)
{
<tr>
<td>@ad.App</td>
<td>@ad.Title</td>
<td>@ad.Message</td>
<td><a href="@ad.Link" target="_blank">@ad.Link</a></td>
<td>
@if (ad.Schedule != null)
{
<p>
@ad.Schedule.StartsOn.GetValueOrDefault().Date.ToShortDateString() –
@ad.Schedule.EndsOn.GetValueOrDefault().Date.ToShortDateString()
</p>
}
else
{
<p>None</p>
}
</td>
<td>@ad.ISOLanguage</td>
</tr>
}
</tbody>
</table>
}

The page above looks like any other Razor page markup. The page uses real C# code that runs in the browser.

C# In the Browser

The magic is the C# code below at the bottom of the Razor page. When OnInitAsync() is called, it performs two http calls to the API service (discussed in the communications layer article in this series). The first to get the total number of clicks and the second to load the array of ads.

@functions {
dotNetTips.App.Ads.Entities.Models.Ad[] ads;
int clicks = 0;
protected override async Task OnInitAsync()
{
clicks = await
Http.GetJsonAsync<int>("https://localhost:44386/data/admin/adclickcount");
ads = await Http.GetJsonAsync<dotNetTips.App.Ads.Entities.Models.Ad[]>("https://localhost:44386/data/ads?app=0");
}
}

As you can see, the two variables that holds the data from the two API calls is used in the Razor page to create the result shown below.

The rest of the pages for this Blazor are like the one shown above. You can see how I coded them by going to the source for this project. I still need to add the ability to upload the ad images to the site. For security for this app, I will be discussing that in the next article.

Summary

I hope this article inspires you to check out Blazor. Remember, it’s in preview and will be released later this year. This also means there will be most likely breaking changes in the upcoming previews. There were some going from the experimental stage to preview.

Resources

Source for this solution can be found here.
Utility Dev App: This is the app I will be connecting to this cloud app at the end of this series. I hope you will check it out!
Blazor web site.
Blazor official preview announcement.

In the next article, I will be coding the identity layer, so check back here soon. Please make any comments below.

Real-World Cloud App - From Start To Finish - The User Experience Layer