Question

目标：
与asp.net mvc 4中的年份和月份的两个下拉列表同步。

问题：
这两个下拉列表是分开的，我想知道如何同步它们？

的信息：
*今天，年和月位于Viewbag内 *如果可能，列表必须位于ViewBag内部非常重要 *请记住，如果您更改年份，月份下拉列表也将更改 *年份列表以最高值开头。列表的底部以最古老的一年开始。

此表包含可用的年份和月份：

--------------
Year    Month
--------------
2000    10
2000    12
2001    1
2001    2
2001    3
2001    4

etc...

string selectedmonth = 1; 
string selectedyear = 2000;



monthlist.Add(new SelectListItem { Selected = "2000" == selectedyear ? true : false, Text = "2000", Value = "2000" });
monthlist.Add(new SelectListItem { Selected = "2001" == selectedyear ? true : false, Text = "2001", Value = "2001" });



monthlist.Add(new SelectListItem { Selected = "1" == selectedmonth ? true : false, Text = "January", Value = "1" });
monthlist.Add(new SelectListItem { Selected = "2" == selectedmonth ? true : false, Text = "February", Value = "2" });
monthlist.Add(new SelectListItem { Selected = "3" == selectedmonth ? true : false, Text = "March", Value = "3" });
monthlist.Add(new SelectListItem { Selected = "4" == selectedmonth ? true : false, Text = "April", Value = "4" });
monthlist.Add(new SelectListItem { Selected = "5" == selectedmonth ? true : false, Text = "May", Value = "5" });
monthlist.Add(new SelectListItem { Selected = "6" == selectedmonth ? true : false, Text = "June", Value = "6" });
monthlist.Add(new SelectListItem { Selected = "7" == selectedmonth ? true : false, Text = "July", Value = "7" });
monthlist.Add(new SelectListItem { Selected = "8" == selectedmonth ? true : false, Text = "August", Value = "8" });
monthlist.Add(new SelectListItem { Selected = "9" == selectedmonth ? true : false, Text = "September", Value = "9" });
monthlist.Add(new SelectListItem { Selected = "10" == selectedmonth ? true : false, Text = "October", Value = "10" });
monthlist.Add(new SelectListItem { Selected = "11" == selectedmonth ? true : false, Text = "November", Value = "11" });
monthlist.Add(new SelectListItem { Selected = "12" == selectedmonth ? true : false, Text = "December", Value = "12" });

ViewBag.YearList = yearlist;
ViewBag.MonthList = monthlist;

Answer 1

您需要使用javascript / jquery来处理.change()下拉列表的SelectedYear事件并更新SelectedMonth列表框，例如通过使用ajax调用服务器方法。如果您使用视图模型并强烈绑定到属性而不是使用ViewBag来处理所有内容，您会发现所有这些都更容易。请注意，由于一年中可能有多个月，因此SelectedMonths属性需要是一个数组。

public class SampleViewModel
{
    public int SelectedYear { get; set; }
    public IEnumerable<int> SelectedMonths { get; set; }
    public IEnumerable<SelectListItem> Years { get; set; }
    public IEnumerable<SelectListItem> Months { get; set; }
}

并在GET方法中，初始化并返回视图模型的实例

[HttpGet]
public ActionResult Edit()
{
    SampleViewModel model = new SampleViewModel()
    {
        SelectedYear = 2001, // set default
        SelectedMonths = new List<int>{ 1, 2 }, // set default based on default year
        Years = new List<SelectListItem>
        {
            new SelectListItem(){ Value = "2000", Text = "2000" },
            new SelectListItem(){ Value = "2001", Text = "2001" }
        },
        Months = new List<SelectListItem>
        {
            new SelectListItem(){ Value = "1", Text = "January" },
            new SelectListItem(){ Value = "2", Text = "February" },
            ....
        }
    };
    return View(model);
}

并在视图中

@model SampleViewModel
....
@using (Html.BeginForm())
{
    ....
    @Html.DropDownListFor(m => m.SelectedYear, Model.Years) 
    ....
    @Html.ListBoxFor(m => m.SelectedMonths, Model.Months)
    ....
}

然后添加一个脚本来处理下拉列表的更改事件

<script type="text/javascript">
    var url = '@Url.Action("FetchMonths")';
    $('#SelectedYear').change(function() {
        $.getJSON(url, { selectedYear: $(this).val() }, function(data) {
            $('#SelectedMonths').val(data);
        });
    });
</script>

将调用以下方法

public JsonResult FetchMonths(int selectedYear)
{
    IEnumerable<int> months = db.yourTable().Where(x => x.Year == selectedYear).Select(x => x.Month);
    return Json(months, JsonRequestBehavior.AllowGet);
}

下拉列表在年份和月份之间同步

1 个答案: