在ASP.NET Core中使用无序列表创建树

Question

I have:

• Class Person
• A person with a list of children ( List<Person> children )
• The tree is imported into the Razor page

I am trying to create a tree in a Razor page with this. I have tried doing it with only Razor code, like seen below:

<div class="container" style="padding-top:5%;">
        <div class="tree">

            @helper ShowTree(Person root)
            {
                <ul>
                    <li>
                        <a href="#">@root.Name</a>
                        @if (root.children.Count() > 0)
                        {
                            foreach (var child in root.children)
                            {
                                @Show(child)
                            }
                        }
                    </li>
                </ul>
            }

        </div>
    </div>

    @helper Show(Person child)
    {
        <ul>
            <li><a href="#">@child.Name</a></li>
            @if (child.children.Count() > 0)
            {
                foreach (var c in child.children)
                {
                    Show(c);
                }
            }
        </ul>
    }

    {
        @ShowTree(Model);
    }

As can be seen I try to nest children inside the parent with unordered list recursively. And I have to do it like this in order for the CSS to work, example below:

<ul><li><a href="#">Root</a> 
        <ul><li><a href="#">Root.Child</a></li></ul> 
</li></ul>

For some reason it didn't want to print grand children. I don't get why.

Question 1: anybody got an idea why it skips to print grandchildren?

---

Secondly, I tried to do the same in JavaScript. However, I don't know how to insert the Razor Model into JavaScript. I just get an error message saying "is not defined at INDEX". I will also insert the code below if that will help:

<script type="text/javascript">
    var root= Model;
    var html = "";

    function Show(child) {
        html += "<ul>";
        html += "<li><a href='#'>";
        html += child.Name;
        html += "</a >";
        if (child.children.Count() > 0) {
            for (var c in child.children) {
                Show(c)
            }
        }
        html += "</li></ul>";
    }

    function ShowTree(root) {
        html += "<ul>";
        html += "<li>";
        html += "<a href='#'>";
        html += root.Name;
        html += "</a>";
        if (root.children.Count() > 0) {
            for (var child in root.children) {
                Show(child)
            }
        }
        html += "</li>";
        html += "</ul>";

    }

    ShowTree(root);

    $("div.container > div.tree ul").append(html);

</script>

Question 2: is there any way to insert Model into the script tag? I read about <text> tags but they didn't help me at all.

Answer 1

is there any way to insert Model into the script tag?

you can easily inject your viewmodel into a view file:

@model SO.Models.Person

and now you can get the json representation of Model via :

 <script> var root = @Html.Raw(Json.Serialize(Model)) ; // … show root </script> 

when downloaded from server , the javascript looks like :

 <script> var root = {"id":1,"name":"root.Name","children":[{"id":2,"name":"c1.Name","children":[]},{"id":3,"name":"c2.Name","children":[]},{"id":4,"name":"c3.Name","children":[]}]} ; </script>