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

C# を使用して ASP.NET MVC 3 カスケード ドロップダウン メニューを簡単に作成します

最新のテクノロジーにより、ASP.NET MVC 3 でのカスケード ドロップダウン メニューの実装は簡単です。このガイドではプロセスを順を追って説明し、C# と Razor View Engine を使用した明確なソリューションを提供します。

カスケード効果を達成する

カスケード効果を作成するには、まずモデルを構築します。

<code>public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }
    // ...
}</code>

次に、対応するコントローラーを定義します:

<code>public class HomeController : Controller
{
    // ...
    public ActionResult Months(int year)
    {
        // 根据所选年份填充月份的逻辑
        // ...
    }
}</code>

ドロップダウン メニューに入力します

Razor ビューでは次のコードを使用します:

<code>@Html.DropDownListFor(x => x.Year, new SelectList(Model.Years, "Value", "Text"), "-- 选择年份 --")
@Html.DropDownListFor(x => x.Month, Enumerable.Empty(), "-- 选择月份 --")</code>

最初に「年」ドロップダウンに事前定義されたリストを入力しますが、「月」ドロップダウンは現在空のままです。

カスケード動作を実装する

JavaScript コードはカスケード効果を実装します:

<code>$('#Year').change(function () {
    var year = $(this).val();
    if (year) {
        // AJAX请求，根据所选年份获取月份
        $.getJSON('@Url.Action("Months")', { year: year }, function (months) {
            $('#Month').empty();
            $.each(months, function (index, month) {
                // 使用获取的数据填充“月份”下拉菜单
            });
        });
    }
});</code>

年が選択されると、このスクリプトはコントローラーへの AJAX 呼び出しをトリガーし、関連付けられた月を取得し、それに応じて [月] ドロップダウンを更新します。

この方法を使用すると、ASP.NET MVC 3 でカスケード ドロップダウン メニューを簡単に作成でき、スムーズなユーザー エクスペリエンスを提供できます。

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