how to bind month drop down value after form post? - asp.net

Question

This is how we implement cascade drop down for year and month. After selecting year/month the form is submitted. When the View back after Submit, the selected Year value is persist (as we have handling for this in Model), but the selected Month value is not persist. What need to do to persist the value?
Model
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()
});
}
}
}
Controller
The HttpGet and HttpPost action,
//
// 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);
}
View
What need to change here to persist month value "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

Yes, you need to change the way you bind month's dropdown. As, you bind it with an empty list
You would not get the selected month value after form submit. I have changed your code in my way. let me know if it fits to your need.
Model
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;
}
}
}
Controller
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);
}
View
#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>
Suggest if I did something wrong..