如何使用razor页面实现树
我试图实现的序列是这样的:如果您单击数据记录中，所有以该记录为父记录的记录都是查找并显示
确定要显示的记录是通过复选框，并决定是否显示孩子。
但是，我发现复选框的数据在页面通过return Page()加载。
所以我测试这个
public async Task<IActionResult> OnPostReWork()
{
if (!booTest)
booTest = true;
else
booTest = false;
await _context.SaveChangesAsync();
return Page();
}
this booTest总是false
public class TreeNode
{
public List <string> subTreeNodes; //하위 오브젝트들
public string dataName;
public bool boolData;
public TreeNode(List<string> treeNodex)
{
subTreeNodes = treeNodex;
}
}
更新在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";
}
}
最后，我成功地从JavaScript中调用了cs中的一个函数。
在这里输入链接描述这个网页的网址。家误差
<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>
注意url。页面没有分配url
我编辑新问题，因为我认为整理它们并重新发布是正确的。