.NET 前端編輯樹形 JSON 數據並回寫服務端

架構圖解

瀏覽器 (JS 編輯樹) 
    │ AJAX POST (修改後的 JSON)
    ▼
ASP.NET 後端 (Web API / MVC Controller)
    │ 反序列化 → 修改記憶體物件 / 直接覆寫 .js 檔案
    ▼
儲存層 (檔案系統 / 資料庫)

關鍵步驟

1. 前端：取得樹數據、編輯、提交

// 載入
fetch('/api/tree').then(r => r.json()).then(data => renderTree(data));

// 編輯後提交
function saveTree(modifiedData) {
  fetch('/api/tree', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(modifiedData)
  }).then(r => r.json()).then(resp => console.log('saved', resp));
}

2. 後端：接收並持久化

[HttpPost("api/tree")]
public IActionResult SaveTree([FromBody] JsonNode treeData) {
    // 方案 A：直接覆寫 .js 檔案（簡單，適合靜態數據）
    var jsContent = "var flare_data = " + treeData.ToJsonString() + ";";
    System.IO.File.WriteAllText("wwwroot/data/flare_data.js", jsContent);

    // 方案 B：存入資料庫（建議，支援並發、版本、查詢）
    // _repo.Save(treeData);

    return Ok(new { success = true });
}

重要考量

• 並發控制：直接寫檔案會有競態條件，建議用資料庫或加檔案鎖 lock (fileLock)。
• 資料驗證：後端必須驗證樹結構完整性（如無環、必填欄位）。
• 增量更新 vs 全量覆蓋：小樹全量覆蓋簡單；大樹建議傳遞 diff（操作日誌）由後端重放。
• 安全性：驗證用戶權限，防止惡意篡改。

為什麼不建議直接改 .js 檔案？

1. 靜態檔案常被 CDN/瀏覽器快取，更新不即時。
2. 多實例部署時檔案系統不共享。
3. 無法支援事務回滾、審計日誌。

總結

前端 AJAX POST JSON → 後端反序列化 → **持久化到資料庫**（推薦）或加鎖寫檔案。別把業務數據存在靜態 .js 裡，資料庫才是正解。