如何根据下拉列表选择使用值更新部分视图答案

【问题标题】：How to update partial view with value depending on dropdown list choice如何根据下拉列表选择使用值更新部分视图
【发布时间】：2019-05-08 19:20:26
【问题描述】：

我在局部视图中有一个下拉菜单，需要根据第一个视图中的选择更改同一局部视图中的另一个下拉菜单。

局部视图中的下拉菜单：

<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 应该是什么。

这是 Timesheet 控制器中的 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 的选定值传递回 Timesheet 控制器操作以更新局部视图

【问题讨论】：

标签： javascript c# jquery ajax asp.net-mvc

【解决方案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.Action 生成的 url。我还更改了.load 的第二个参数，所以现在它传递 val 而不是将其连接到 url 字符串的末尾。

现在当第一个下拉值选择改变时，TimesheetModalAction 函数被成功调用，新的ProjectId 被传递。

【讨论】：