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 >
    <select id="selecteerPeriode" @onchange="@(() => OnChange.InvokeAsync(@item.Id))" >
        @*<select  >*@
            <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();
        }
   }

CodePudding user response：

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 >
    <select id="selecteerPeriode" @onchange="SelectedItemChanged" >
        ...
    </select>
</div>

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

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