如何使用 C# 在 ASP.NET MVC 3 中輕鬆建立級聯下拉式選單？

使用C#輕鬆建立ASP.NET MVC 3級聯下拉式選單

借助更新的技術，在ASP.NET MVC 3中實現級聯下拉式選單變得輕而易舉。本指南將引導您完成此過程，提供使用C#和Razor視圖引擎的清晰解決方案。

實現級聯效果

要建立級聯效果，我們先建立一個模型：

<code>public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }
    // ...
}</code>

接下來，我們定義對應的控制器：

<code>public class HomeController : Controller
{
    // ...
    public ActionResult Months(int year)
    {
        // 根据所选年份填充月份的逻辑
        // ...
    }
}</code>

填充下拉式選單

在Razor視圖中，我們使用以下程式碼：

<code>@Html.DropDownListFor(x => x.Year, new SelectList(Model.Years, "Value", "Text"), "-- 选择年份 --")
@Html.DropDownListFor(x => x.Month, Enumerable.Empty(), "-- 选择月份 --")</code>

我們最初使用預定義清單填充「年份」下拉式選單，而「月份」下拉式選單目前保持為空。

實作級聯行為

JavaScript程式碼實現了級聯效果：

<code>$('#Year').change(function () {
    var year = $(this).val();
    if (year) {
        // AJAX请求，根据所选年份获取月份
        $.getJSON('@Url.Action("Months")', { year: year }, function (months) {
            $('#Month').empty();
            $.each(months, function (index, month) {
                // 使用获取的数据填充“月份”下拉菜单
            });
        });
    }
});</code>

選擇年份後，此腳本將觸發對控制器的AJAX調用，檢索關聯的月份，並相應地更新“月份”下拉選單。

透過此方法，您可以輕鬆地在ASP.NET MVC 3中建立級聯下拉式選單，提供流暢的使用者體驗。

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