C#을 사용하여 ASP.NET MVC 3에서 계단식 드롭다운을 구현하는 방법은 무엇입니까?-C++-php.cn

C#을 사용하여 ASP.NET MVC 3에서 계단식 드롭다운을 구현하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2025-01-11 15:36:42

원래의

616명이 탐색했습니다.

How to Implement Cascading Dropdowns in ASP.NET MVC 3 Using C#?

C#을 사용하여 ASP.NET MVC 3에서 계단식 드롭다운 메뉴 구현: 전체 가이드

ASP.NET MVC 3에서 계단식 드롭다운 메뉴를 만들 때 해당 버전에서 더 이상 사용되지 않는 오래된 솔루션이나 명령을 발견하면 부담스러울 수 있습니다. 이 가이드에서는 C#을 사용하여 계단식 드롭다운 메뉴를 만드는 단계별 방법을 제공하여 MVC 3과의 호환성을 보장합니다.

모델 디자인

모든 MVC 애플리케이션의 기본은 모델입니다. 이 예에서는 드롭다운 메뉴의 데이터를 나타내는 MyViewModel이라는 모델을 만듭니다.

<code class="language-csharp">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()
            });
        }
    }
}</code>

로그인 후 복사

컨트롤러 빌드

컨트롤러는 모델과 뷰 사이의 중개자 역할을 합니다. 여기서는 첫 번째 드롭다운에 연도를 채우는 작업과 선택한 연도를 기준으로 월을 제공하는 또 다른 작업을 정의합니다.

<code class="language-csharp">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
        );
    }
}</code>

로그인 후 복사

뷰 만들기

보기는 애플리케이션의 사용자 인터페이스를 표시합니다. 이 예에서는 Razor 구문을 사용하여 두 개의 드롭다운 메뉴를 정의합니다. 하나는 연도 선택용이고 다른 하나는 월 선택용입니다.

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

로그인 후 복사

이 JavaScript 코드는 선택한 연도를 변경한 후 개월 후에 컨트롤러 작업에 대한 AJAX 호출을 트리거합니다. 그런 다음 반환된 JSON 데이터를 사용하여 두 번째 드롭다운 메뉴에 적절한 월을 채웁니다.