Call Us: +32 2 466 00 16
Email: info@u2u.be
Follow Us:

Full Stack Development with C# and Blazor

5 days
UBLZ
5 days

Upcoming Sessions

Date:

Format:

Price:

Location:

Book now

Date:

Format:

Price:

Location:

Book now

Date:

Format:

Price:

Location:

Book now

Date:

Format:

Price:

Book now

Interested in a private company training? Request it here.

Introduction to Blazor

Blazor allows you to build any kind of application, from building a static web site (like ASP.NET MVC) to highly interactive Single Page Applications, and also desktop and mobile applications. Blazor has it all! Here we will have a high-level look at the features available in Blazor for building the web site of the future!

  • Blazor Components replacing MVC Controllers and Views
  • Converting a static web site with Blazor
  • Adding Streamed Rendering to improve user experience
  • Using Blazor to add interactivity to part of the web site
  • Introducing Web Assembly with .NET and Blazor
  • Introducing the different application models
  • Blazor Features Overview
  • Using Visual Studio Templates to Get Started
  • LAB: Getting started with Blazor

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 with a single responsibility. Blazor Components are classes built from razor and C# and are easier to understand, debug and maintain. And of course, you can re-use the same component in different pages.

  • What is a Blazor Component?
  • Building a Simple Blazor Component
  • Component Parameters
  • Conditional Rendering and ChildContent
  • Separating the View and View-Model
  • Styling Components
  • LAB: Using components for building a simple website

Blazor Data Binding

Modern web applications use the Model-View-ViewModel approach which heavily relies on data binding. Blazor is no exception! We will look at the different ways to do data binding with Blazor.

  • A Quick Look at Razor
  • One Way Data Binding
  • Event Handling and Data Binding
  • Two Way Data Binding
  • Reporting Changes with StateHasChanged
  • Component Data Binding
  • Understanding EventCallback
  • LAB: Using Data Binding

Blazor Forms and Validation

Most applications need users to enter some data. So how do we present this to the user, capture changes made and validate the data?

  • Working with Forms in Blazor
  • Adding validation to your forms
  • Disabling the "Submit" button when validation detects errors
  • Implementing custom validation in Blazor - Fluent Validation
  • LAB: Adding a form for data entry

Understanding Blazor Component Lifecycle Hooks

Blazor Components are born, go through changes and get removed. Here we will look at places where you can intercept some of a component's life-cycle.

  • Understanding Lifecycle Hooks
  • Implementing the right LifeCycle Hook(s)
  • Limiting unnecessary Rerendering of components with ShouldRender
  • LAB: Implementing Life Cycle Hooks

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. Services are the key enabler for running components both on the server and WASM.

  • Understanding Dependency Inversion & Injection
  • Some Inversion of Control Containers
  • Blazor and Dependency Injection
  • Building Blazor Services
  • LAB: Create a service to talk to the data store

Advanced Blazor Components

Blazor Components are the building blocks for builing web sites. But how do you create components that are truly re-usable? What about performance?

  • Referring to Components
  • Building Templated Components
  • Advanced Templated Components with Piggy-Wig
  • Optimized Rendering with Razor Templates
  • Rendering large amounts of rows using Virtualization
  • Feedback with Error Boundaries
  • Help Blazor with change detection using @key
  • LAB: Building a Templated Component

Built-in Blazor Components

Which components do you get for free with Blazor? Of course we only cover components that are not covered in other places.

  • Using Existing Blazor Component Libraries
  • Using Dynamic Component
  • HeadContent and HeadOutlet
  • Setting default focus with FocusOnNavigate
  • InputFile of uploading contents
  • Showing tables of data with QuickGrid
  • LAB: Using QuickGrid

Reusing components with Component Libraries

You can easily distrubute your components as a component libary. This way your components can be used across several Blazor projects. We will also look at developing for both Blazor platforms with the ability to used advanced debugging features.

  • Building a Component Library
  • Consuming a Component Library
  • LAB: Moving your components into a Component Library

.NET 8 Blazor Application Models

Blazor supports different kinds of applications, from fairly static web Sites to highly interactive web sites. Here we will examine the different models and how you can re-use the same Blazor components in all of them!

  • The new Blazor Application Templates
  • Server-Side Rendering
  • Understanding Streamed Rendering
  • Adding Advanced Navigation and Forms Handling
  • Adding Interactive Components Using Three Rendering Modes
  • Building a desktop/mobile application with Blazor Hybrid
  • Lab: Step-by-Step enhancing a web site

REST Communication

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.

  • Sending and receiving data
  • Using the HttpClient Class and IHttpClientFactory interface
  • The HttpClientJSONExtensions Methods
  • LAB: Talk to the server

Single Page Applications and Routing.

Blazor is a .NET framework you can 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
  • Lazy Loading parts of your Blazor web site
  • Handling location changing events
  • Preventing Navigation to avoid losing changes
  • LAB: Adding a route and using Lazy Loading

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 geographic map.

  • Why do we still need JavaScript in Blazor?
  • Calling JavaScript from C#
  • Calling .NET Methods from JavaScript
  • Displaying a map with a JavaScript library
  • LAB: Add a map to show the location of the resto and customer

Blazor State Management

So how does Blazor WebAssembly manage state? And how do I avoid losing my state when the user accidentally hits refresh in the browser. And of course we will look at Reduxi which allows you to limit the complexity of large applications..

  • Examining Component State
  • Using Protected Browser Storage
  • The Redux Pattern
  • Using Redux Effects
  • Smart and Dump Components
  • LAB: Building an Application with Redux

Unit Testing Blazor Applications using bUnit

Unit Testing is seen by many companies as a fundamental approuch to building stable software. Let us apply this and see how we can unit test our blazor components?

  • Introducing BUnit
  • Understanding and Customizing Semantic Compare
  • Writing Unit Tests using C#
  • Using Razor Unit Tests

Understanding Claims-Based Security

What is a given user allowed to do in your application? This most-likely depends on the role that user has in your organisation. This role is now represented with claims. In this chapter you will get a better understanding why claims are better than roles, and how claims are transmitted in a secure way as tokens.

  • Representing the User
  • Introducing Claims Based Security
  • Understanding Tokens
  • Using Claims in .NET

Blazor Authentication with Individual Accounts

Blazor authentication can be implemented by keeping user information in a database. Microsoft made this very easy with .NET 8.

  • Auth using Individual Accounts
  • Extending Authentication with your own Data
  • Authorization using AuthorizeView

Blazor Authentication with OpenId-Connect

How can we add authentication with OpenID-Connect to a Blazor application?

  • What is OpenId Connect (OIDC)?
  • Adding OIDC authentication to a Blazor Server application
  • Adding OIDC authentication to a Blazor WASM application
  • LAB: Protecting your Blazor application

"Full stack development" refers to the practice of working across the entire stack of technology layers in software development. This typically includes both front-end and back-end development tasks. Microsoft Blazor is the Microsoft Framework for building modern applications, including Web, Single Page, Mobile and Desktop applications. Blazor allows you to do this using C# and use all the skills and tools you have been using with .NET! Attend this training if you want to get a head-start with Blazor. All examples and labs use the latest LTS version of .NET and Visual Studio. Labs also work with the latest .NET and VS version.

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

Contact Us
  • Address:
    U2U nv/sa
    Z.1. Researchpark 110
    1731 Zellik (Brussels)
    BELGIUM
  • Phone: +32 2 466 00 16
  • Email: info@u2u.be
  • Monday - Friday: 9:00 - 17:00
    Saturday - Sunday: Closed
Say Hi
© 2024 U2U All rights reserved.