Wire up the submit button
At the moment our component is basically just markup.
To actually make it work we need to do a few things:
- Wire up the text input to a field (so we can capture the DOB the user enters)
- Wire up the Submit button so it triggers the "day of week" calculation
- Use binding to display the calculated day of week
1. Wire up the text input
We can use Blazor's 2-way binding syntax to wire our text input up to a field.
The idea is, whatever the user types into the field will be automatically captured into our field.
That way, when the user ultimately clicks the Submit button we can read that value and use it for our calculation.
Update the text input in Birthday.razor as follows:
<input type="text" @bind="dob"/>
We've added @bind
and pointed it at a field called dob
.
Now to create that field.
Add a @code
block to the bottom of your component as follows:
@code {
private string dob = "";
private string day;
}
Now, when the user enters a value in the text input field dob
will be updated with that value.
We've also added the day
field ready to store the day of the week (when we work it out!)
2. Wire up the submit button
Now it's time to hook up the Submit button to do two things:
- Run the "day of week" calculation
- Update the
day
field with the result
First, create a new Submit
method in the @code
section of your component.
@code {
private string dob = "";
private string day;
// add this
private void Submit()
{
}
}
Then wire it up to your button using @onclick
:
<button class="btn btn-primary" @onclick="Submit">Submit</button>
Now every time someone clicks Submit our Submit
method will be invoked.
Note the
@
in@onclick
This is important because it enables you to wire up a C# method to be invoked when the button is clicked.
If you omit the
@
then your method will never be invoked because the browser would be looking for a JavaScriptSubmit
method, rather than theSubmit
method in your C# code.
Now to implement a simple day of week calculation. Update the Submit
function as follows:
private void Submit()
{
if (dob != null)
{
var isValid = DateTime.TryParse(dob, out var date);
if (isValid)
{
day = date.DayOfWeek.ToString();
}
}
}
First we check the dob
field isn't null (otherwise we'd run into a nasty exception if we clicked Submit without entering a date of birth).
Then we attempt to parse the entered value as a date.
At this point we may or may not end up with a valid date (depending on what the user typed in).
If the date is a valid DateTime
we get the day of week for that date and assign it to our day
field.
3. Use binding to show the day of week
Finally, we can now tell the user what day there were born!
Replace this markup:
<h3>You were born on a... </h3>
With this:
@if (day != null)
{
<p>You were born on a... @day!</p>
}
day
is null to start with so it's a good idea to check for null here.
If we omitted this check then tried to use day
in our markup we'd run into an exception.
Otherwise this simply uses one way binding to display the value of day
(interpolated with our markup).