Introducing Blazor Components [Pt 3] | Front-end Web Development with .NET for Beginners

Summary

In this informative video, Daniel Roth from the Blazer team guides viewers through the fundamentals of Blazer components for building interactive web UIs. He explains how components are reusable pieces of web UI with encapsulated rendering logic and event handling. The tutorial covers defining components with Razor syntax, using built-in components like 'Page Title', and demonstrates component reusability and dynamic rendering with examples like the 'Counter' and 'Weather' components. It also explores passing parameters to components, showcasing the powerful combination of C# and HTML in creating dynamic web applications.

Takeaways

• 😀 Blazer web apps are composed of reusable components, each encapsulating its own rendering logic and UI event handling.
• 📝 Components are defined using Razor syntax, which combines HTML with C#, and are stored in .razor files.
• 📂 The 'Components' folder in a Blazer project contains all the .razor files that define the application's components.
• 📍 The '@page' directive assigns a URL route to a component, determining its address within the web app.
• 🏷️ The '<PageTitle>' tag is a built-in Blazer component that sets the title of the web page.
• 🔄 Components can include C# logic, allowing dynamic rendering based on code execution, such as updating a count on a button click.
• 📝 The 'onclick' handler in components can be linked to a C# method, demonstrating the integration of C# with UI elements.
• 🔧 C# code within components can be separated into a 'code-behind' file for cleaner organization, if preferred.
• 🔄 Components can conditionally render HTML based on C# logic, such as displaying a message when a count exceeds a certain value.
• 🔁 Loops and conditional statements in C# can be used within components to render lists or other repetitive elements.
• 🔧 Components can initialize state in the 'OnInitializedAsync' method, simulating asynchronous operations like API calls.
• 🔧 Parameters can be passed to components as C# properties, allowing customization of their behavior, such as the increment value in a counter.

Q & A

What is the main topic of the video?

The main topic of the video is about components in Blazer and how to use Blazer components to build rich, interactive web UI.

What is a component in the context of Blazer web apps?

A component in Blazer web apps is a reusable piece of web UI that encapsulates the rendering logic for the component and how it handles UI events.

How are components defined in Blazer?

Components in Blazer are defined using Razor syntax, which is a combination of HTML and C#.

What is the purpose of the '@page' directive in a Razor file?

The '@page' directive assigns an address or location for the component, also known as a route, which determines where the component will be rendered in the web app.

What is the 'Page Title' component used for in Blazer?

The 'Page Title' component is a built-in component in the Blazer framework that allows specifying the title for the web page.

How can components be reused in Blazer?

Components can be reused in Blazer by using them as custom HTML tags on the page, allowing for the same component to be used in multiple places within the web application.

How does the counter component in Blazer work?

The counter component in Blazer works by using a C# method that increments the value of the current count each time the button is clicked, causing the component to re-render and display the updated count.

What is the purpose of the 'code-behind' file in Blazer components?

The 'code-behind' file in Blazer components is used to separate the C# code from the Razor markup, making it easier to manage and organize the code for complex components.

How can you pass parameters to components in Blazer?

Parameters can be passed to components in Blazer by defining a C# property with the 'Parameter' attribute, which allows the property to be set from outside the component using an attribute.

What is the special method called on a Blazer component that gets invoked after the component is created?

The special method called on a Blazer component after it is created is 'OnInitializedAsync', which is used to initialize the component's state.

How does the weather component in the video simulate loading data?

The weather component simulates loading data by using 'Task.Delay' to mimic an API call, after which it generates random weather forecast data to display in a table.

Outlines

00:00

🛠️ Introduction to Blazor Components

Daniel Roth introduces Blazor components, explaining that they are reusable pieces of web UI in Blazor web apps. These components encapsulate rendering logic and handle UI events. Components are defined using Razor syntax, a combination of HTML and C#. Daniel demonstrates how to locate Razor files in a Blazor web app project and provides an example with the home component, showing how changing the HTML content updates the page. He also explains the 'page' directive for routing and the 'page title' component for setting the page's title.

05:02

🔄 Reusing Components in Blazor

Daniel illustrates how Blazor components can be reused like custom HTML tags. He shows examples with the 'counter.razor' and 'weather.razor' components, demonstrating how they can be added to the homepage by using their respective tags. This allows the counter and weather forecast components to be rendered on the homepage in addition to their original routes, emphasizing the flexibility and reusability of Blazor components.

10:02

🔍 In-Depth Look at a Counter Component

