質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    17500questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    7689questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • PostgreSQL

    1132questions

    PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

  • ASP.NET MVC Framework

    69questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 329

sanezane

score 55

 ■期待する動作

オブジェクトにグッズ名称を設定してポップアップで表示させたい。イメージ以下画像。
イメージ説明
現状、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)

                }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • f_horizon

    2018/07/05 11:47

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

    キャンセル

  • sanezane

    2018/07/05 14:14

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

    キャンセル

回答 1

checkベストアンサー

+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の属性にセット

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/05 10:18

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

    キャンセル

  • 2018/07/05 14:36

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

    キャンセル

  • 2018/07/07 00:40

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17500questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    7689questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • PostgreSQL

    1132questions

    PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

  • ASP.NET MVC Framework

    69questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。