Bagaimana untuk Mencipta Dropdown Cascading dalam ASP.NET MVC 3 Menggunakan C#?

Mencipta menu lungsur turun dalam ASP.NET MVC 3 menggunakan C#: Pendekatan ringkas

Pengenalan

Artikel ini menyediakan kaedah yang ringkas dan mudah untuk mencipta menu lungsur turun dalam ASP.NET MVC 3 dan C#.

Model

Pertama, tentukan kelas model untuk mewakili data paparan:

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

    public IEnumerable<SelectListItem> Years { get; set; }
}</code>

Pengawal

Pengawal mengendalikan operasi dua menu lungsur:

<code class="language-csharp">public ActionResult Index()
{
    var model = new MyViewModel { Years = GetYears() }; //添加获取年份数据的调用
    return View(model);
}

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

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>

Lihat

Paparan mengandungi menu lungsur turun dan kod JavaScript yang melaksanakan fungsi berlatarkan:

<code class="language-html">@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></code>

Kod yang diubah suai ini membuat sedikit pelarasan pada model dan menambahkan fungsi untuk mendapatkan data tahun daripada pengawal, menjadikan kod lebih jelas dan lebih mudah untuk diselenggara dan dilanjutkan. JavaScript dalam paparan juga telah dilaraskan sedikit untuk menjadikannya lebih patuh. Sila pastikan bahawa perpustakaan jQuery yang diperlukan dirujuk dengan betul dalam projek anda.

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