MVC4 jquery多个下拉列表

时间:2015-10-06 19:37:39

标签: c# jquery asp.net-mvc-4 jquery-ui dropdownlistfor

我正在使用Jquery构建我的第一个mvc 4应用程序,我正在尝试使用我的第一个下拉列表中的所选项目来获取第二个下拉列表中的项目列表。在我的上一个下拉列表中,我想使用第二个下拉列表中的选定项目作为我的上一个下拉列表。

使用我当前的代码,我可以获取数据并返回我的partialView,只需选择一周。

我想给WeekChange方法4个参数,selectedCompany,selectedProject,selectedSubProject和week来获取我的数据。调用此方法的按钮是一个更好的主意,因为有很多选择。

以下是我的观点的一部分(HoursReportViewModel):

     @Html.DropDownListFor(m => m.Week, Model._listOfWeeks, new { @onchange = "WeekChange(this.value)" })


    @Html.Label("Company:")
@Html.DataListForListBoxFor(model => model.selectedCompany.Name, Model._companies, new Dictionary<string, object>() { { "class", "form-control" } })
@Html.HiddenFor(model => model.selectedCompany);


@Html.Label("Project:")
@Html.DataListForListBoxFor(model => model.selectedProject.Name, Model._projects, new Dictionary<string, object>() { { "class", "form-control" } })
  @Html.HiddenFor(model => model.selectedProject);


@Html.Label("SubProject:")
@Html.DataListForListBoxFor(model => model.selectedSubProject.Name, Model._subProjects, new Dictionary<string, object>() { { "class", "form-control" } })
  @Html.HiddenFor(model => model.selectedSubProject);


@Html.Partial("~/Views/UrenOverzicht/UrenPartial.cshtml", Model);

脚本:

<script type="text/javascript">

    function WeekChange(value) {
        var week = parseInt(value);
        var year = @Model.Year;
        $('#Week').val(week);

        $.ajax({
            url: '@Url.Action("HoursReportPartial", "HoursReport")',
            data: 'jaar=' + jaar + '&week=' + week,
            type: 'get',
            cache: false,
            success: function(data) {
                $('.rightReportPartial').html(data);
            }
        });
    }



</script>

我的ViewModel:

    public int Week { get; set; }
    public IEnumerable<SelectListItem> _listOfWeeks { get; set; }

    public List<SelectListItem> _companies { get; set; }
    public Company selectedCompany { get; set; }

    public List<SelectListItem> _projects { get; set; }
    public Project selectedProject { get; set; }

    public List<SelectListItem> _subProjects { get; set; }
    public Subproject selectedSubProject { get; set; }

最后我在控制器中的方法:

        [HttpGet]
    public ActionResult HoursReportPartial(int year, int week)
    {
        var hoursViewModel = GetHoursReportViewModel(year, week);
        return PartialView("~/Views/HoursReport/HoursPartial.cshtml", hoursViewModel);
    }

0 个答案:

没有答案