A little databinding goes a long way

Let's kick things off with a nice simple requirement to let someone enter their date of birth, then tell them what day of the week they were born.

Here's a mockup so you know what we're aiming for.

When building something like this I find it useful to tackle the UI first.

Implementing a simple version of the interface first gives you something to run in the browser and a "jumping off point" to start implementing your business logic.

Add a new component

Add a new Blazor component to your project's Pages folder and call it Birthday.razor.

Then replace its contents with this...

@page "/birthday"

<h2>What's your date of birth?</h2>
<input type="text"/>
<button class="btn btn-primary">Submit</button>
<hr />
<h3>You were born on a... </h3>

The @page directive here marks this as a routable component.

That simply means this component acts as a page which you can navigate to in your browser via this url:

https://localhost:xxxxx/birthday

(where xxxxx is the port number your local blazor project launches on when you run it)

Run this now, navigate to /birthday and you should see this starting point for our feature.

Now we're free to concentrate on wiring this up to actually calculate the day of the week when our user enters their date of birth.