How to update partial view with value depending on dropdown list choice

Question

I have a dropdown menu within a partial view, that needs to change another dropdown menu in the same partial view depending on the selection from the first one.

The dropdowns within the partial view:

<div class="form-inline">
    <div class="form-group">
        @if (Model != null)
        {
            <label asp-for="ProjectId">Projects</label>
            <select asp-for="ProjectId" asp-items="Model.Projects" class="form-control" style="width: 195px; margin-right: 5px;" id="ProjectId"></select>

            <label asp-for="RoleId">Project Role</label>
            <select asp-for="RoleId" asp-items="Model.ProjectRoles" class="form-control" style="width: 160px !important;" id="RoleId"></select>
        }
    </div>
</div>

Javascript function also within the partial view:

<script>
        $(function(){
            $("#Projects").change(function(e){
                var val=$(this).val();
                $("#myTimesheetModal").load("/Timesheet/TimesheetModalAction/"+val);
            });
        });  
</script>

I am not sure what #myTimesheetModal is supposed to be.

Here is the TimesheetModalAction within the Timesheet controller:

public IActionResult TimesheetModalAction(int projectId)
{
    AddTimesheetViewModel addTimesheetViewModel = new AddTimesheetViewModel();

    //unnecessary code redacted
    //use the projectId here

    return PartialView("_TimesheetPartialModal", addTimesheetViewModel);
}

This code works the first time it's reached with a button press, but I can't figure out how to get back to this function with the new selected value of ProjectId

This code is from the index page, where the partial view is rendered from initially:

<a class="btn btn-xs btn-primary pull-right" asp-action="TimesheetModalAction" asp-controller="Timesheet" style="margin-right:8px;" data-toggle="modal" data-target="#myTimesheetModal">Add Time</a>

<div class="modal fade" id="myTimesheetModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            @Html.Partial("_TimesheetPartialModal", new AddTimesheetViewModel())
        </div>
    </div>
</div>

So as far as I can tell I am not properly using the Javascript function to pass the selected value of ProjectId back to the Timesheet controller action in order to update the partial view

Answer 1

I changed the javascript function to this:

$(function(){
    $("#ProjectId").change(function(e){
        var val=$(this).val();
        var url='@Url.Action("TimesheetModalAction","Timesheet")';
        $("#myTimesheetModal").load(url, { projectId: val });
    });
});

and now it works. #Project is now #ProjectId and I changed the .load function to take a url generated with Url.Action . I also changed the second parameter of .load so now it passes the val instead of concatenating it onto the end of the url string.

Now when the first dropdown value selection is changed, the TimesheetModalAction function is successfully called, with the new ProjectId being passed through.