同步年和月之间的DROPDOWNLIST [英] Sync Between Year and Month for Dropdownlist

问题描述

目标：结果
同步两个DropDownList的是对年份和月份在asp.net mvc的4。

问题：结果
这两个DropDownList的是分开的，我不知道如何将它们同步？

信息：结果
*今天，年份和月份分别位于Viewbag内。结果
*它的列表必须ViewBag内，如果可能的话是很重要的。结果
*请记住，如果你更改年，月供将DropDownList也将发生变化。结果
*在今年的名单开始的最高值。列表的底部开始从最早的一年。

这表可用年份和月份：

  --------------
年月
--------------
2000 10
2000 12
2001年1
2001年2
2001年3
2001年4等等...
 

---

 字符串selectedmonth = 1;
字符串selectedyear = 2000;monthlist.Add（新SelectListItem {？选择=2000== selectedyear真：假，文本=2000，值=2000}）;
monthlist.Add（新SelectListItem {？选择=2001=​​= selectedyear真：假，文本=2001，值=2001}）;monthlist.Add（新SelectListItem {选择=1== selectedmonth真的？假的，文本=一月，值=1}）;
monthlist.Add（新SelectListItem {选择=2== selectedmonth真的？假的，文本=二月，值=2}）;
monthlist.Add（新SelectListItem {选择=3== selectedmonth真的？假的，文本=三八，值=3}）;
monthlist.Add（新SelectListItem {选择=4== selectedmonth真的？假的，文本=四月，值=4}）;
monthlist.Add（新SelectListItem {选择=5== selectedmonth真的？假的，文本=五一，值=5}）;
monthlist.Add（新SelectListItem {选择=6== selectedmonth真的？假的，文本=六一，值=6}）;
monthlist.Add（新SelectListItem {选择=7== selectedmonth真的？假的，文本=七月，值=7}）;
monthlist.Add（新SelectListItem {选择=8== selectedmonth真的？假的，文本=八一，值=8}）;
monthlist.Add（新SelectListItem {选择=9== selectedmonth真的？假的，文本=九月，值=9}）;
monthlist.Add（新SelectListItem {选择=10== selectedmonth真的？假的，文本=十月，值=10}）;
monthlist.Add（新SelectListItem {选择=11== selectedmonth真的？假的，文本=月，值=11}）;
monthlist.Add（新SelectListItem {选择=12== selectedmonth真的？假的，文本=十二月，值=12}）;ViewBag.YearList = yearlist;
ViewBag.MonthList = monthlist;
 

解决方案

您需要使用JavaScript / jQuery来处理 .change（）事件的 SelectedYear 下拉列表，并通过调用用ajax的服务器方法更新 SelectedMonth 列表框，例如。如果你使用一个视图模型，并强烈绑定到你的属性，而不是使用 ViewBag 的一切，你会发现这一切更加容易。需要注意的是，因为你可以有多个月的一年，你的 SelectedMonths 属性需要是一个数组。

 公共类SampleViewModel
{
    公众诠释SelectedYear {搞定;组; }
    公共IEnumerable的＆LT; INT＆GT; SelectedMonths {搞定;组; }
    公共IEnumerable的＆LT; SelectListItem＆GT; {年获得;组; }
    公共IEnumerable的＆LT; SelectListItem＆GT; {月获得;组; }
}
 

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

  [HTTPGET]
公众的ActionResult编辑（）
{
    SampleViewModel模式=新SampleViewModel（）
    {
        SelectedYear = 2001，//设置默认
        SelectedMonths =新的List＆LT; INT＆GT; {1，2}，//设置默认基于默认年
        年=新的List＆LT; SelectListItem＆GT;
        {
            新SelectListItem（）{值=2000，文字=2000}，
            新SelectListItem（）{值=2001，文字=2001}
        }，
        个月=新的List＆LT; SelectListItem＆GT;
        {
            新SelectListItem（）{值=1，文本=1月。}，
            新SelectListItem（）{值=2，文本=二月}，
            ....
        }
    };
    返回查看（模型）;
}
 

和视图

  @model SampleViewModel
....
@using（Html.BeginForm（））
{
    ....
    @ Html.DropDownListFor（M = GT; m.SelectedYear，Model.Years）
    ....
    @ Html.ListBoxFor（M = GT; m.SelectedMonths，Model.Months）
    ....
}
 

然后添加一个脚本来处理的DropDownList的change事件

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    VAR URL ='@ Url.Action（FetchMonths）';
    $（'＃SelectedYear'）。改变（函数（）{
        $ .getJSON（URL，{selectedYear：$（本）.VAL（）}，功能（数据）{
            $（'＃SelectedMonths'）VAL（数据）。
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

这将调用下面的方法

 公共JsonResult FetchMonths（INT selectedYear）
{
    IEnumerable的＆LT; INT＆GT;个月= db.yourTable（），其中（X =＆GT; x.Year == selectedYear）。选择（X =＆GT; x.Month）;
    返回JSON（月，JsonRequestBehavior.AllowGet）;
}
 

Goal:
Sync with two dropdownlist that is for year and month in asp.net mvc 4.

Problem:
These two dropdownlist are separated and I wonder how to sync them?

Info:
*Today, year and month are located inside of Viewbag.
*It is important that the list must be inside of ViewBag, if possible.
*Please remember that if you change the year, the dropdownlist for month also will be changing.
*The list of the year starts with the highest value. THe bottom of the list begins with the oldest year.

This the table with available year and month:

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

解决方案

You need to use javascript/jquery to handle the .change() event of the SelectedYear dropdown and update the SelectedMonth listbox, for example by calling a server method using ajax. You will find all this easier if you use a view model and strongly bind to your properties rather than using ViewBag for everything. Note that since you can have multiple months for a year, your SelectedMonths property needs to be an array.

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

and in the GET method, initialize and return an instance of the view model

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

and in the view

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

Then add a script to handle the change event of the dropdownlist

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

which would call the following method

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

这篇关于同步年和月之间的DROPDOWNLIST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！