ASP.NETでツリービューを作成したい。
下記にやりたいことを、記載します。
※”3.シリアライズしたデータをjavascript側へ渡す” 方法を重点的に教えて頂けると幸いです。そもそもこのやり方に問題がある場合はご指摘ねがいます。
[やりたいこと]
・Asp.netで以下の様なツリー階層を作りたい。※ツリーの階層(ノード)は3つ。
・親要素をクリックしたタイミングで、子のノードを作る。(表示する要素が多いためロード時に全て表示するとパフォーマンスがわるいため)
・一度展開されて子ノードが追加されている場合は、何もしない。
A
-|A-1
-|A-1-1
-|A-1-2
-|A-1-3
-|A-2
-|A-2-1
-|A-2-2
B
-|B-1
-|B-1-1
-|B-1-2
-|B-1-3
-|B-2
-|B-2-1
-|B-2-2
[.aspx.cs] サーバサイド
1.DBからtreeviewに追加するデータを取得。
2.取得したデータをjson形式にシリアライズ
3.シリアライズしたデータをjavascript側へ渡す
[javascript or jquery] クライアントサイド
4.ツリー展開時に3.のデータを追加・表示
No.1ベストアンサー
- 回答日時:
一般的に考えれば AJAX で JSON をやり取りする設計になると思います。
サーバー側ではツリー表示をせずに、すべてクライアント側で描画する前提でよいでしょう。サーバー側 asp.net
親要素を引数にとり子要素一覧の JSON を応答する Web API を用意
クライアント側 HTML内のスクリプト
要素を特定する ID を <li data-tree-id="12"> の様に設置
<li> 要素をクリックしたら AJAX で Web API を呼び、子要素一覧 JSON を取る
<li> の配下に配下ツリーを追加して、子要素一覧を画面に追加
例) サーバー側
/api/tree-list?parent=12
↓ 応答
Content-Type: application/json
[{"name":"A-2-1", id:121}, {"name":"A-2-2", id:122}, ... ]
例) クライアント側
document.querySelector("#tree-root")
.addEventListener('click',function(event){
_ let node = event.target.closest('li'); if (!node) return;
_ let treeId = node.dataset.treeId; if (!treeId) return;
_ fetch(`/api/tree-list?parent=${treeId}`)
_ _ .then(response => response.json())
_ _ .then(data => node.appendChild(配下ツリーを作る(data)))
_ _ .then(x => node.dataset.treeId = null);
},false);
参考)
サーバー側 Web API の作り方
https://docs.microsoft.com/ja-jp/aspnet/core/web …
クライアント側 AJAX
https://developer.mozilla.org/ja/docs/Web/Guide/ …
ありがとうございます。
流れ的には、以下の様な感じでしょうか。
クライアント側のツリーイベントクリック→サーバサイド(asp.net)のWebAPIを呼び出しデータを入手。取得したデータをクライアント側の処理でツリーへ追加。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Ruby pandasでsqlite3にテーブル作成・追加・読み出しでindexの取り扱い方教えてください 5 2023/03/08 09:57
- その他(プログラミング・Web制作) python 3.10で 同じlistに同じ構文で同じデータ代入した結果が異なる現象発生 7 2022/06/18 11:08
- Excel(エクセル) VBAで重複データを合算したい(時間) 1 2022/12/08 23:06
- Excel(エクセル) アウトラインの小計のやり方 1 2023/03/20 11:51
- Excel(エクセル) EXCEL 関数を教えてください。(A列の同じ値が複数ある場合vlookupで出来ますか) 4 2022/12/07 20:54
- Excel(エクセル) 図のような散布図の作り方を教えてください。 1 2022/07/19 11:52
- Gmail Gmailの使い方について、詳しい方教えてください。 1 2022/04/24 13:04
- Visual Basic(VBA) 列と行の名前(重複あり)が交差するセルに、データを入力したい 2 2022/06/25 22:42
- その他(Microsoft Office) Excelで該当しない項目(#N/Aの商品名)を簡単に表示・抽出させる方法についてです 1 2022/08/25 22:12
- XML XML同じ名前の要素を自動で集約するツール 1 2022/04/11 09:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Listからのnull要素を削除方法は?
-
getElementsByNameの要素数が取...
-
CPUの考え方を教えてください ...
-
XMLで要素が記述された順番に意...
-
バッチファイルでテキストファ...
-
昔Winnyってありましたけど、あ...
-
あせんうぶり言語
-
XSLで、XMLの空タグを制御したい。
-
VB6でXMLを作成しているのです...
-
SNMP リンクダウンとノードダ...
-
あるノードリストに、特定の名...
-
HTTPステータス 404 - There is...
-
コンテキストメニュークリック...
-
ノードの並び替え
-
ルート要素ノードが2個ある場合?
-
ノードとは
-
このエラー、何とかなりません...
-
html→xmlの変換
-
xmlファイルが上手にHTMLに変換...
-
Excel-VBAでXMLの複数ノードの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
大規模行列の計算
-
XML:連番要素の全ての子要素にx...
-
MFCでのタブコントロールに...
-
フロートってなに?
-
element of surprise
-
hana no namae osiete kudasai.
-
VB2005でXMLデータから複数ある...
-
svgをhtmlに埋め込んで使いたい
-
getElementsByNameの要素数が取...
-
動的にメモリを確保した配列の...
-
Webページに関するさまざまな情...
-
cssで外部ファイルを読み込む
-
Listからのnull要素を削除方法は?
-
ASP.NETでツリービューを作成し...
-
HPビルダー2001で選んで流す。
-
どうあがいてもIE6のエンコード...
-
XMLはなぜ普及したのか?
-
XSLTの記述方法
-
HTMLでol、liで作成した長...
-
2つの行動の違い
おすすめ情報