How to implement tree using razor pages
The sequence I was trying to implement is this: If you click the data of record, all records that have the record as the parent record are searched and displayed.
Determining the record to show is to get True/false data through the checkbox and decide whether to show the child or not.
However, I found that the data of the checkbox is initialized when the page is loaded through return page().
so i test this
public async Task<IActionResult> OnPostReWork()
{
if (!booTest)
booTest = true;
else
booTest = false;
await _context.SaveChangesAsync();
return Page();
}
this booTest is always false
public class TreeNode
{
public List <string> subTreeNodes; //하위 오브젝트들
public string dataName;
public bool boolData;
public TreeNode(List<string> treeNodex)
{
subTreeNodes = treeNodex;
}
}
update
in cshtml
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: loaderSpin 2s linear infinite;
}
</style>
</head>
<body>
<h2>Tree View</h2>
<div class="loader" style="display: none;" id="loader"></div>
<form method="post">
@*<input asp-page-handler="ReWork" class="btn" type="submit" value="검증요청취소" />*@
@* 여기에 첫번쨰 treenode만 넣어주면 모든 트리노드 재귀로 검색함*@
<input type="checkbox"
onclick="requestMyAction('@Model.tree_List[0].board_id', this.checked, 'loader-@Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-@Model.tree_List[0].dataName">@Model.tree_List[0]
@RecursiveData(Model.tree_List[0]);
</div>
@*<input type="checkbox"
onclick="requestMyAction('@Model.tree_List[0].board_id', this.checked, 'loader-@Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-@Model.tree_List[0].dataName">@Model.tree_List[0]</div>*@
</form>
@section scripts{
<script type="text/javascript">
function requestMyAction(itemId, isChecked, loaderId) {
document.getElementById(loaderId).style.display = "inline-block";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
document.getElementById(loaderId).style.display = "none";
if (this.status === 200) {
document.getElementById(loaderId).style.display = "none";
}
}
};
var url = '@Url.Page("./TreeExample", "MyAction")';
xhr.open('POST', url);
xhr.setRequestHeader('RequestVerificationToken', '@Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
var data = new FormData();
data.append('itemName', itemId);
data.append('deploy', isChecked);
xhr.send(data);
}
;
</script>
}
</body>
</html>
@{
string RecursiveData(TreeWithUnity.Model.TreeNode tn)
{
if (tn.deployment)
{
<input type="checkbox"
onclick="requestMyAction('@tn.board_id', this.checked, 'loader-@tn.dataName');" />
<div class="loader" style="display: none;" id="loader-@tn.dataName">@tn.dataName</div>
<br />
for (int i = 0; i < tn.subTreeNodes.Count; i++)
RecursiveData(tn.subTreeNodes[i]);
}
return "Tree";
}
}
Finally, I succeeded in calling a function in cs from JavaScript.
enter link description here this page url.home error
<h2>Tree View</h2>
<div class="loader" style="display: none;" id="loader"></div>
<form method="post">
@*<input asp-page-handler="ReWork" class="btn" type="submit" value="검증요청취소" />*@
@* 여기에 첫번쨰 treenode만 넣어주면 모든 트리노드 재귀로 검색함*@
<input type="checkbox"
onclick="requestMyAction('@Model.tree_List[0].board_id', this.checked, 'loader-@Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-@Model.tree_List[0].dataName">@Model.tree_List[0]
@RecursiveData(Model.tree_List[0]);
</div>
@*<input type="checkbox"
onclick="requestMyAction('@Model.tree_List[0].board_id', this.checked, 'loader-@Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-@Model.tree_List[0].dataName">@Model.tree_List[0]</div>*@
</form>
@section scripts{
<script type="text/javascript">
function requestMyAction(itemId, isChecked, loaderId) {
document.getElementById(loaderId).style.display = "inline-block";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
document.getElementById(loaderId).style.display = "none";
if (this.status === 200) {
document.getElementById(loaderId).style.display = "none";
}
}
};
var url = '@Url.Page("./TreeExample", "MyAction")';
xhr.open('POST', url);
xhr.setRequestHeader('RequestVerificationToken', '@Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
var data = new FormData();
data.append('itemName', itemId);
data.append('deploy', isChecked);
xhr.send(data);
}
;
</script>
}
</body>
</html>
Note that url.page is not assigned a url
And I edit new questions because I think it is right to organize them and post them anew.