如何使用剃须刀页面实现此树答案

【问题标题】：How to implement this tree using razor pages如何使用剃须刀页面实现此树
【发布时间】：2021-08-26 09:27:12
【问题描述】：

如何使用剃须刀页面实现tree

我试图实现的序列是这样的：如果你点击数据 of record，所有以该记录为父记录的记录搜索并显示。

确定要显示的记录是通过复选框并决定是否显示孩子。

但是我发现checkbox的数据是在初始化的时候页面通过 return page() 加载。

所以我测试一下

  public async Task<IActionResult> OnPostReWork()
  {
        if (!booTest)
            booTest = true;
        else
            booTest = false;
        await _context.SaveChangesAsync();
         return  Page();
    }

这个 booTest 总是假的

 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 中的函数。

enter link description here 此页面 url.home 错误

【问题讨论】：

仅供参考 OnPostReWork 在服务器而非客户端上运行。所以你需要在 TempData 或 Session 中保留 booTest 以保持其在 PostBacks 上的值
@user960567 临时数据使用 cookie 。我知道饼干很小。如何保存自定义数据（嵌套 TreeNode）

标签： c# asp.net-core jquery-plugins razor-pages

【解决方案1】：


    <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.page 没有分配 url

我编辑新问题是因为我认为组织它们并重新发布它们是正确的。

【讨论】：