如何在表單發佈後綁定月份下拉值？

Question

這是我們如何實施級聯下拉式的年和月。選擇年/月後，表格被提交。當提交後查看時，所選年份值將保留（因爲我們在模型中已經處理了該值），但所選月份值不會保留。需要做什麼來堅持價值？

型號

public class MyViewModel 
{ 
    public int? Year { get; set; } 
    public int? Month { get; set; } 

    public IEnumerable<SelectListItem> Years 
    { 
     get 
     { 
      return Enumerable.Range(2000, 12).Select(x => new SelectListItem 
      { 
       Value = x.ToString(), 
       Text = x.ToString() 
      }); 
     } 
    } 
} 

控制器

的HTTPGET和HttpPost行動，

// 
    // GET: /MenuSix/ 

    public ActionResult Index() 
    { 
     var model = new MyViewModel(); 
     return View(model); 
    } 

    public ActionResult Months(int year) 
    { 
     if (year == 2011) 
     { 
      return Json(
       Enumerable.Range(1, 3).Select(x => new { value = x, text = x }), 
       JsonRequestBehavior.AllowGet 
      ); 
     } 
     return Json(
      Enumerable.Range(1, 12).Select(x => new { value = x, text = x }), 
      JsonRequestBehavior.AllowGet 
     ); 
    } 

    // 
    // POST: /MenuSix/ 
    [HttpPost] 
    public ActionResult Index(MyViewModel myViewModel) 
    { 
     var month = myViewModel.Month; //11 
     var year = myViewModel.Year; //2011 
     return View(myViewModel); 
    } 

查看

需要更改此處以保留月份值「Enumerable.Empty（）」？

@model DemoWeb.Models.MenuSix.MyViewModel 
@using (Html.BeginForm()) 
{ 
@Html.DropDownListFor(x => x.Year, new SelectList(Model.Years, "Value", "Text"), "-- select year --") 
@Html.DropDownListFor(x => x.Month, Enumerable.Empty<SelectListItem>(), "-- select month --") 

<div align="center"> 
    <input type="submit" id="valSubmit" value="Save"/> 
</div> 
} 

@section PageScriptsAndCSS{ 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#Year').change(function() { 
      debugger; 
      var selectedYear = $(this).val(); 
      if (selectedYear != null && selectedYear != '') { 
       $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) { 
        var monthsSelect = $('#Month'); 
        monthsSelect.empty(); 
        $.each(months, function (index, month) { 
         monthsSelect.append($('<option/>', { 
          value: month.value, 
          text: month.text 
         })); 
        }); 
       }); 
      } 
     }); 
    }); 
</script> 

}

Answer 1

是的，你需要改變你綁定一個月的下拉的方式。因爲您將它與一個空列表綁定 表單提交後您將無法獲得選定的月份值。我改變了你的代碼。讓我知道它是否符合您的需求。

型號

public class MyViewModel 
{ 
    public int? Year { get; set; } 
    public int? Month { get; set; } 

    public static IEnumerable<int> GetMonthsRangeOf(int year) { 
     return (year ==2011) ? Enumerable.Range(1, 3) : Enumerable.Range(1, 12); 
    } 

    public IEnumerable<SelectListItem> Years { get { 
     return Enumerable.Range(2000, 12).Select(x => new SelectListItem 
     { 
      Value = x.ToString(), 
      Text = x.ToString() 
     }); 

    } } 

    public IEnumerable<SelectListItem> Months 
    { 
     get 
     { 
      IEnumerable<SelectListItem> months = null; 
      if (! this.Year.HasValue) 
      { 
       months = Enumerable.Empty<SelectListItem>(); 
      } 
      else 
      { 
       months = GetMonthsRangeOf(this.Year.Value).Select(x => new SelectListItem 
       { 
        Value = x.ToString(), 
        Text = x.ToString() 
       }); 
      } 

      return months; 
     } 
    } 
} 

控制器

public ActionResult Months(int year) 
    { 
      return Json(
       MyViewModel.GetMonthsRangeOf(year).Select(x => new { value = x, text = x }), 
       JsonRequestBehavior.AllowGet 
      ); 
    } 

    // 
    // POST: /MenuSix/ 
    [HttpPost] 
    public ActionResult About(MyViewModel myViewModel) 
    { 
     var month = myViewModel.Month; //11 
     var year = myViewModel.Year; //2011 
     return View(myViewModel); 
    } 

查看

@model TestFreezeMVC.ViewModel.MyViewModel 
@using (Html.BeginForm()) 
{ 

@Html.DropDownListFor(x => x.Year, new SelectList(Model.Years, "Value", "Text"), "-- select year --") 

@Html.DropDownListFor(x => x.Month, new SelectList(Model.Months, "Value", "Text"), "-- select month --"); 


<div align="center"> 
    <input type="submit" id="valSubmit" value="Save"/> 
</div> 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#Year').change(function() { 
      var selectedYear = $(this).val(); 
      if (selectedYear != null && selectedYear != '') { 
       $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) { 
        var monthsSelect = $('#Month'); 
        monthsSelect.empty(); 
        $.each(months, function (index, month) { 
         monthsSelect.append($('<option/>', { 
          value: month.value, 
          text: month.text 
         })); 
        }); 
       }); 
      } 
     }); 
    }); 

</script> 

建議如果我做了w^rong ..