C #을 사용하여 ASP.NET MVC 3에서 캐스케이드 드롭 다운을 만드는 가장 쉬운 방법

C #을 사용하여 ASP.NET MVC 3에서 캐스케이드 드롭 다운을 만드는 가장 쉬운 방법

---

I는 두 만들려 DropDownListA의 캐스케이드 사용 MVC3(바람직하게는 Razor)와 C#.

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

간단하게합시다. 드롭 다운 목록 "연도"에서 현재 연도 (예 : 2011)를 선택하면 드롭 다운 목록 "월"이 현재 월 (예 : 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