Como cascatear uma multiselect list baseada na seleção de um Dropbox com Asp.net core razor

Front-end
#1

Preciso de ajuda para criar um controle dinâmico. Sou iniciante portanto… Problema: A pagina tem um selectlist que mostra os registros da tabela Jobs retornando o JobId no post. Preciso capturar o id na seleção para executar uma query e pegar a data do mesmo a querry deverá retornar as pessoas que tem agenda com a mesma data para um multiselectlist para selecionar as pessoas do “TEAM”. é uma relação muitos para muitos nas tabelas Team, Volunteers e a tabela de normalização TeamVolunteer.

model:

public class CreateTeam : PageModel
{
    private readonly SementesApplicationContext _context;
[BindProperty]
public Team Team { get; set; }
public Job JobSeek { get; set; }
public CreateTeam(SementesApplicationContext context)
{
    _context = context;
}

    public IActionResult OnGet()
    {


        var ListJobs = from j in _context.Job
                        .Include(k => k.Entity)
                        .OrderBy(k => k.Entity.EntityName)
                       select j;

        ViewData["JobId"] = new SelectList(ListJobs, "JobId", "JobDay", "Entity.EntityName", "Entity.EntityName");




        return Page();
    }
    public async Task<JsonResult> GetVoluntters(int jobID)
    {
        JobSeek = await _context.Job.FindAsync(jobID);
        var date = JobSeek.JobDay;
        var period = JobSeek.JobPeriod;
        var ListVolunteers = from v in _context.Volunteer
                             join s in _context.Schedule on v.VolunteerId equals s.VolunteerId
                             where (date==s.TSDate)&&(period==s.TSPeriod)
                             select new
                             {
                                 v.VolunteerId,
                                 v.VName
                             };
        ViewData["VolunteerId"] = new MultiSelectList(ListVolunteers, "VolunteerId", "VName");

        return new JsonResult(ViewData);
    }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }
        _context.Team.Add(Team);
        await _context.SaveChangesAsync();
        foreach (int v in Team.Volunteers)
        {
            var emptyTeamVolunteer = new TeamVolunteer
            {
                VolunteerId = v,
                TeamId = Team.TeamId
            };

            _context.TeamVolunteer.Add(emptyTeamVolunteer);
        }
        await _context.SaveChangesAsync();
        return RedirectToPage("./Index");
    }
    }

Pagina:

`@page
    @model TeamApplication.CreateTeam
    @{
        ViewData["Title"] = "Team Create";
    }
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">

                <label asp-for="Team.JobId" class="control-label"></label>

                <select asp-for="Team.JobId" class="form-control" asp-items="ViewBag.JobId"></select>
            </div>

            <div class="form-group">
                <label asp-for="Team.Volunteers" class="control-label"></label>
                <select asp-for="Team.Volunteers" class="form-control" asp-items="ViewBag.VolunteerId"></select>

            </div>

            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
          <script>
            $(function () {
                $("#Team.JobId").on("change", function () {
                    var JobId = $(this).val();
                    $("#Team.Volunteers").empty();
                    $("#Team.Volunteers").append("<option value=''>Select Volunteer</option>");
                    $.getJSON(`?handler=Tem.Volunterrs&JobId=${JobId}`, (data) => {
                        $.each(data, function (i, item) {
                            $("#Team.Volunteers").append(`<option value="${item.VolunteerId}">${item.VName}</option>`);
                        });
                    });
                });
            });
        </script>

    }