使用C#在ASP.NET MVC 3中實現(xiàn)級聯(lián)下拉菜單：完整指南

在ASP.NET MVC 3中創(chuàng)建級聯(lián)下拉菜單時，可能會遇到過時的解決方案或在該版本中已棄用的命令，這可能會讓人不知所措。本指南提供了一種分步方法，使用C#創(chuàng)建級聯(lián)下拉菜單，確保與MVC 3兼容。

模型設(shè)計

任何MVC應(yīng)用程序的基礎(chǔ)都是模型。在本例中，我們將創(chuàng)建一個名為MyViewModel的模型來表示下拉菜單的數(shù)據(jù)：

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()
            });
        }
    }
}

構(gòu)建控制器

控制器充當(dāng)模型和視圖之間的中介。在這里，我們定義一個操作來使用年份填充第一個下拉菜單，另一個操作根據(jù)所選年份提供月份：

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
        );
    }
}

創(chuàng)建視圖

視圖顯示應(yīng)用程序的用戶界面。在本例中，我們使用Razor語法定義兩個下拉菜單：一個用于選擇年份，另一個用于選擇月份：

@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>

這段JavaScript代碼在更改所選年份后觸發(fā)對控制器操作Months的AJAX調(diào)用。然后，它使用返回的JSON數(shù)據(jù)使用適當(dāng)?shù)脑路萏畛涞诙€下拉菜單。

結(jié)論

這種方法提供了一種清晰簡潔的方法，可以使用C#在ASP.NET MVC 3中實現(xiàn)級聯(lián)下拉菜單。通過遵循這些步驟，您可以輕松創(chuàng)建用戶友好且響應(yīng)迅速的界面來管理分層數(shù)據(jù)。

以上是如何使用 C# 在 ASP.NET MVC 3 中實現(xiàn)級聯(lián)下拉菜單？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！