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:

  1. Wire up the text input to a field (so we can capture the DOB the user enters)
  2. Wire up the Submit button so it triggers the "day of week" calculation
  3. 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:

  1. Run the "day of week" calculation
  2. 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 JavaScript Submit method, rather than the Submit 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).

Two-way Binding