如何使用 razor pages 实现这棵树

Question

如何使用剃刀页面tree实现

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();
    }

这个 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函数成功了

本页url.home错误

Answer 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

我编辑新问题是因为我认为重新组织和post它们是正确的。

如何使用 razor pages 实现这棵树

How to implement this tree using razor pages

c#

jquery-plugins

asp.net-core

razor-pages