Bagaimana untuk Melaksanakan Dropdown Bertingkat dalam ASP.NET MVC 3 Menggunakan C#?

Melaksanakan Menu Dropdown Cascading dalam ASP.NET MVC 3 menggunakan C#: Panduan Lengkap

Apabila mencipta menu lungsur turun dalam ASP.NET MVC 3, ia boleh menjadi sukar untuk menemui penyelesaian atau arahan lapuk yang tidak digunakan dalam versi itu. Panduan ini menyediakan kaedah langkah demi langkah untuk mencipta menu lungsur turun menggunakan C#, memastikan keserasian dengan MVC 3.

Reka Bentuk Model

Asas bagi mana-mana aplikasi MVC ialah model. Dalam contoh ini, kami akan mencipta model yang dipanggil MyViewModel untuk mewakili data menu lungsur:

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

Bina Pengawal

Pengawal bertindak sebagai perantara antara model dan pandangan. Di sini kami mentakrifkan tindakan untuk mengisi lungsur pertama dengan tahun dan tindakan lain untuk menyediakan bulan berdasarkan tahun yang dipilih:

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

Buat Paparan

Paparan memaparkan antara muka pengguna aplikasi. Dalam contoh ini, kami menggunakan sintaks Razor untuk menentukan dua menu lungsur: satu untuk memilih tahun dan satu lagi untuk memilih bulan:

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

Kod JavaScript ini mencetuskan panggilan AJAX kepada tindakan pengawal Bulan selepas menukar tahun yang dipilih. Ia kemudian menggunakan data JSON yang dikembalikan untuk mengisi menu lungsur kedua dengan bulan yang sesuai.

Kesimpulan

Pendekatan ini menyediakan cara yang jelas dan ringkas untuk melaksanakan menu lungsur turun berlatarkan dalam ASP.NET MVC 3 menggunakan C#. Dengan mengikuti langkah ini, anda boleh membuat antara muka yang mesra pengguna dan responsif dengan mudah untuk mengurus data hierarki.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Dropdown Bertingkat dalam ASP.NET MVC 3 Menggunakan C#?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!