ASP.NETでツリービューを作成したい。 下記にやりたいことを、記載します。 ※”3.シリアライズ

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 ベストアンサー 回答者： Ogre7077 回答日時： 2021/08/21 08:29

一般的に考えれば 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を呼び出しデータを入手。取得したデータをクライアント側の処理でツリーへ追加。

お礼日時：2021/08/21 08:58