Building Full Stack Web Apps with Blazor

Kurskod MC061

Building Full Stack Web Apps with Blazor

Are you looking to build rich, interactive web applications but don’t like to go the JavaScript route? Or is your team skilled in .NET and you want to leverage that to build modern, responsive and fast web applications? Blazor can be your solution.

Pris
28950 kr (exklusive moms)
Längd
3 dagar
Ort och datum
Hålls på begäran

Kursen hålls på begäran

Kontakta oss för mer information.

Telefon: 08-562 557 50 
E-post: kursbokning@cornerstone.se

Blazor, part of ASP.NET Core, is the new framework from Microsoft to build modern, full-stack web applications without using JavaScript. Using Blazor, developers can use C# and .NET on the client and the server instead of Angular or React. This course focuses on ASP.NET Core Blazor 8 and therefore covers both the client-side side interactivity as well as using server-side rendering.

After following this course, you will be powered to build full-stack web apps using Blazor. You will during the course build a full application in the different hosting models, giving you the knowledge to select what’s best to your situation. That is a unique advantage of Blazor.
This course uses .NET 8 and Visual Studio 2022.


Target Audience and Prerequisites

This course is intended for web developers. Basic knowledge of C#, HTML and .NET is assumed.

About the trainer

Gill Cleeren has been using Blazor way before it was officially released. Since then, he has led multiple successful Blazor implementations. Gill has also authored the most watched Blazor course on Pluralsight: Blazor Fundamentals. He’s an MVP and Microsoft Regional Director.

Detaljerad information


An introduction to Blazor

In this introduction module, students will get to know the Blazor framework and will explore how Blazor apps run. We will look at web assembly and the link with Blazor as well as the different hosting models of Blazor, including the new server-side rendering model introduced with ASP.NET Core 8. The required tools will also be explored. You will get to know the component model as you’ll build a first, small application too.

Topics:

  • Understanding Blazor and WebAssembly
  • Working with the different hosting models
  • Understanding Blazor Full Stack Web UI
  • Using Visual Studio and Visual Studio Code to create Blazor apps
  • Using the different templates in Visual Studio
  • Creating a first Blazor component
Understanding the core concepts of ASP.NET Core

Blazor is a key part of ASP.NET Core and many of the features are the same, since they are built on the same foundations. In this chapter, you will get to understand the bigger picture and see which foundational concepts, including dependency injection and middleware, can be leveraged.

Topics:

  • Understanding ASP.NET Core and the .NET 8 stack
  • The history of the different .NET platforms and how we got here
  • Working with dependency injection
  • Using middleware
Working with Blazor components

Blazor applications are built using components. There are many options to create apps using components, and in this chapter, we will explore the different options. A very important aspect will be data binding which is baked into Blazor, which is covered in-depth in this chapter, as well as the life-cycle of components, which you’ll need to understand to create your apps with the full power of components.

Topics:

  • Creating Blazor components
  • Using components
  • Adding parameters in components
  • Data binding in components
  • Handling events in component
  • Lifecycle hooks in components
Accessing remote data from Blazor apps

Blazor apps need to connect to up-to-date data. There are several ways to do this. In server-side Blazor, we can use EF Core. A better and more scalable approach is using remote data over REST services. In this chapter, we will learn how we can work with remote data.

Topics:

  • Setting up an API using ASP.NET Core
  • Accessing a REST API from Blazor
  • Using HttpClient
  • Using services and dependency injection to work with data
Creating forms in Blazor

Forms are a very important concept in any web application. Using the data binding features we have in Blazor, creating forms is very well supported. In this chapter, we will explore data binding further and use it to create different types of forms.

Topics:

  • Creating forms in Blazor
  • Using the built-in form components
  • Validating data in Blazor apps
Routing in Blazor apps

Using the Router in Blazor, we can customize how we can route to different pages and components in our application. In this chapter, we will explore how the router can be used. We will look at the layout component and while we’re at it, we will also explore how state can be stored in the application using a topic called state management.

Topics:

  • Routing basics
  • Using route constraints
  • Working with state management
  • Lazy-loading inside Blazor apps
Creating more advanced components in Blazor

By now, you have understood that components are the vital building block for any Blazor application. But there’s much more to discover around them. That will be the focus of this module where we look at topics including the component life cycle, templated components, error boundaries, virtualization, built-in components such as HeadOutlet and QuickGrid and much more.

Topics:

  • Built-in components (QuickGrid…)
  • Templated components
  • Cascading state
  • Virtualization
  • Error boundaries
  • Using @key
Using the JavaScript interop from Blazor apps

Although writing JavaScript isn’t needed to create Blazor apps, some features will require JavaScript to be invoked from Blazor. This includes LocalStorage, drag and drop and many others. In this module, you’ll learn how to bring in functionality exposed by JavaScript into your Blazor apps as well as calling JavaScript from the Blazor application.

Topics:

  • Invoking JavaScript code from Blazor
  • Using components that use JavaScript under the hood
  • Invoking .NET code from JavaScript
Understanding the different hosting models in ASP.NET 8 & Full Stack Web UI

We have already looked at the different hosting models that Blazor supports early in the course. We will now explore these in more depth, as we will first look at how we can convert a WASM application into a Blazor Server app. Since .NET 8 and ASP.NET Core 8, Blazor components can also be use to render server-side. In this chapter too, we will look at this new hosting model and we will move the application to be a server-side rendered app including the new options such as streaming rendering, advanced navigation and form handling and we’ll see how we can then here too, bring in client interactivity by mixing the different hosting models.

Topics:

  • Introducing Blazor Full Stack Web UI
  • Working with the new Blazor Web App Template
  • Using server-side rendering
  • Working with streaming rendering
  • Advanced navigation and forms handling
  • Using the render modes to create mixed applications
  • Using Blazor Hybrid
Adding Authentication and Authorization in Blazor

Just like other web applications, Blazor apps will require authentication and authorization. When we are communicating with APIs, then too we need to send in authenticated requests using a token. In this chapter, we will explore how we can secure our Blazor apps.

Topics:

  • Adding authentication using ASP.NET Identity endpoints
  • Applying authorization
Understanding advanced topics in Blazor

In this final chapter, you’ll get to understand many other features about Blazor, including creating component libraries, state management and unit testing with bUnit.

Topics:

  • Applying state management
  • Creating unit tests with bUnit
  • Creating and reusing component libraries

Få inspiration & nyheter från oss

Jag godkänner att Cornerstone skickar mig nyheter via e-post