やりたいこと
RoomNo.のタブ切り替えに応じてMmodelに詰め込んである(RoomNo.ごとに分けてある)データをツールチップ表示させたい。(以下イメージ画像有り)
現状
初期処理でRoomNo1のデータをオブジェクトに設定しており、それは期待通りの挙動を確認している。
問題は、タブ切り替えの際に表示が変わらない。
デベロッパーツールで切り替えた際のオブジェクトの属性の中身を確認したところ、属性については書き換わっていた。しかし、マウスオーバーした際にはNo1の属性が表示されてしまう。
TipperというjQueryプラグインを使用しており、jQueryの中でリフレッシュ的なメソッドを入れてあげないといけない?のかと思うが、そこの調査で詰まってしまっています。
お力をお貸しください。
以下、環境情報と仕様イメージなど
環境情報
フレームワーク:Asp.net mvc .NETFramework
データベース:Postgresql
jQueryバージョン情報:3.3.1
OS:windows7
.NET:4.6.2
Visual Studio:visual studio2017
Box1にカーソルを合わせたときのイメージ(カーソル写ってなくてごめんなさい。)
Box1とは座標で言うと0,0です。
Box(1~6の四角)最大48個
表示パターンが2種類あり、奇数がBox24個,偶数が48個(画像はパターン2)
各Boxに最大2つのグッズ名称が入る
名称が入っていなくてもレコードは必ず存在している(空文字)
名称が1つの場合はそのまま表示,2つの場合は/で結合0の場合は空文字。
加工前の基データのイメージ。このデータをRoomNo.別に振り分けたものがList1~5
![]
c#
1Model 2/****************基データの入れ物GoodsMeisho****************/ 3public IEnumerable<GoodsMeishoViewModel> GoodsMeisho { get; set; } 4 5//各架番号用のリスト 6 public List<string> List1 { get; set; } 7 public List<string> List2 { get; set; } 8 public List<string> List3 { get; set; } 9 public List<string> List4 { get; set; } 10 public List<string> List5 { get; set; } 11 12 public class GoodsMeishoViewModel 13 { 14 ///<summary> 15 ///部屋番号 16 ///</summary> 17 public int Ganum { get; set; } 18 //ボックス通番 19 public int Boxtsuban { get; set; } 20 21 //グッズ通番 22 public int Goodstsuban { get; set; } 23 24 //グッズ名称 25 public string Goodsmeisho { get; set; } 26 } 27 28 29 30 ///<summary> 31 ///リスト番号(Room番号)を返す 32 ///</summary> 33 34 public List<string> GetList(int Roomnum) 35 { 36 List<string> tmpList = new List<string>(); 37 if(Roomnum == 1) 38 { 39 tmpList = List1; 40 } 41 else if(Roomnum == 2) 42 { 43 tmpList = List2; 44 }else if(Roomnum == 3) 45 { 46 tmpList = List3; 47 }else if(Roomnum == 4) 48 { 49 tmpList = List4; 50 }else if(Roomnum == 5) 51 { 52 tmpList = List5; 53 } 54 55 return tmpList; 56 } 57 58 //各Roomへ名称をセットする処理 59 public void SetList() 60 { 61 List1 = new List<string>(); 62 List2 = new List<string>(); 63 List3 = new List<string>(); 64 List4 = new List<string>(); 65 List5 = new List<string>(); 66 67 //Goodsmeisho(IEnumerable<GoodsMeishoViewModel>)よりセット 68 //foreach (var item in Goodsmeisho) 69 //1つのユニットに2つの名称のレコードがあるので2ずつのインクリメント 70 for (int i = 0; i < Goodsmeisho.Count(); i = i + 2) 71 { 72 //Room番号の判定 73 if (Goodsmeisho.ElementAt(i).Roomnum == 1) 74 {//RoomNo1の軌道名称を入れる 75 //結合させる 76 var tmp = Goodsmeisho.ElementAt(i).GoodsMeisho; 77 var tmp2 = Goodsmeisho.ElementAt(i + 1).GoodsMeisho; 78 //null判定 79 if (tmp == "") 80 { 81 if (tmp2 == "") 82 { 83 List1.Add(""); 84 } 85 else 86 { 87 List1.Add(tmp2); 88 } 89 } 90 else 91 { 92 if (tmp2 == "") 93 { 94 List1.Add(tmp); 95 } 96 else 97 { 98 List1.Add(tmp + '/' + tmp2); 99 } 100 } 101 } 102 else if (Goodsmeisho.ElementAt(i).Roomnum == 2) 103 {//RoomNo2のグッズ名称を入れる 104 //結合させる 105 var tmp = Goodsmeisho.ElementAt(i).GoodsMeisho; 106 var tmp2 = Goodsmeisho.ElementAt(i + 1).GoodsMeisho; 107 if (tmp == null) 108 { 109 if (tmp2 == "") 110 { 111 List2.Add(""); 112 } 113 else 114 { 115 List2.Add(tmp2); 116 } 117 } 118 else 119 { 120 if (tmp2 == "") 121 { 122 List2.Add(tmp); 123 } 124 else 125 { 126 List2.Add(tmp + '/' + tmp2); 127 } 128 } 129 } 130//これをNo.5まで冗長に記述している。実はこれもシンプルにしたかったり。。。優先度は低め
c#
1 2コントローラ初期処理 3 4public ActionResult Index() 5 { 6 var model = this.CreateModel<AModel>(); 7 // セッションよりNpgsqlConnectionを取得 8 NpgsqlConnection dataConnector = (NpgsqlConnection)Session["dataConnector"]; 9 10 // DBオープン 11 dataConnector.Open(); 12 model.GoodsMeisho = GetGoodsName(dataConnector); 13 14 model.SetList(); 15 16 dataConnector.Close(); 17 18 return View(model); 19 20 } 21 22 ///<summary> 23 ///グッズ名称の取得 24 ///<param name="formCollection">Viewから受け取ったパラメータ</param> 25 ///</summary> 26 private IEnumerable<GoodsMeishoViewModel> GetGoodsName(NpgsqlConnection dataConnector) 27 { 28 List<GoodsMeishoViewModel> goodsMeishos = new List<GoodsMeishoViewModel>(); 29 30 //グッズ名称を設定 31 32 33 34 string sql = @"select room_num,box_tsuban, goods_tsuban, goods_meisho" 35 + " from グッズ名称マスタ" 36 37 NpgsqlCommand cmd = new NpgsqlCommand(sql, dataConnector); 38 39 NpgsqlDataAdapter da = new NpgsqlDataAdapter(cmd); 40 DataSet myDS = new DataSet(); 41 da.Fill(myDS); 42 DataTable dt = myDS.Tables[0]; 43 foreach (DataRow row in dt.Rows) 44 { 45 GoodsMeishos.Add(new GoodsMeishoViewModel() 46 { 47 Roomnum = (int)row["room_num"], 48 Boxtsuban = (int)row["box_tsuban"], 49 Goodstsuban = (int)row["goods_tsuban"], 50 Goodsmeisho = row["goods_meisho"].ToString() 51 }); 52 53 54 } 55 return goodsMeishos; 56 }
c#
1View 2 3 $(function () { 4 var List1 = {}; 5 @for (int i = 0; i < Model.List1.Count(); i++) 6 { 7 @:List1[@i] = '@Model.List1[i]'; 8 } 9 10 11 for (var index in List1) 12 { 13 var num = Number(index) + 1; 14 //各Boxに振り分けているid(P01~P48) 15 var id = "#P" + (('00' + (num)).slice(-2)); 16 $(id).attr('data-title', (List1[index])); 17 18 19 } 20//tipperというプラグインのメソッドでマウスオーバーを実現している 21 $('.PA').tipper({ 22 direction: "top"}); 23 24 25 26 27 /************************************** タブクリック時のイベント ******************************/ 28 29 // Roomタブ押下時(タブオブジェクトにclass="Tabs"を設定)...ちなみにタブ含むすべてのオブジェクトはブートストラップではなく絵(SVG要素)でそれらしく見せている。 30 $('.Tabs').on('click', function (e) { 31 32 $("#RonnumSelected").val(0); 33 34 /* 押下したボタンから架番号を取得する */ 35 // ボタンのIDを取得 36 var RoomNumber = e.currentTarget.id; 37 38 // 取得した部屋番号をフォーム情報にセット(FormCollectionでControllerへ渡すためのもの) 39 $('#RoomSelected').val(RoomNumber) 40 41 42 43 44 // Room番号に応じて、パターン1またはパターン2を表示 45 /* ※現時点では[奇数:パターン1],[偶数:パターン2] */ 46 if (1 == (paNumber % 2)) { 47 // パターン1を表示、パターン2を非表示 48 $('#PATTERN1').show(); 49 $('#PATTERN2').hide(); 50 51 else { 52 // パターン1を非表示、パターン2を表示 53 $('#PATTERN1').hide(); 54 $('#PATTERN2').show(); 55 56 57 //取得した部屋番号に応じた軌道名称リストをセット 58 //Boxのid はP01~P48 59 if (RoomNumber == 1) 60 { 61 var List1 = {}; 62 @for (int i = 0; i < Model.List1.Count(); i++) 63 { 64 @:List1[@i] = '@Model.List1[i]'; 65 } 66 for (var index in List1) 67 { 68 var num = Number(index) + 1; 69 var id = "#P" + (('00' + (num)).slice(-2)) 70 $(id).attr('data-title', (List1[index])); 71 } 72 73 } 74 else if (RoomNumber == 2) 75 { 76 var List2 = {}; 77 @for (int i = 0; i < Model.List2.Count(); i++) 78 { 79 @:List2[@i] = '@Model.List2[i]'; 80 } 81 for (var index in List2) 82 { 83 var num = Number(index) + 1; 84 var id = "#P" + (('00' + (num)).slice(-2)); 85 $(id + "_P2").attr('data-title', List2[index]); 86 } 87 } 88 89 //これもNo5まで冗長に書いている 90 91//グッズ名称を出したいオブジェクトに設定しているclass = 'Name' 92 $('.Name').tipper({ 93//このtipperというメソッドでマウスオーバーでの表示を実現する 94 direction: "top" 95 }); 96 97 98 }); 99
あなたの回答
tips
プレビュー