ASP에서 캐스케이드다운을 작성하는 가장 쉬운 방법입니다.C#이 있는 NET MVC 3

ASP에서 캐스케이드다운을 작성하는 가장 쉬운 방법입니다.C#이 있는 NET MVC 3

두 개를 만들고 싶다DropDownList을 사용하여 계단식으로MVC3(어쩔 수 없이)Razor)와 함께C#.

연도를 선택할 수 있는 드롭 다운과 선택한 연도에 따라 특정 월 세트를 선택할 수 있는 드롭 다운이 있으면 좋겠습니다.

간단히 말해두죠.드롭다운 목록 "year"에서 현재 연도(예: 2011)를 선택하면 드롭다운 목록 "month"에 현재 달(3월)까지의 달이 채워집니다.다른 경우(기타 연도)에는 제한이 없습니다.또한 드롭다운 목록 "년"의 요소를 선택하기 전에 드롭다운 목록 "월"을 "차단"하는 것이 좋습니다.

이미 인터넷에서 몇 가지 해결책을 찾아봤는데jQuery또는 직접 만든 접근 방식도 있지만 모두 이전 버전의 MVC를 참조하고 있으며 일부 명령어는 에서 권장되지 않습니다.MVC3.

항상 모델부터 시작합니다.

public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }

    public IEnumerable<SelectListItem> Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}

컨트롤러:

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

마지막으로 보기:

@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x => x.Year, 
    new SelectList(Model.Years, "Value", "Text"),
    "-- select year --"
)

@Html.DropDownListFor(
    x => x.Month, 
    Enumerable.Empty<SelectListItem>(),
    "-- select month --"
)

<script type="text/javascript">
    $('#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>

이 예에서는 모든 값을 하드코딩하고 있습니다.현재 연도, 현재 월 등의 개념을 사용하여 이 논리를 개선해야 합니다. 또한 이러한 값을 저장소에서 가져올 수도 있습니다.데모의 목적상, 이 정도면 올바른 방향으로 나아갈 수 있을 것입니다.

언급URL : https://stackoverflow.com/questions/5497524/easiest-way-to-create-a-cascade-dropdown-in-asp-net-mvc-3-with-c-sharp