这就是我们实现年和月级联下拉的方式。选择年/月后,表格被提交。当提交后查看返回时,选定的年份值是持久的(因为我们在模型中对此进行了处理),但选定的月份值不是持久的。需要做什么来保持价值?
模型
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>
}