2つのプルダウンを連動したドロップダウンリストを作成したい（HierSelect）

Question

実現したいこと

・「カテゴリ」「教科名」2つのドロップダウンリストがあり、「カテゴリ」が変更されるとそれに対応した「教科名」が「教科名」ドロップダウンリストにて選択できる。
・「カテゴリ」ドロップダウンリストが初期状態だと「教科名」ドロップダウンリストは選択できない。
下記サイトを参考にDB Firstにて作成をしています。
.NET アプリケーション開発入門

DBは「Categories」テーブル：CategoryID/CategoryName
「subjects」テーブル：SubjectID/SubjectName/CategoryID
です。
最終的にはQUestionID(連番),SubjectID(),question,Answer,Isdelete（最後3つはユーザーによる入力、下記コードには載せていない）を「Questions」テーブルに保存したいと考えております。

修正依頼に対する追記

・タイトルにある「HierSelect」ですが、2つの連動したプルダウンのことを指しております。
例えば大カテゴリの選択（今回の「カテゴリ」）によって中カテゴリ（今回の「教科名」）の内容を変更する処理のことを指します。
・class属性を用いて2つのプルダウンを連動したいと考えております。
現状では2つのプルダウンを<option value=>にて連動しておりますが、これでは教科名のID（SubjectID）が取得できません。
なのでclass属性でプルダウン連動、option属性の値をSubjectIDに追加したいと考えております。

現状

「カテゴリ」「教科名」ドロップダウンリストにてともにCategoryIDを用いて連動しているため連動自体はうまく行っている。
ただ、SubjectIDをどうやって関連付けるかが分からない。

根本的にViewBagではclass属性は付与できないのか（jsのコードを修正しないとダメなのか）すら分かっていないので、違う方法等あれば教えていただきたいです。

発生している問題

ViewBagにてvalue属性は設定できるが、class属性が設定できない。
例えば【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみたにあるような

<option value="4" class="p1">

としたい。
下記コードのViewBagにて渡せているのは

<option value="4">

のみである。

該当のソースコード

        // GET: Question/Create
        public ActionResult Create()
        {
            // ドロップダウンリスト用
            ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");
            ViewBag.SubjectID = new SelectList(db.subjects, "CategoryID", "SubjectName"); // CategoryIDとSubjectIDを渡したい
            return View();
        }

        // POST: Question/Create
        // 過多ポスティング攻撃を防止するには、バインド先とする特定のプロパティを有効にしてください。
        // 詳細については、https://go.microsoft.com/fwlink/?LinkId=317598 を参照してください。
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "QuestionID,SubjectID,question,Answer,Isdelete")] questions questions)
        {
            if (ModelState.IsValid)
            {
                db.questions.Add(questions);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(questions);
        }

                <div class="editor-field">
                    @Html.DropDownList("CategoryID", null, "カテゴリを選択して下さい。", new { id = "CategoryName" })
                </div>
                <div class="editor-label">
                    課題名
                </div>
                <div class="editor-field">
                    @Html.DropDownList("SubjectID", null, "教科名を選択して下さい。", new { id = "SubjectName" })
                </div>
            }
            <script type="text/javascript">
                $(function () {
                    // カテゴリ名
                    var SubjectNam = $("#SubjectName");

                    // 教科名のoption内容をコピー
                    var pd2 = $("#SubjectName option").clone();

                    // カテゴリドロップダウンリストが変更されたら作動
                    $("#CategoryName").change(function () {
                        // 教科名をeabled
                        SubjectNam.removeAttr('disabled');

                        // カテゴリ名のvalue取得
                        var lv1val = $("#CategoryName").val();

                        // 一旦、カテゴリ名のoption削除
                        $("#SubjectName option").remove();

                        // コピー元のカテゴリを表示
                        $(pd2).appendTo("#SubjectName");

                        // 選択値以外のoption削除
                        $("#SubjectName option[value != " + lv1val + "]").remove();

                        // カテゴリドロップダウンリストを2回目以降操作時、カテゴリ名が未選択なら教科をdisabledにする
                        if ($("#CategoryName").val() == "") {
                            SubjectNam.attr('disabled', 'disabled');
                        }
                    });

                    // カテゴリ名が未選択なら教科をdisabledにする
                    if ($("#CategoryName").val() == "") {
                        SubjectNam.attr('disabled', 'disabled');
                    }
                });

            </script>

namespace QuestionManager.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Categories
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public bool IsDelete { get; set; }
    }
}

namespace QuestionManager.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class subjects
    {
        public int SubjectID { get; set; }
        public string SubjectName { get; set; }
        public Nullable<int> CategoryID { get; set; }
    }
}

開発環境

ASP.NET MVC5.2.4
Entity Framework 6.2.0
jQuery 3.3.1
Identity.Entity.Framework 2.2.2
DB:SQL Sever

