asp.net mvcでのデータの設定・表示(マウスオーバー）3

Question

■期待する動作

オブジェクトにグッズ名称を設定してポップアップで表示させたい。イメージ以下画像。

現状、No1を指定して表示していますが、No.2,3とユーザー側で変更した際の
制御を実装できないでいます。
No2,3をクリックし、そのオブジェクトに設定している値を取るところまではできていますが、そこからのオブジェクトとの紐付けで詰まってしまっています。

・オブジェクトとデータの構造について
・オブジェクトはSVG要素で作られており、data-title属性をattrにて付与します。
$('#オブジェクト').attr(data-title,グッズ名称)
・以下のようにgoods_meishoを取得、編集したい。
イメージとしてはグッズを管理している大きな棚をroomとしており、その中にある箱をbox、
箱の中には最大2件のgoodsmeishoが入る。2件入っている場合は/で結合。1つの場合はそのまま。無しの場合は空白で出力したい。
・データの格納のイメージと表示のイメージを以下に示します。

情報の整理がついていませんが、お力をお貸しいただけますと幸いです。
環境情報
フレームワーク:Asp.net mvc .NETFramework
データベース:Postgresql
jQueryバージョン情報:3.3.1
OS：windows7
.NET：4.6.2
Visual Studio：visual studio2017

・コントローラー
///<summary>
        ///グッズ名称取得
        ///</summary>
        private IEnumerable<GoodsModel.GoodsMeishoViewModel> GetGoodsName(NpgsqlConnection dataConnector)
        {
            List<GoodsModel.GoodsMeishoViewModel> GoodsMeishos = new List<GoodsModel.GoodsMeishoViewModel>();


       //テスト用の値
            string Type_cd = "A";
            int box_tsuban = 1;
            int goods_tsuban = 1;


            string sql = @"select box_tsuban, goods_tsuban, goods_meisho"
+ " from master.グッズ名称マスタ where Room_cd = :RoomCd and Type_cd = : TypeCd and box_tsuban = :Box_tsuban and goods_tsuban = :Goods_tsuban";

        NpgsqlCommand cmd = new NpgsqlCommand(sql, dataConnector);
            cmd.Parameters.Add(new NpgsqlParameter("kikishitsuCd", NpgsqlDbType.Text));

            cmd.Parameters.Add(new NpgsqlParameter("TypeCd", NpgsqlDbType.Text));
            cmd.Parameters.Add(new NpgsqlParameter("Box_tsuban", NpgsqlDbType.Integer));
            cmd.Parameters.Add(new NpgsqlParameter("Goods_tsuban", NpgsqlDbType.Integer));
            cmd.Prepare();
            cmd.Parameters["RoomCd"].Value = Session["RoomCode"].ToString();
            cmd.Parameters["TypeCd"].Value = Type_cd;
            cmd.Parameters["Box_tsuban"].Value = goods_tsuban;
            cmd.Parameters["Goods_tsuban"].Value = goods_tsuban;

            using (NpgsqlDataReader dr = cmd.ExecuteReader())
            {
               while (dr.Read())
                {
                    GoodsMeishos.Add(new GoodsModel.GoodsMeishoViewModel()
                    {
                        boxtsuban = (int)dr["box_tsuban"],
                        goodstsuban = (int)dr["goods_tsuban"],
                        goodsmeisho = dr["goods_meisho"].ToString()

                    });
                }
                return GoodsMeishos;
            }
            

・Model
public class GoodsModel : 〇〇ModelBase
    {
 ///<summary>
        ///グッズ名称をセット
        ///</summary>
        public IEnumerable<GoodsMeishoViewModel> GoodsMeisho { get; set; }

        public class GoodsMeishoViewModel
        {
            //box通番
            public int boxtsuban { get; set; }

            //グッズ通番
            public int goodstsuban { get; set; }

            //グッズ名称
            public string goodsmeisho { get; set; }
        }
        

・アクション
 public ActionResult Index()
        {
            var model = this.CreateModel<GoodsModel>();
            // セッションよりNpgsqlConnectionを取得
            NpgsqlConnection dataConnector = (NpgsqlConnection)Session["dataConnector"];

            // DBオープン
            dataConnector.Open();


            model.GoodsMeisho = GetGoodsName( dataConnector);

            dataConnector.Close();

            return View(model);

        }

 var GoodsList = {};
            @for(int i = 0; i < Model.GoodsMeisho.Count(); i++ )
            {
                @:GoodsList[@i] = '@Model.GoodsMeisho.ElementAt(i).goodsmeisho';
            }

            for (var index in GoodsList)
            {
                var num = Number(index) + 1;
                //グッズ名称オブジェクトのid(P01~...)
                var id = "#P" + (('00' + (num)).slice(-2))
                if (index < 24) {

                    $(id).attr('data-title', GoodsList[index]);
                }
                $(id + "_PT2").attr('data-title', GoodsList[index]);
            }
            //グッズ名称オブジェクト全てに付与しているクラス
            $('.PA').tipper();

            クリックされた値を取得する
            //各部屋オブジェクトに付与しているclass
             $('.Rooms').on('click', function (e) {
               

                /* 押下したボタンから部屋番号を取得する */
                // ボタンのIDを取得
                var selectRoom = e.currentTarget.id;
                // ID情報から架番号を取得
                
               
                // 取得した架番号をフォーム情報にセット
                $('#RoomnumSelected').val(paNumber)

                }

Comments

[f_horizon]

ご質問の「No2,3をクリック」とは図のどこをクリックするのでしょうか。またタイトルにあるマウスオーバーではなく、クリックなのでしょうか。

[sanezane]

Noとはroom番号のことを言っています。イメージとしてはroom番号タブがあってroomが切り替わり、それと同時にboxに入っているグッズ名称も変わるといった仕様です。roomの中にboxがあり、boxのなかにgoodsが最大2つ入るという仕様です。クリックでroomが遷移するようタブが設けてあります。boxをマウスオーバーするとその中に入っているgoods名称がポップアップ表示されるという仕様です。

Answer 1

カスタム属性（data-xxx）にセットした値をマウスオーバーでヒント表示（ツールチップ）させる、といった挙動でよかったでしょうか。
ツールチップはCSSやjs（jQuery）の細かな挙動が必要となってきますので、下記ご参考下さい。
CSSやJavaScriptでツールチップを表示させる方法まとめ
jQueryでツールチップのプラグインを自作しよう – Part1

また、「jQuery　吹き出し プラグイン」や「ツールチップ　プラグイン」で検索すると色々と出てきますので、試されても良いかと思います。ちなみにballoon.jsやTooltipster等使いやすいかと思います。

-- 追記です。
boxも要素としているかと思いますが、であればboxとgoodsは親子関係ということですね。
案1) boxをマウスオーバーした際に、その子要素（goods）を取得し、成形後、ポップアップにツールチップに使用
jQueryで子要素を取得

案2) Modelでデータを生成する際に、boxでポップアップさせるようのデータも生成し、view生成時にboxの属性にセット

Comments

[sanezane]

プラグインはTipperというプラグインを使用して表示はできているのですが、画像イメージのように編集するロジックが組めていない状況です。
現在は、グッズ名称を1つずつ取り出して、1つずつオブジェクトに付与しているだけになっています。

[f_horizon]

追記いたしました。
Viewでhtmlを記述している部分もあると思いますが、そちらも載せておいた方が使用タグや要素間の関係が分かり易いかと思います。

[sanezane]

ありがとうございます！案2を参考に実装できました！RoomごとにModelのデータを加工し、取得できました。しかし1つ問題がありまして、タブ切り替えでRoom別にModelを切り替えポップアップ表示させる際にデータが変わらないものです。デバッグで確認したところ、属性はちゃんと切り替わっているのですが、どうやらTipperというjQueryプラグインで挙動に問題があるので別の質問にて新たに質問させていただきます。RoomNo.1をのデータを固定で指定してViewから呼び出し、属性にセット、ポップアップ表示は実現できましたのでこの質問に関しましては解決とさせていただきます。