Building Blazor Components Web Pages with C# Instead of JavaScript

  • Peter Himschoot

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

You're watching a preview of subscription content. Log in to check access

Learn Blazor, an alternative to JavaScript for web applications that is based upon Microsoft’s popular and powerful C# language. You’ll build web applications by dividing them into easy-to-maintain components known as Razor components, then create those components using the Blazor framework. In this video you’ll see how to make components in Blazor that communicate efficiently with each other and the Blazor runtime libraries in order to accomplish your application goals. Along the way, you’ll learn to leverage your components over multiple applications by packaging those components into libraries that can be shared.

What You Will Learn

  • Create Blazor components as building blocks for reusing code

  • Share components between projects using component libraries

  • Build complex component hierarchies with cascading parameters

  • Construct templated components that can be re-used in different scenarios

  • Implement the popular View/ViewModel pattern for Blazor components

  • Share data between different components and make them sync

  • Optimize your code using a component’s life-cycle hooks

Who This Video Is For

For Blazor and web developers who want to learn how to build functional and reusable Blazor components. For developers who want to gain maximum leverage from their components by using them across as many applications as is feasible.

This video starts off by walking you through the creation of a simple component. Then the video shows how to leverage what you’ve built in the first component by using that component as the basis for a second. The video continues by showing how you can split your code from markup using the View and ViewModel approach, and how to set up communications between components. You’ll also cover life-cycle hooks, cascading parameters, and the concept of templated components to facilitate code reuse.

About The Author

Peter Himschoot

Peter Himschoot works as a lead trainer, architect, and strategist at U2U. Peter has a wide interest in software development that includes applications for the web, Windows, and mobile devices. Peter has trained thousands of developers, is a regular speaker at international conferences, and has been involved in many web and mobile development projects as a software architect.


Supporting material

View source code at GitHub.

About this video

Peter Himschoot
Online ISBN
Total duration
1 hr 9 min
Copyright information
© Peter Himschoot 2019

Related content

Video Transcript


Hi. Welcome to this video about Blazor components. I am Peter Himschoot, and I live in Belgium. And I work as a consultant and trainer for U2U, a Brussels-based training facility specializing in .NET and web development.

I am also the author of Blazor Revealed by E-Press. Blazor Revealed walks you through building your first complete Blazor app looking at all the different things Blazor has to offer to build state of the art single-page applications with Blazor. Let’s see what you will learn in this video.

We’ll start with what is a Blazor component, and then we’ll just dive in and create a new Blazor component. After we’ve done that, we’re going to look at how Blazor components can communicate with one another. We’ll look at parent to child communication. So how can we parse data from a parent and child? But also child to parent communication, how can the child tell the parent that something interesting has happened?

We’ll also look at building a Blazor component using the call behind technique where we separate the view from the call. We’ll also look at how we can refer to a child component, so we can instantly call minutes on it.

And of course, components have a lifecycle. So we’ll look at the different matters of care call during the lifecycle of a Blazor component. If you want to share a component among different projects, we need to put it into a component library. So we’re also going to look at building your own component library, and of course, we’re going to look at some of the more advanced topics.

We’re going to look at cascading parameters, which allow you to pass a parameter through different layers of components without the middle components having to know anything about these parameters. We will also look at templated components, a special kind of laser component very similar to genetics in.NET. And finally, we’re going to look at the Blazor compilation model. We will look behind the scenes of what happens with the Blazor component.

So what is a Blazor component? Blazor apps are built by creating components, which can then be assembled into bigger components. Components are usable, self-contained elements with the user interface, such as page, a dialogue or a form. This user interface is built by combining HTML elements and data, which comes from logic written in .NET, which reacts to the events caused by the user interaction with the component. Components are sharable, can be nested in other components, and can be used among projects as component libraries.