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

C#을 사용하여 ASP.NET MVC 3에서 계단식 드롭다운 메뉴 만들기: 단순화된 접근 방식

소개

이 문서에서는 ASP.NET MVC 3 및 ​​C#에서 계단식 드롭다운 메뉴를 만드는 간단하고 쉬운 방법을 제공합니다.

모델

먼저 뷰 데이터를 나타내는 모델 클래스를 정의합니다.

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

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

컨트롤러

컨트롤러는 두 가지 드롭다운 메뉴의 작동을 처리합니다.

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

보기

뷰에는 드롭다운 메뉴와 계단식 기능을 구현하는 JavaScript 코드가 포함되어 있습니다.

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

이 수정된 코드는 모델을 약간 조정하고 컨트롤러에서 연도 데이터를 가져오는 기능을 추가하여 코드를 더 명확하고 유지 관리 및 확장하기 쉽게 만듭니다. 보기의 JavaScript도 좀 더 호환되도록 약간 조정되었습니다. 필요한 jQuery 라이브러리가 프로젝트에서 올바르게 참조되는지 확인하세요.

위 내용은 C#을 사용하여 ASP.NET MVC 3에서 계단식 드롭다운을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!