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

ASP.NET MVC 3에서 C#을 사용하여 계단식 드롭다운 메뉴 단순화

계단식 드롭다운 메뉴(한 드롭다운 메뉴의 옵션이 다른 드롭다운 메뉴의 선택에 따라 다름)를 만드는 것은 어려운 작업처럼 보일 수 있습니다. 그러나 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 class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel { Years = GetYears() }; //获取年份数据
        return View(model);
    }

    public ActionResult Months(int year)
    {
        var months = GetMonths(year);
        return Json(months, JsonRequestBehavior.AllowGet);
    }

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

    private IEnumerable<SelectListItem> GetMonths(int year)
    {
        //  此处替换为您的实际月份数据获取逻辑,  考虑闰年
        int maxMonth = (year == 2011) ? 3 : 12; // 示例，实际需根据年份判断
        return Enumerable.Range(1, maxMonth).Select(month => new SelectListItem { Value = month.ToString(), Text = month.ToString() });
    }
}</code>

뷰 만들기

마지막으로 귀하의 의견은 다음과 같습니다.

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

결론

이 방법을 사용하면 C#을 사용하여 ASP.NET MVC 3에서 계단식 드롭다운 메뉴를 쉽게 만들 수 있습니다. 제공된 예는 첫 번째 드롭다운 메뉴의 선택 사항을 기반으로 두 번째 드롭다운 메뉴를 채우는 간단하면서도 효과적인 방법을 제공하므로 사용자 친화적인 대상 사용자 경험을 보장합니다. 코드에서 GetYears 및 GetMonths 메서드가 개선되어 확장성이 향상되었으며 SelectListItem 유형을 사용하여 MVC 프레임워크의 사양과 더욱 일관되게 만들었습니다. 동시에, 보다 안전한 방법으로 옵션을 추가하기 위해 보기의 JavaScript 코드도 약간 조정되었습니다.

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