How do I select the selected item (Id) in the dropdown in a Razor-component?

Question

I have a Razor page with a child-Razor-component with a dropdown, with selected items.

But how do I select the selected item in the dropdown?

The Razor Childcomponent:

<div class="col-4 selection">
    <select id="selecteerPeriode" @onchange="@(() => OnChange.InvokeAsync(@item.Id))" class="form-control">
        @*<select  class="form-control">*@
            <option value="">-- Select period --</option>
        @foreach (var item in Model.Index)
        {
            string display = $"{@item.Year} week {@item.Week}";
            <option value="@item.Id">@item.Description</option>
        }
    </select>
</div>

In the Razor-page:

<TopListSelect Model=@selectModel ListName="toplist" OnClick="ClickHandler" OnChange="SetSelectedPeriod" />

...and: (The message needs the Id of the dropdown)

    public async Task SetSelectedPeriod(string message)
    {
        if (selectModel != null)
        {

            int selectedValue;
            int.TryParse(message, out selectedValue);
            if (selectedValue > 0)
                selectedValue--;
            ...
            await UpdateViewModel();
        }
   }

Answer 1

The @onchange EventCallback will pass a ChangeEventArgs object to your callback method. ChangeEventArgs has a Value property that contains the select item's value.

<div class="col-4 selection">
    <select id="selecteerPeriode" @onchange="SelectedItemChanged" class="form-control">
        ...
    </select>
</div>

@code {
    [Parameter]
    public EventCallback<string> OnChange { get; set; }

    private async Task SelectedItemChanged(ChangeEventArgs args)
    {
        await OnChange.InvokeAsync((string)args.Value);
    }
}