C# を使用して ASP.NET MVC 3 にカスケードドロップダウンを実装する方法-C++-php.cn

C# を使用して ASP.NET MVC 3 にカスケードドロップダウンを実装する方法

Patricia Arquette

リリース： 2025-01-11 15:36:42

オリジナル

664 人が閲覧しました

How to Implement Cascading Dropdowns in ASP.NET MVC 3 Using C#?

C# を使用した ASP.NET MVC 3 でのカスケードドロップダウンメニューの実装: 完全ガイド

ASP.NET MVC 3 でカスケードドロップダウンメニューを作成する場合、そのバージョンで非推奨になった古いソリューションやコマンドに遭遇すると、圧倒されてしまうことがあります。このガイドでは、C# を使用してカスケードドロップダウンメニューを作成し、MVC 3 との互換性を確保するための段階的な方法を説明します。

モデルデザイン

MVC アプリケーションの基礎はモデルです。この例では、ドロップダウンメニューのデータを表す MyViewModel というモデルを作成します:

<code class="language-csharp">public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }

    // 第一个下拉菜单的年份选项集合
    public IEnumerable Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}</code>

ログイン後にコピー

ビルドコントローラー

コントローラーはモデルとビューの間の仲介者として機能します。ここでは、最初のドロップダウンに年を入力するアクションと、選択した年に基づいて月を提供する別のアクションを定義します:

<code class="language-csharp">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
        );
    }
}</code>

ログイン後にコピー

ビューの作成

ビューには、アプリケーションのユーザーインターフェイスが表示されます。この例では、Razor 構文を使用して 2 つのドロップダウンメニューを定義します。1 つは年を選択するため、もう 1 つは月を選択するためです:

<code class="language-csharp">@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x => x.Year,
    new SelectList(Model.Years, "Value", "Text"),
    "-- 选择年份 --"
)

@Html.DropDownListFor(
    x => x.Month,
    Enumerable.Empty(),
    "-- 选择月份 --"
)

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

ログイン後にコピー

この JavaScript コードは、選択した年を変更してから数か月後にコントローラーアクションへの AJAX 呼び出しをトリガーします。次に、返された JSON データを使用して、2 番目のドロップダウンメニューに適切な月を設定します。