同步年和月之間的DROPDOWNLIST

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); 
}