使用C#在ASP.NET MVC3中创建级联下拉菜单的最简单方法
使用C#在ASP.NET MVC3中创建级联下拉菜单的最简单方法
提问于 2011-03-31 17:10:02
我想使用MVC3 (最好是Razor)和C#在级联中创建两个DropDownList。
我想有一个下拉列表，你可以选择年份和另一个，你可以选择一个特定的一组月份取决于所选的年份。
让我们简单地说。当我在下拉列表" year“中选择当前年份(即2011)时，下拉列表" month”将填充当前月份(即3月)之前的月份。对于其他情况(其他年份)，则不受限制。此外，在选择下拉列表"year“中的任何元素之前，”阻塞“下拉列表"month”会更好。
我已经在互联网上寻找了一些解决方案，使用jQuery，甚至是自制的方法，但它们都引用了MVC的过去版本，并且一些命令在MVC3中被弃用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-03-31 17:21:51
与往常一样，您可以从模型开始：
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()
});
}
}
}然后是一个控制器：
public class HomeController : Controller
{
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
);
}
}最后是一个视图：
@model AppName.Models.MyViewModel
@Html.DropDownListFor(
x => x.Year,
new SelectList(Model.Years, "Value", "Text"),
"-- select year --"
)
@Html.DropDownListFor(
x => x.Month,
Enumerable.Empty<SelectListItem>(),
"-- select month --"
)
<script type="text/javascript">
$('#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>显然，您会注意到，在我的示例中，我已经对所有值进行了硬编码。您应该通过使用当前年、当前月份等概念来改进此逻辑，甚至可以从存储库获取这些值，等等。但为了演示的目的，这应该足以让您走上正确的道路。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5497524
复制相关文章
相似问题