The video dives deeper into the 'counter.razor' component, explaining its structure and functionality. Daniel points out how Blazor components can contain C# logic alongside HTML markup. He demonstrates how the 'currentCount' variable is used to render the count and how a button's onclick event is handled by a C# method that increments the count. He also shows how to refactor the code into a separate code-behind file, keeping the Razor file clean. Conditional rendering and control flow logic within components are also discussed, using examples of if statements and loops to dynamically render content.

Keywords

💡Blazer components

Blazer components refer to the reusable pieces of web UI that encapsulate rendering logic and UI event handling within the Blazer framework. They are the building blocks of a Blazer web application, allowing developers to create interactive and dynamic web pages. In the video, Daniel Roth demonstrates how to use these components to build a rich, interactive web UI, showing examples like the 'counter' and 'weather' components.

💡Razor syntax

Razor syntax is a combination of HTML and C# used to define Blazer components. It allows developers to embed server-side code within HTML markup, making it a powerful tool for creating dynamic web content. The video script mentions using Razor syntax to define components in '.razor' files, which are then used to render web pages with interactive elements.

💡Component routing

Component routing is the process of assigning a URL address or location to a Blazer component, allowing it to be accessed via a browser. The '@page' directive in Razor syntax is used for this purpose, as demonstrated when the 'home.razor' file is shown with a route that renders the home component when the root of the Blazer web app is accessed.

💡Page title component

The page title component is a built-in feature of the Blazer framework that allows developers to specify the title of a web page. It is used within the Razor syntax to set the title displayed in the browser tab. In the script, the 'page title' is used to change the title from 'home' to 'homepage', showcasing its functionality.

💡Component reusability

Component reusability is the ability to use a defined component in multiple places within a web application. This concept is highlighted in the script when the 'counter' component is added to the homepage in addition to its own route, demonstrating how components can be embedded within other components to create a cohesive user interface.

💡C# logic

C# logic refers to the server-side code written in the C# programming language that can be included within Blazer components to handle logic and state management. The script explains how C# methods can be used within components, such as the 'onclick' handler in the 'counter' component that increments the count and triggers a re-render of the component.

💡Code-behind file

A code-behind file is a separate C# file that contains the logic for a Blazer component, allowing for a cleaner separation between the UI markup and the server-side code. The script describes how to extract C# code blocks from a Razor file into a '.cs' file, creating a 'counter.razor.cs' file that contains a partial class for the component.

💡Conditional rendering

Conditional rendering is the process of dynamically displaying or hiding UI elements based on certain conditions. The script demonstrates this with an 'if' statement in the 'counter.razor' file, which checks the value of 'current count' and conditionally displays a 'P' tag with the message 'you win' when the count exceeds three.

💡For loop

A for loop is a control flow statement used to repeat a block of code a certain number of times. In the context of the video, a for loop is used within the 'counter' component to render a list of 'clicked' items based on the count, showing how loops can be utilized in Razor syntax to generate dynamic content.

💡Component parameters

Component parameters are properties defined in a Blazer component that can be passed as arguments when the component is used. The script explains how to define a parameter with the 'parameter' attribute, as seen with the 'increment amount' property in the 'counter' component, allowing the increment value to be customized when the component is instantiated.

💡Inline code blocks

Inline code blocks are used in Razor syntax to execute C# code within the rendering logic of a component. The script mentions defining a new variable using an inline code block to set the 'increment amount' dynamically, demonstrating the flexibility of mixing C# expressions with HTML markup in Blazer components.

Highlights

Introduction to Blazer components and their role in building interactive web UI.

Components in Blazer encapsulate rendering logic and UI event handling.

Razor syntax is used to define components, combining HTML with C#.

Components are defined in .razor files within the components folder.

The @page directive assigns a route to a component in a Blazer web app.

The <PageTitle> component allows specifying the title for a page.

Demonstration of how to include and reuse components within other components.

Counter.razor example shows a component with a route and rendering logic.

Using C# within components for dynamic rendering and event handling.

Separating C# code from markup using the @code directive.

Razor files are essentially C# classes with HTML rendering logic.

Adding control flow logic like conditionals and loops in components.

Weather forecast component example with dynamic data rendering.

Using the OnInitAsync method for component state initialization.

Passing parameters to components for dynamic behavior.

Using C# expressions for component parameters to control behavior.

Combining C# and HTML for powerful dynamic rendering in Blazer components.

Transcripts

[Music]

hi everyone I'm Daniel Roth from the

