>> Hey there. Jeff Fritz here again.
I want to talk to you today about Blazor components.
Now, all of our files in a Blazor project that
have the dotRazor extension are components.
Now, some of those components we can reach
by navigating to an address in our browser.
Some of those we can reuse inside of
other pages and components so that we can access them,
we can reuse their content.
Let's take a look at what we can do with components,
how we turn them into pages in this video,
and how we can pass a parameter
into our components so they become a little bit
more like an HTML tag or a directive as we refer to them
sometimes when we're building with
those various web development frameworks.
Here we are inside of our first Blazor app.
This is the result of
the default template for a Blazor server application.
I'm looking at the index razor file.
We see what looks like a pretty standard razor template.
Hello world. Welcome to your new app.
How is Blazor working for you? Wait a sec.
The SurveyPrompt tag that we see there,
that's not HTML tag,
that's not a directive that I am familiar with.
Where does that come from?
That's a component.
It's highlighted in bold purple here inside of
Visual Studio and I can
see on the left side inside of Solution Explorer,
there is a SurveyPrompt razor file.
In our Blazor applications,
any file that ends with a dotRazor file extension is
a component that can
optionally be referenced inside of another component.
If we look at SurveyPrompt razor,
there's the content of our SurveyPrompt element that'll be
rendered where we saw the SurveyPrompt tag here on-line seven.
We can reuse some of the other content that's shown
here with dotRazor files that we find in our Solution Explorer.
Lets run this application and tinker with some of these and see
what else we can reuse as a component inside of our index page.
There's my application running on
the right side in Microsoft Edge.
Over here on the left, I have Visual Studio and I
can start tinkering with that index page and see what
exactly lights up when I reference various components using
their filename as a tag inside my index page.
Let's try adding a counter. I'll save that.
On the right side, my browser will refresh,
and now the counter page is
embedded inside of my index over on the right side.
That's interesting. I can even put the FetchData element in here,
and we'll get the FetchData page output
inside of my browser there on the right side.
Now, in this case,
these aren't very valid samples.
They aren't something that I really
want to embed inside of my index page on the right.
But we can do some things to make it a little bit more
interesting in reuse and show off some of these features.
Well, let's start with taking a look at
that title attribute that we see on the SurveyPrompt.
That's a title that's being passed in at
some texts that's being submitted into
the SurveyPrompt component and
being rendered inside of our index page on
the right side in the middle of
that div that shows how is Blazor working for you.
Maybe we can add an attribute to our counter that allows me
to change the incrementing count of the counter there.
Instead of incrementing by ones,
we can increment by some other value. How do we do that?
How do we start passing that information into our page,
into our counter.razor component?
I'm going to go over to counter.razor.
Here in this code block that defines the code,
it's being executed for the counter,
and we can see here there's
an on click event handler that is calling increment count.
That increment count is right here.
It increments a currentCount field right here that's being
output right there inside of the currentCount paragraph.
If I want to add an attribute that's going to change this
from incrementing by one here to increment by some other value,
we can add a property,
a public property,
called IncrementBy, and I'll set a default value of one to that,
and I'll update my method here to plus equals IncrementBy.
We'll use that increment operator to increment
and assign by the increments by value,
which for right now is defaulting to the value one.
I want to make that property something that can be assigned,
something that's being passed in from my index page.
To do that, to complete the cycle here,
I just decorate this with the attribute parameter.
That will make IncrementBy a parameter that can be
specified inside of other components,
inside of pages that we want to control how the counter behaves.
I'll save the counter here and it's going to
refresh on the right side and it's still
increments by one because that's the default value being
assigned to the IncrementBy property right here.
I'll go up to index.
Now inside of my counter element,
I'll add a space and start typing
IncrementBy and you see Visual Studio is giving me some help.
It's telling me there's
an IncrementBy attribute here that you can assign,
and if you look closely there,
you'll see it's got the little @ sign next to IncrementBy.
It's telling us that this is a C# attribute that we're
specifying and we're passing a value into our component.
I'll specify IncrementBy five, save that.
It's going to refresh my application,
and now when I click the button,
it increments by five.
If I go over to the counter page where I have
just the counter element appearing here,
I'll click and it still increments just by ones because
that IncrementBy property is not being assigned a different value.
I can control the behavior
two different ways by interacting with this parameter,
by setting it and
consuming it appropriately in different locations.
This gives us a way now that we can
interact with components, reuse them,
take them from more than just a page or the only entry on
a page and reuse them in
multiple places throughout our Blazor application.
I hope you stick around for our next video.
We're going to talk about now how we can do
more with the pages inside of Blazor.
How we can take them and start to define how we
receive and control what URL they're listening to,
and the layout that they're behaving inside of,
the layout that they're presented inside of. Thanks so much.
[MUSIC]