0

これは、年と月のカスケード ドロップダウンを実装する方法です。年/月を選択すると、フォームが送信されます。送信後にビューが戻ると、選択された年の値は保持されますが (モデルでこれを処理しているため)、選択された月の値は保持されません。値を永続化するために何をする必要がありますか?

モデル

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

コントローラ

HttpGet および HttpPost アクション、

//
    // GET: /MenuSix/

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

    //
    // POST: /MenuSix/
    [HttpPost]
    public ActionResult Index(MyViewModel myViewModel)
    {
        var month = myViewModel.Month; //11
        var year = myViewModel.Year;   //2011
        return View(myViewModel);
    }

意見

月の値「Enumerable.Empty()」を永続化するには、ここで何を変更する必要がありますか?

@model DemoWeb.Models.MenuSix.MyViewModel
@using (Html.BeginForm())
{
@Html.DropDownListFor(x => x.Year, new SelectList(Model.Years, "Value", "Text"), "-- select year --")
@Html.DropDownListFor(x => x.Month, Enumerable.Empty<SelectListItem>(), "-- select month --")

<div align="center">
    <input type="submit" id="valSubmit" value="Save"/>
</div>
}

@section PageScriptsAndCSS{
<script type="text/javascript">
    $(document).ready(function () {
        $('#Year').change(function () {
            debugger;
            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>

}

4

1 に答える 1

0

はい、月のドロップダウンをバインドする方法を変更する必要があります。空のリストでバインドすると、フォームの送信後に選択した月の値が取得されません。私は自分のやり方であなたのコードを変更しました。それがあなたのニーズに合っているかどうか教えてください。

モデル

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

    public static IEnumerable<int> GetMonthsRangeOf(int year) { 
        return (year ==2011) ? Enumerable.Range(1, 3) : Enumerable.Range(1, 12);
    }

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

    } }

    public IEnumerable<SelectListItem> Months
    {
        get
        {
            IEnumerable<SelectListItem> months = null;
            if (! this.Year.HasValue)
            {
                months = Enumerable.Empty<SelectListItem>();
            }
            else
            {
                months = GetMonthsRangeOf(this.Year.Value).Select(x => new SelectListItem
                {
                    Value = x.ToString(),
                    Text = x.ToString()
                });
            }

            return months;
        }
    }
}

コントローラ

public ActionResult Months(int year)
    {
            return Json(
                MyViewModel.GetMonthsRangeOf(year).Select(x => new { value = x, text = x }),
                JsonRequestBehavior.AllowGet
            );
    }

    //
    // POST: /MenuSix/
    [HttpPost]
    public ActionResult About(MyViewModel myViewModel)
    {
        var month = myViewModel.Month; //11
        var year = myViewModel.Year;   //2011
        return View(myViewModel);
    }

意見

    @model TestFreezeMVC.ViewModel.MyViewModel
@using (Html.BeginForm())
{

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

@Html.DropDownListFor(x => x.Month, new SelectList(Model.Months, "Value", "Text"), "-- select month --");


<div align="center">
    <input type="submit" id="valSubmit" value="Save"/>
</div>
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#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>

私が何か間違ったことをしたかどうかを示唆..

于 2012-07-02T06:56:31.463 に答える