補足

タイトルにある「HierSelect」ですが、2つの連動したプルダウンのことを指しております。

Comments

[退会済みユーザー]

参考サイトは url の文字列を記載するだけでなくリンクを張ってください。

HierSelect とはなんですか？ 質問に、

> 例えばリンク先にあるような

とありますが、class 属性を使ってクライアントスクリプトで何かする？ 「リンク先」に詳しく書いてある？ それはどこですか？

[hayato208]

質問を修正しましたのでお手数ですが確認お願いいたします。

urlはリンクで貼り付けました。
HierSelectは連動プルダウンのことです。タイトルの修正も考えましたが質問文はともかくタイトルはあまり修正しないほうがいいかと思い質問文中に補足事項として載せておきました。

> 例えばリンク先にあるような
申し訳ございません、リンクが抜けておりましたので修正しました。

> class 属性を使ってクライアントスクリプトで何かする？
class属性は2つのプルダウンの連動のために使用しております。連動のために必要なのでclassである必要はなくカスタムデータでも問題ないです。

[退会済みユーザー]

> ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");
> ViewBag.SubjectID = new SelectList(db.subjects, "CategoryID", "SubjectName");

ユーザーが送信してくるのは、ユーザーが 2 つの DropDownList から選択した CategoryID と SubjectID でなければならないのですよね？　上のコードでは 2 つとも CategoryID になってしまうと思いますが？

要するに、2 つめの DropDownList から生成される select 要素下の option 要素を以下のようにすれば、後は質問者さんがクライアントスクリプトを書いて何とかできるということで良いのですか？

<option value="1" class="p1">xxx</option>

上で value="1" の 1 は SubjectID、xxx は SubjectName、class="p1" の 1 は CategoryID

[退会済みユーザー]

質問者さん、無言になってしまいましたが、すでに回答していますのでそれに対するフィードバックを返してください。役に立った・立たなかった程度のフィードバックはすぐ返せるはず。役に立たなかったならどこがダメだったのかも書いてください。とにかく無言は NG です。

もし、回答の下の方に書いた「2 つ目の DropDownList に表示するデータのみを ajax を使って取得して表示する」という方向に方針変更するならその旨書いてください。

Answer 1

ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");
ViewBag.SubjectID = new SelectList(db.subjects, "CategoryID", "SubjectName");

ユーザーが送信してくるのは、ユーザーが 2 つの DropDownList から選択した CategoryID と SubjectID でなければならないのですよね？　上のコードでは 2 つとも CategoryID になってしまうと思いますが？

要するに、2 つめの DropDownList から生成される select 要素下の option 要素を以下のようにすれば、後は質問者さんがクライアントスクリプトを書いて何とかできるということで良いと理解してレスします。

<option value="1" class="p1">xxx</option>

注： 上で、各属性の値は「subjects」テーブルより取得し、value="1" の 1 は SubjectID、xxx は SubjectName、class="p1" の 1 は CategoryID と理解しています。

SelectList を Html ヘルパーの DropDownList に渡すやり方では CategoryID が渡せません。

なので、アクションメソッドから View に渡すのは、上に引用したコードの 2 行目のような SelectList ではなく db.subjects を渡して、View 側のコードで db.subjects から SubjectID、SubjectName、CategoryID を取得して option 要素の文字列を組み立てるのがよさそうです。

質問者さんの前のスレッド https://teratail.com/questions/285121 で私の回答で紹介した Northwind サンプルデータベースの Categories テーブルと Products テーブル（下の画像参照）を使って作った EDM をベースに例を書いておきます。

上の画像で Categories が質問者さんの DB の「Categories」テーブル、Products が「subjects」テーブルと思ってください。

Controller / Action Method

View

Html

この先、連動させるためのスクリプトの書き方はご自分で考えて対応願います。

スクリプトの書き方が分からなければ、ASP.NET の話ではなくて JavaScript / jQuery の話として別に新たなスレッドを立てて質問するか、それが難しければ以下のように方針変更することをお勧めします。

質問者さんがこのスレッドで書かれているやり方は、一度に全部のデータを取得してきてクライアント側で JavaScript / jQuery を使って操作するということですが、そうではなくて、せっかく ASP.NET MVC を使っているのですから、2 つ目の DropDownList に表示するデータのみを ajax を使って取得して表示するという方がスマートだと思います。

asp.net mvc cascading dropdownlist などをキーワードにググると参考になる記事がヒットします。例えば下記：

An ASP.NET MVC Cascading Dropdown List
https://www.codeproject.com/Tips/883701/An-ASP-NET-MVC-Cascading-Dropdown-List

自分でも検索して調べてみてください。

Comments

[hayato208]

返信が遅くなってしまいすみません。
回答してくださった内容で無事実現できました、今回もありがとうございました。