Yesterday, I watched another five minutes of the intro-to-Blazor video I found the day before yesterday.

Following up on this, App.razor looks like so:

<Router AppAssembly="@typeof(App).Assembly">
   <Found Context="routeData">
      <RouteView RouteData"@routeData"
            DefaultLayout="@typeout="@typeof(MainLayout)" />
   </Found>
   <NotFound>
      <LayoutView Layout="@typeof(MainLayout)">
         <p>Sorry, there's nothing at this address.</p>
      </LayoutView>
   </NotFound>
</Router>

 
 

In another example, Forecast.razor starts out like so:

@page "/"
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PinnedLocationsService PinnedLocationsService

 
 

@page above denotes what is routable while @code { lets you break into C# code right there in a razor view. A call out to TemperatureUnitPicker.razor in a .cshtml file looks like this:

<TemperatureUnitPicker @bind-TemperatureUnit="temperatureUnit" />

 
 

The .razor files may have "code behinds" so to speak. You just make a .cs file with the same name as the razor file only with .cs on the end so that it ends in razor.cs. Append "Base" on the end of the default name for the class and make it derive from ComponentBase. Then loop it in at the .razor file like so:

@inherits TemperatureUnitPickerBase

 
 

An onclick event midstream in an input tag:

@onclick="SwitchTemperatureUnit"

 
 

Loop in a using statement in a .cshtml file up top like so:

@using System.Threading.Tasks

 
 

Make an input that is ultimately a select list perhaps???

<input list="locations"

 
 

"locations" above is filled in like this:

<datalist id="locations">
   @foreach (var location in locations.Take(10))
   {
      <option value="@CityState(location)"></option>
   }
</datalist>