Blazer team in this video we're going to

learn all about components and how you

can use Blazer components to build Rich

interactive web UI Blazer web apps are

made up of components a component is a

reusable piece of web UI it encapsulates

the rendering logic for the component

and also how it handles UI events you

define components in Blazer using razor

syntax which is a combination of HTML

and

C razor components are defined in Razer

files and let's take a look at our

project to see where those are at okay

so here's our Blazer web app and we can

see that in this components folder right

here are all of our razor files that

Define the the Blazer components for our

web application counter home weather and

many others here's the home. Riser file

which defines the homepage for our

Blazer web app you remember before that

it had some HTML content and we could

change that HTML content we just save

that and that content then updated on

the page great so lots of HTML here that

makes sense but we've got some other

stuff too so up at the top we can see we

have this at page directive what's that

doing well this is how you can um assign

an address or a location for your

component it's actually we call it a

route you're adding a route for this

component and that's why when we browse

to the root of this Blazer web app we

see the home component render that's why

we get that that content there below we

also have this page title tag and it

looks kind of like an HTML tag but it's

a different color and it's using capital

letters what is that well page page

title is also a component it's a builtin

component in the Blazer framework that

lets us specify the title for the page

so that's why up above here in the tab

we see that it says home that's coming

from this page title component if we

change that to something else like I

don't know homepage and save that that

should then update and there it goes so

now we have homepage in our as our uh

the title for this page cool so you can

use components from other components

using this HTML style syntax all right

let's look at some other examples well

we have multiple other components in

this app like we have counter. Riser

counter. Riser is what's you being used

to define that counter page on the the

Blazer web application if we look at it

we can see again it has a a route so

that's why when we're looking at the

Blazer web app and we browse to slash

counter that we end up on we see this

component rendered all right so that's

cool but if we go back back to home

because counter is just another

component we should be able to let's do

this side by side I'm going to bring up

both apps together there's the

homepage okay so if we do uh uh write a

counter tag and you know the name

matching the the name of the razor file

and let's go ahead and save that we can

see now we have a counter component that

shows up on the homepage if we click the

button we can see that the count goes up

and it's in addition to the counter

that's already at the slash counter

route that counter still works but now

we have another counter on the homepage

uh what else could we do well we also

have a a weather component you know

weather. Riser that's what's defining

this weather uh forecast page over here

on our uh on our web application so we

click on that we can see there's that

table of randomly generated weather data

uh can we add that to our homepage uh

sure let's go to the homepage here and

then add another tag called slwe and

we'll save that into the application and

now we've got a a weather forecast

showing up on the homepage so that's how

easy it is to reuse Blazer components

you just use them as like custom hmill

tags on your page all right let's take a

deeper look at counter. raiser and see

what we have going on here Blazer

components can contain uh C logic in

addition to just you know HTML markup on

this counter page we have a couple

things here we've got uh this P tag and

the P tag is being used to render the

value of the the current count and we're

using this little at character to say

that we'd like to render the value of

this C variable current count below we

have a a button there's a button right

there and this button has an onclick

Handler but instead of pointing to like

some some JavaScript this on click

Handler is actually running a c method

which is defined below so the C method

when it runs you can see that it's

incrementing the value of the current

count field which is just defined up

above and then the component re renders

and it R renders here in the P tag and

then you see the updated value so that's

that's how this counter is actually

working every time we click that button

we're running our our C method so you

can run C code from your uh your your

Blazer components using razor syntax um

now some people don't like having you

know a lot of C code sitting alongside

their their markup um that's okay uh you

can actually move this code block into a

separate file if you'd like if we

actually click on this code code razor

directive there's this little light bulb

that shows up and there's this code

action that will actually extract that

code uh code block and put it in this uh

code behind file over here so now we

have a counter. razor. CS it's just a C

file and we can see that this has

generated for us a counter class and

it's a partial class now what the razor

compiler will do when this app is built

is it we'll take this counter partial

class and combine it with the C class

that gets generated from our counter.

Riser file when you think about a a

Razer file you can really think about it

as just a C class it's a convenient way

to write a C class that captures some

HTML rendering logic in addition to some

some some other code all right so that's

what's happening there so that's a

pattern that you can use I actually

prefer to have all the code in in one

file it's all part of the you know the

UI layer for my application so I prefer

this pattern but feel free to use

whatever makes you happy okay so we def

find members on our on our component

using razor syntax using C what else can

we do well we could also add some like

control flow logic like let's add an an

