Как обновить частичное представление со значением в зависимости от выбора выпадающего списка

Question

У меня есть раскрывающееся меню в частичном представлении, которое требует изменения другого раскрывающегося меню в том же частичном представлении в зависимости от выбора из первого.

Раскрывающиеся списки в частичном представлении:

<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 также в частичном представлении:

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

Я не уверен, что #myTimesheetModal должнобыть.

Вот действие TimesheetModalAction в контроллере расписаний:

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

    //unnecessary code redacted
    //use the projectId here

    return PartialView("_TimesheetPartialModal", addTimesheetViewModel);
}

Этот код работает в первый раз, когда он достигается нажатием кнопки, но я не могу понять, как вернуться к этомуфункция с новым выбранным значением ProjectId

Этот код взят со страницы индекса, где частичное представление визуализируется изначально:

<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>

Так, насколько ямогу сказать, что я неправильно использую функцию Javascript для передачи выбранного значения ProjectId обратно в действие контроллера расписания для обновления частичного представления

Answer 1

Я изменил функцию javascript на это:

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

и теперь она работает.#Project теперь #ProjectId, и я изменил функцию .load, чтобы получить URL, сгенерированный с помощью Url.Action.Я также изменил второй параметр .load, поэтому теперь он передает значение val вместо конкатенации его в конец строки URL.

Теперь, когда изменяется выбор первого выпадающего значения, функция TimesheetModalActionуспешно вызван, с новым ProjectId, проходящим через.