Call Us: +32 2 466 00 16
Follow Us:

Building Single Page Applications with Blazor

Training code
Book this course

Introduction to WebAssembly and Blazor

In this introduction we will look at how browsers are now capable of running .NET assemblies in the Browser using WebAssembly, Mono and Blazor.

  • A Tale of Two Wars.
  • Introducing Web Assembly.
  • Web Assembly and Mono.
  • Interacting with the Browser.
  • Server Side Blazor.

Your First Blazor Project

Getting hands on is the best way to learn. In this chapter you’ll install the prerequisites to developing with Blazor. These include Visual Studio along with some needed extensions. Then you’ll create your first Blazor project in Visual Studio, run the project to see it work, and finally inspect the different aspects of the project to get a “lay of the land” view for how Blazor applications are developed.

  • Installing Blazor Prerequisites.
  • Generating your project with Visual Studio or Code.
  • Examining the solutions and its projects.

  • A Quick Look at Razor.
  • One Way Data Binding.
  • Event Handling and Data Binding.
  • Two Way Data Binding.
  • Reporting Changes.

Blazor Components.

In modern web development we build applications by constructing them from components, which typically are again built from smaller components. A Blazor component is a self-contained chunk of user interface. Blazor Components are classes built from razor and C# with one specific purpose (also known as the principle of Single Responsibility) and are easier to understand, debug and maintain. And of course, you can use the same component in different pages.

  • What is a Blazor Component?
  • Building a Simple Blazor Component.
  • Separating the View and View-Model.
  • Building a Component Library.

Services and Dependency Injection.

Dependency Inversion is one of the basic principles of good Object-Oriented design. The big enabler is Dependency Injection. In this chapter we will discuss dependency inversion and injection and why it is a fundamental part of Blazer. We will illustrate this by building a Service that encapsulates where the data gets retrieved and stored.

  • What is Dependency Inversion?
  • Adding Dependency Injection.
  • Configuring Dependency Injection.
  • Building Blazor Services.

Data Storage and Microservices

In general client-side browser applications need to store some of their data. In some cases, such as games, the application can store its data in the browser itself, using browser local storage. But in most cases storage will happen on the server which has access to database engines such as SQL Server. In this chapter we will cover the basics of storing data using Entity Framework Core and exposing that data using REST and microservices built on top of ASP.NET Core.

  • What is REST?
  • Invoking Server Functionality with REST.
  • Building a Simple Microservice with ASP.NET Core.
  • What is Entity Framework Core?
  • Generating the Database with Code First.
  • Testing your Microservice.

Communication with Microservices

So how do you talk to a REST service with Blazor? We will use the HttpClient class you probably already know from other .NET projects, but with a twist.

  • Using the HttpClient Class.
  • The HttpClientJSONExtensions Methods.
  • Retrieveing Data From the Server.
  • Storing Changes.

Single Page Applications and Routing.

Blazor is a .NET framework you use for building Single Page Applications, just like you can use popular JavaScript frameworks such as Angular, React and VueJs. But what is a Single Page Application (SPA)? We will look at using routing to jump between different sections of a SPA and sending data between different components.

  • What is a Single Page Application?
  • Using Layout Components.
  • Understanding Routing.
  • Setting the Route Template.
  • Redirecting to Other Pages.
  • Sharing State between Components.

JavaScript Interoperability

Sometimes there is just no escape from using JavaScript 😊. For example, Blazor itself uses JavaScript to update the browser’s Document Object Model (DOM) from your Blazor components. You can too. In this chapter we will look at interoperability with JavaScript and, as an example, we will build a Blazor Component Library to display a line chart, using a popular open-source JavaScript library for charts.

  • Calling JavaScript from C#.
  • Calling .NET Methods from JavaScript.
  • Building a Blazor Chart Component Library.

Blazor is a new Microsoft Framework for building Single Page Applications. Unlike frameworks like Angular and React Blazor allows you to do this using C# and the .NET framework! Attend this training if you want to get a head-start with Blazor.

This training requires basic knowledge about building websites with HTML and CSS, and also some knowledge about C# and ASP.NET.

© 2019 U2U All rights reserved.