Problem With Handling OnChangeEvent On Select Element In Blazor

I am Working On A Blazor 8 Project . I am Unable get the Courses (on the basis of Specialization Id) In Course Select Element and also As With @bind cannot use @onChange Event Together

HandleSpecilaizationOnChangeEvent Not Getting Called in this way. but With @onchange it is working..

below Is the Code Please Help.

Child Component

<section><div class="row"><div class="col-4"><label>Name</label><input class="form-control" type="text" @bind="Model.Name" /></div><div class="col-4"><label>Gender</label><select class="form-control" @bind="Model.Gender"><option value="0">Select</option>                @foreach (var gender in Genders)                {<option value="@gender">@gender</option>                }</select></div><div class="col-4"><label>Age</label><input class="form-control" type="number" @bind="Model.Age" /></div><div class="col-4"><label>Contact No</label><input class="form-control" type="text" @bind="Model.ContactNo" /></div><div class="col-4"><label>Specialization </label><select class="form-control" @bind="Model.Specialisation"><option value="0">Select</option>                @foreach (var Specialization in Specializations)                {<option value="@Specialization.Key">@Specialization.Value</option>                }</select></div><div class="col-4"><label>Course</label><select class="form-control" @bind="Model.Course"><option value="0">Select</option>                @if (Courses != null)                {                    @foreach (var course in Courses)                    {<option value="@course.Key">@course.Value</option>                    }                }</select></div></div>    @if (Id == null)    {<div class="row mt-5"><div class="col-6"><button type="submit" @onclick="HandleSave" class="btn btn-outline-primary">Save</button></div></div>    }    else    {<div class="row mt-5"><div class="col-6"><button type="submit" class="btn btn-outline-warning">Update</button></div></div>    }</section>@code {    [Parameter] public StudentModel Model { get; set; } = new StudentModel();    [Parameter] public string? Id { get; set; }    [Parameter] public List<string> Genders { get; set; } = [];    [Parameter] public Dictionary<int, string> Specializations { get; set; } = [];    [Parameter] public Dictionary<int, string> Courses { get; set; } = [];    [Parameter] public EventCallback OnSpecialisationChangeEvent { get; set; }    [Parameter] public EventCallback OnHandleSave{ get; set; }    public async Task HandleSpecilaizationOnChangeEvent(ChangeEventArgs value)    {        Model.Specialisation =value!.ToString()!;        await OnSpecialisationChangeEvent.InvokeAsync(Model.Specialisation);    }    public async Task HandleSave()    {        await OnHandleSave.InvokeAsync();    }}

Parent Component

@page "/Add"@page "/Add/{Id}"@using BlazorApp1.Models@using BlazorApp1.Services@rendermode InteractiveServer@inject IStudentService service<section class="container">    @if (Id == null)    {<span>Add Student Record</span>    }    else    {<span>Edit Student Record</span>    }<UserForm Model="StudentModel" Id="@Id" Genders="@Genders"              Specializations="@Specializations" OnSpecialisationChangeEvent="@HandleSpecializationChangeEvent"              Courses="@Courses" OnHandleSave="@HandleValidSubmit"  /></section>@code {    [Parameter] public string? Id { get; set; }    private StudentModel StudentModel { get; set; } = new StudentModel();    private List<string> Genders = [];    private Dictionary<int, string> Specializations = [];    private Dictionary<int, string> Courses = [];    protected override async Task OnInitializedAsync()    {        Genders = await service.GetGenders();        Specializations = await service.GetSpecialisations();        if (Id is not null)        {            StudentModel = await service.FetchStudentDetails(int.Parse(Id));            await HandleSpecializationChangeEvent(Id);        }    }    private async Task HandleSpecializationChangeEvent(Object e)    {        if (e is ChangeEventArgs changeEventArgs)        {            string selectedValue = changeEventArgs.Value?.ToString()!;            if (!string.IsNullOrEmpty(selectedValue))            {                if (int.TryParse(selectedValue, out int SpecializationId))                {                    if (SpecializationId != 0)                    {                        Courses = await service.GetCourses(SpecializationId);                    }                    else                    {                        Courses.Clear();                    }                }            }        }        else        {            Courses = await service.GetCourses(int.Parse(e.ToString()!));        }    }    private async Task HandleValidSubmit()    {        var res = await service.SaveCourseDetails(StudentModel);    }} public class StudentModel {     public int Id { get; set; }      [Required] public string Name { get; set; } = string.Empty;     [Required] public int Age { get; set; }      [Required] public int ContactNo { get; set; }     [Required] public string Gender { get; set; } = "0";     [Required] public string Specialisation { get; set; } = "0";     [Required] public string Course { get; set; } = "0"; }

there are two scenarios Direct Add(Problem) and Edit Mode (Working Fine)

On Direct Mode , When I change the Specialization , its relevant data Should be Populated On Course Select List..

also I My OnInitializedAsync Methods Runs Two Times .

Please Help.