>> Hey there friends. Welcome back to
another episode in this Blazor 101 series.
My name is Jeff Fritz,
and we're going to take a look today at how you can
work with forms and data.
Now, input elements inside of our webpage,
were used to seeing the input tag and
select tag to create combo boxes,
text inputs, numeric inputs.
We send that back to a server
through a post-operation to interact with that data,
persist it hopefully to a database, and things are good.
I want to create some interaction between
those so that I can capture data.
In this episode, we're going to take a look at
the form input elements that are available to
you that come with Blazor in the box.
There's some additional things that you can do
there so that you can create a form,
bind to a view model that you can then save to
a service to a database
that will then persist your content for you.
Let's go take a look over at the code and learn more about some of
the cool new input elements
that you can use that come with Blazor.
Here I am looking at my source code for
the Blazing Pizza checkout page.
This is a page that's been built so we can
take in information about
your order and the address
that we're going to deliver your pizza to.
Now, we're used to seeing forms
defined in HTML like they are there on line eight.
Form method equals post action equals
in some address to post our data to.
Let's go take that data and send it to this server location so
that it will persist it to
our Datastore and do some business logic on it.
Figure out what we want to do with our pizza,
with our order, and process it from there.
Well, in Blazor,
we have an object,
we have a tag that we can use called Edit Form
that we prefer to use instead.
You can use the HTML form tag and work with that,
but we prefer to use the Edit Form component.
Now what edit form does is it gives us a way
to load data into a model.
This model is a data transmission object, a DTO,
that we're going to carry from
our Blazor application to that other service,
to that other endpoint that's going to process it.
In this case, we've defined
a delivery address model that we're going to use
to capture the address that we're going
to be sending that order information to.
That makes sense. We're going to bind
and interact with that delivery address,
that I can follow along.
We also have a method down here on valid submit.
Now, on valid submit is an event handler.
It's a method that we will trigger when this form is submitted.
We have our submit button down there on line 21.
Button type equals submit.
We've got some nice formatting here with a CSS class.
It has the text place order.
When this button is clicked,
it's going to submit this form.
When it's submitted, it's going to
perform some validations and execute PlaceOrder.
If I scroll down here,
there's my PlaceOrder method.
My validations will take place,
this will be executed,
and we can go and see it's transmitted to my orders API endpoint,
it gets the information about the order,
and we're able to process it from there.
I think these all make fantastic sense to me.
Let me show you now we have a bunch of
form editor fields that you can use that are a
little bit better than the HTML input and
select tags for you to interact with that will,
of course, give you some additional features
and hook up better to our Edit Form component.
Let me head over to the address editor component and show
you some of those components that we're working with.
You see here input text bind value,
and you see it a bunch of times here for the address,
for line one, the name, the city.
If you continue scrolling down here,
you'll see it's a bunch of input text fields so that we can
receive those data types and interact with them.
Now, in addition to being able to receive
the information about the value for this model object,
the address that's being rendered and
presented here on this component,
we're going to also be able to get some highlights and
some other interactions when those fields are marked as invalid.
The input text component knows how to
interact with the data annotations for
our address class so that we can render appropriate input types.
We can render appropriate size,
and we can create the appropriate validation on those fields.
Let me show you the address type real quick.
Here you see our data annotations for
the size and validation of our address,
maximum lengths of some of these fields,
some fields are required.
That's easy to follow, that's something that we can do.
We know how to do this in our
other .NET components that we work with.
When I look at the checkout then,
coming back to here,
when that address editor component is populated with
the delivery address that's set
up over here and wired up to all of these fields.
We have this nice cascading interaction
where the address that was passed into here is
setup for these text fields that's brought back,
that delivery address is being validated,
and it's the model that we're working on on our edit form.
When it's validated, we're going to
process appropriately how to go and save the order.
Really great stuff that's going to make
editing and building forms for you a lot easier.
There's a handful of
other components out there besides the input text.
I have a link just below in the video
so that you can go to the documentation and learn
more about the other form fields that you can
use in your Blazor applications.
[MUSIC]