1

いくつかのカテゴリが読み込まれた DropDownList と、最初のドロップダウンで選択されたオプションに応じて、別の @Html.DropDownList を設定する必要があります。

これは、最初のドロップダウンに入力するために使用するコードです。

コントローラーで:

        TecnicService ListCategory = new TecnicService();
        IList<Category> resultCat = ListCategory.GetCategory();

        List<SelectListItem> CatDropDown = new List<SelectListItem>();

        foreach (Category in resultadoCat)
        {
            CatDropDown.Add(new SelectListItem
            {
                Value = a.Id.ToString(),
                Text = a.Name.ToString()
            });
        }

ビューで:

  @model APP.Models.DataViewModel  
    @using (Html.BeginForm("NewPol", "Tecnic", null, FormMethod.Post, new { id = "pol-data-form", @class = "form-horizontal" }))
    {
    <div class="control-group">
             <label for="category" class="control-label">Category</label>              
             <div class="controls">
                  @Html.DropDownList("BasicData", Model.Category, new { @class= "required", name="category"})
             </div>               
        </div>    
        <div class="control-group">
             <label for="ram" class="control-label">Ram</label>
              <div class="controls">
                  @Html.DropDownList() WHAT DO I DO HERE???????
              </div>
        </div>
.
.}

リストを返すサービスを介してデータを取得します。1 番目のドロップダウンの選択に応じて 2 番目のドロップダウンを設定する必要があります。

4

2 に答える 2

4

あなたが探しているのはCascading Drop Down Listです。

変更を追跡し、サーバーに ajax リクエストを送信して他のドロップダウンの値を取得する jQuery プラグインを作成できます。

(function ($) {
    $.fn.cascade = function (options) {
        var defaults = { };
        var opts = $.extend(defaults, options);

        return this.each(function () {
            $(this).change(function () {
                var selectedValue = $(this).val();
                var params = { };
                params[opts.paramName] = selectedValue;
                $.getJSON(opts.url, params, function (items) {
                    opts.childSelect.empty();
                    $.each(items, function (index, item) {
                        opts.childSelect.append(
                            $('<option/>')
                                .attr('value', item.Id)
                                .text(item.Name)
                        );
                    });
                });
            });
        });
    };
})(jQuery);

そして、それを配線するだけです：

$(function () {
    $('#SelectedProvinceId').cascade({
        url: '@Url.Action("Cities")',
        paramName: 'provinceId',
        childSelect: $('#SelectedCityId')
    });

    $('#SelectedCityId').cascade({
        url: '@Url.Action("Suburbs")',
        paramName: 'cityId',
        childSelect: $('#SelectedSuburbId')
    });
});

出典: MVC 3 Razor ビューのカスケード ドロップダウン

簡単なグーグル検索からのいくつかのソース：

MVC4 を使用した AJAX カスケード

http://www.sidecreative.com/Blog/Entry/Cascading-dropdown-lists-with-MVC4-and-jQuery

http://www.codeproject.com/Articles/258172/Simple-Implementation-of-MVC-Cascading-Ajax-Drop-D

于 2013-05-23T21:58:41.153 に答える
0

通常は ajax で行います。JQuery コードを記述して自分で行うか、Web 上で実行できる多くのプラグインの 1 つを使用して行うことができます。

ちなみに、TwitterBootstrap を使用していることに気付きました。TwitterBootstrapMvcをチェックしてください。役に立つかもしれません。

なぜアダムの答えが反対票を投じられたのだろうか。彼は実際に良い答えを出しました。コードが提供されなかったので、グサドルフォが反対票を投じたのだろうか。もしそうなら、グサドルフォ、コードを頼りにしないでください。私たちはあなたを導き、どこかで犯した間違いを修正することができますが、私たちがあなたの仕事を完全に行うことを期待しないでください.

于 2013-05-23T22:04:27.870 に答える