if statement here like a conditional so

if the current count is greater than

three let's display some HTML and Razer

is really smart about being able to

transition back and forth between C and

HTML we're just going to put a P tag

right in here and we'll render um I

don't know you win I can say that's the

the magic number number where you uh you

win the prize for clicking at least

three times or three times or more all

right so let's go back to our running

application okay so here we're on the

the counter page if I click the button

one two three and then the fourth time

now it's displaying you in at the bottom

so we're conditionally rendering some

markup uh based on some C logic uh we

can do other things like we could have a

loop like let's do a for Loop right here

you know let's add a little I variable

that will initialize a zero and we'll

check for when I is less than whatever

the current count is and just increment

I and then inside this Loop um actually

what we'll do is we'll make a little uh

unordered list right here and wrap that

around our for Loop and then we'll use

the for Loop inside to render a bunch of

list items um we'll just render you know

clicked so we should have the word

clicked rendered for however many times

we've uh We've incremented the count so

let's go ahead and save that and go back

to our running app yeah so the current

count is four and we you can see we

looped uh four times and rendered

clicked for every time we ran that that

Loop if I click again I get another

clicked and so on and so forth okay so

that's how you can add some uh you know

control flow logic using C to to your

Blazer components nice powerful

combination of HTML and C in the weather

page you can actually see that that's

how the weather page is working like in

the weather page we have an if statement

and we're checking to see do we have the

weather forecast data yet have we

successfully loaded it uh if not then it

starts out by displaying a placeholder

and then if we do have the weather

forecast data you can see below that

we're rendering this nice table with all

the the weather details and there's

another loop in here that's looping over

each weather forecast and rendering the

the table rows that make up that table

just rendering each value from our well

rendering each value from our forecast

uh uh data objects down below you can

see where we're initializing the weather

forecast data in this uninitialized

async method so this is a special method

on a Blazer component that gets invoked

uh right after the component is created

so that you can initialize some of its

state and here you can see that we're

first uh you know just running a little

task dot delay to simulate as if we're

going off and doing an API call and then

after that completes we just generate a

bunch of uh weather forecast data

randomly so don't don't use this for

your next uh you know vacation trip

planning this is just random weather

data okay uh so once we have the the

forecast data then the table renders and

we can see that on the the weather page

like if we watch the weather uh table

render let's refresh it one more time

you see initially there I'm pausing it

there's this loading dot dot dot and

then if we let it continue about half a

second later the weather data shows up

all right cool we can also pass

parameters to components like flow data

into your components uh for example

maybe on this counter component instead

of just incrementing by one we want to

be able to spe specify how much the

component uh increments byy with every

click so to do that we just Define a

component parameter and a component

parameter is just a c property so I'm

going to add a a property here called

increment

amount amount we'll spell it right get

set okay and we'll initialize this to be

one by default okay and I want this to

be the value that we increment by so a

current count instead of just always

doing plus plus we'll increment by

whatever the value is of increment

amount now to make this par uh property

an actual parameter I need to add the

parameter attribute okay so now it's a

proper component parameter what does

that mean like how do I use it well if

we go to the home component now where we

have an instance of the counter

component if I start typing increment

amount you can see I get intellisense

and we can specify the value for that

parameter using an attribute like let's

say we want it to increment by by two

instead of by one so if we go to the the

homepage now okay so now if we click on

the click me button yeah instead of

incrementing by one it's now

incrementing by two and all my other

logic that I added is still still

working if we go to the counter at the

SL counter route and I click the button

it's still incrementing by one because

we didn't specify that parameter so it's

just using the the default value and

it's important to note that this this

value that we're specifying for that

parameter it's a full C expression like

if I want to put like this should be 1+

one you know or Let's do let's do

something different OnePlus OnePlus 2

and we save that and go back to our app

and now if we click the counter on the

the homepage you know click now it's

incrementing by three so it actually

evaluated that that c expression for us

if I uh even Define a variable like

let's add a little inline code block

this is how you do inline code blocks in

in in Razer it's like code that's

running in line with the rest of the

rendering logic we could Define a new

variable here let's say this is going to

be 1 plus well we'll just do one plus

one again and then instead of having

this expression we'll actually use that

uh amount variable we get intellisense

awesome we'll save that and now if we go

back to the app and click we can see

it's back to incrementing by by two so

powerful combination of c and HTML uh

we've just seen how you can build Blazer

components using razor syntax uh and

have components that have Dynamic

rendering

logic