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 でカスケード ドロップダウン メニューを簡単に作成できます。提供された例は、最初のドロップダウン メニューからの選択に基づいて 2 番目のドロップダウン メニューを設定するシンプルかつ効果的な方法を提供し、ユーザー フレンドリーなターゲット ユーザー エクスペリエンスを保証します。 GetYears メソッドと GetMonths メソッドは拡張性を高めるためにコード内で改良されており、MVC フレームワークの仕様との一貫性を高めるために SelectListItem 型を使用していることに注意してください。 同時に、ビュー内の JavaScript コードも若干調整され、より安全な方法でオプションが追加されました。

以上がC# を使用して ASP.NET MVC 3 のカスケード ドロップダウンを簡素化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。