Page 14 - MSDN Magazine, September 2018

C#
C# in the Browser
with Blazor
Jonathan C. Miller
Blazor is the new Microsoft experimental framework that brings C# into any browser without a plug-in. It holds the promise of modern single-page applications, combined with the ability to use C# and its vast base-class library. Blazor takes C# development to a new level. It’s the final piece necessary to make the language a full-stack development tool. It will have all the power of the pop- ular JavaScript frameworks, but based on the familiar languages, APIs and tooling of the Microsoft .NET Framework.
If you come from a traditional Microsoft background and are familiar with ASP.NET Web Forms or Model-View-Controller (MVC), getting up to speed on Blazor is surprisingly easy, espe- cially when compared to the mountain a Microsoft developer must climb to gain the equivalent knowledge in a JavaScript framework such as Angular or React.
It’s important to understand that Blazor runs completely inside the browser. Once a Blazor app is compiled, it’s essentially a set of files that gets loaded into the browser and runs. Unlike traditional ASP.NET applications, there’s no need for anything special on the back end to serve it. A Blazor site can be served by any Web server on any platform. As for clients, any browser that supports the WebAssembly standard supports Blazor. That includes all the major browsers shipping today.
When running in the browser, an application isn’t really all that useful without access to external data and services. Just like standard JavaScript single-page applications, Blazor apps access Web services
using HTTP REST APIs. Those APIs can be created using Microsoft tools, such as Web API, or any technology that can present an HTTP REST endpoint. In this article, I’m going to demonstrate the ability of a Blazor app to call freely available Web services on the Web.
Getting Set Up
The first step is getting the current build of Blazor installed. As of this writing, Blazor is still an unsupported experimental framework. That means you shouldn’t use it in production. The Blazor install is very low-impact, but you may not want to install it on your every- day work machine. Consider installing it on another machine or a virtual environment. The main requirements are Visual Studio 2017 with ASP.NET and Web development workload installed, the .NET Core SDK, and the Blazor Language extension. Please review the “Get Started” steps on blazor.net. The Blazor team is advancing quite rapidly, and sometimes you need specific versions of Visual Studio or .NET Core to use the current experimental version.
Creating a New Blazor App
I’m going to start by creating the sample Blazor application and then modify it to call some Web services. First, let’s create a new ASP.NET Core Web Application in Visual Studio.
Next, choose a Blazor application and click OK. If you don’t see Blazor in the list of choices, you may be missing the Blazor Language Services Extension.
Figure 1 Getting the ZIP Code Information
This article discusses:
• Creating a new Blazor app
• Calling external Web services • Publishing the application Technologies discussed: C#, Blazor, ASP.NET Core
Code download available at:
msdn.com/magazine/0918magcode
try {
errorMessage = "";
var zipresultStr = await Http.GetStringAsync($"http://api.zippopotam.us/US/{zip}"); zipresultStr = zipresultStr.Replace("place name", "city").Replace(
"state abbreviation", "stateabbr");
ziplookup = JsonUtil.Deserialize<Models.ZipLookup>(zipresultStr);
} catch {
errorMessage = "Invalid zip code";
return; }
10 msdn magazine