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.