如何使用 C# 簡化 ASP.NET MVC 3 中的級聯下拉式選單？

在ASP.NET MVC 3中使用C#簡化級聯下拉式選單

建立級聯下拉式選單（一個下拉式選單的選項取決於另一個下拉式選單的選擇）看起來可能是一項艱鉅的任務。但是，使用ASP.NET MVC 3和C#，它可以變得很簡單。

資料建模

先定義一個模型來表示您的資料：

public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }
    public IEnumerable<SelectListItem> Years { get; set; }
}

實作控制器操作

接下來，設定您的控制器操作：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel { Years = GetYears() }; //获取年份数据
        return View(model);
    }

    public ActionResult Months(int year)
    {
        var months = GetMonths(year);
        return Json(months, JsonRequestBehavior.AllowGet);
    }

    private IEnumerable<SelectListItem> GetYears()
    {
        //  此处替换为您的实际年份数据获取逻辑
        return Enumerable.Range(2010, 15).Select(year => new SelectListItem { Value = year.ToString(), Text = year.ToString() });
    }

    private IEnumerable<SelectListItem> GetMonths(int year)
    {
        //  此处替换为您的实际月份数据获取逻辑,  考虑闰年
        int maxMonth = (year == 2011) ? 3 : 12; // 示例，实际需根据年份判断
        return Enumerable.Range(1, maxMonth).Select(month => new SelectListItem { Value = month.ToString(), Text = month.ToString() });
    }
}

建立視圖

最後，在您的視圖中：

@model AppName.Models.MyViewModel

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

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

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

結論

使用此方法，您可以輕鬆地在ASP.NET MVC 3中使用C#建立級聯下拉式選單。提供的範例提供了一種簡單而有效的方法，可以根據第一個下拉式選單的選擇來填充第二個下拉式選單，從而確保用戶友好的目標用戶體驗。 注意程式碼中已對GetYears和GetMonths方法進行了改進，使其更具可擴展性，並使用SelectListItem類型，使其更符合MVC框架的規範。 同時，視圖中的JavaScript程式碼也進行了細微調整，以更安全的方式新增選項。

以上是如何使用 C# 簡化 ASP.NET MVC 3 中的級聯下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！