如何使用 C# 在 ASP.NET MVC 3 中实现级联下拉菜单？

使用C#在ASP.NET MVC 3中实现级联下拉菜单：完整指南

在ASP.NET MVC 3中创建级联下拉菜单时，可能会遇到过时的解决方案或在该版本中已弃用的命令，这可能会让人不知所措。本指南提供了一种分步方法，使用C#创建级联下拉菜单，确保与MVC 3兼容。

模型设计

任何MVC应用程序的基础都是模型。在本例中，我们将创建一个名为MyViewModel的模型来表示下拉菜单的数据：

<code class="language-csharp">public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }

    // 第一个下拉菜单的年份选项集合
    public IEnumerable Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}</code>

构建控制器

控制器充当模型和视图之间的中介。在这里，我们定义一个操作来使用年份填充第一个下拉菜单，另一个操作根据所选年份提供月份：

<code class="language-csharp">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
        );
    }
}</code>

创建视图

视图显示应用程序的用户界面。在本例中，我们使用Razor语法定义两个下拉菜单：一个用于选择年份，另一个用于选择月份：

<code class="language-csharp">@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x => x.Year,
    new SelectList(Model.Years, "Value", "Text"),
    "-- 选择年份 --"
)

@Html.DropDownListFor(
    x => x.Month,
    Enumerable.Empty(),
    "-- 选择月份 --"
)

<script>
    $('#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></code>

这段JavaScript代码在更改所选年份后触发对控制器操作Months的AJAX调用。然后，它使用返回的JSON数据使用适当的月份填充第二个下拉菜单。

结论

这种方法提供了一种清晰简洁的方法，可以使用C#在ASP.NET MVC 3中实现级联下拉菜单。通过遵循这些步骤，您可以轻松创建用户友好且响应迅速的界面来管理分层数据。

以上是如何使用 C# 在 ASP.NET MVC 3 中实现级联下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！