DotVVM code only component dont generate HTML structure correctly

Question

I have my own component for treeview menu and I want to generate HTML structure like this.

<a href>
    <span class="something">
        <i class="icon"></i>
    </span>
</a>

Here is my code where I generate structure for my menu

public void DataBindItem(DotvvmControl parent, AdminMenuListDTO item, IDotvvmRequestContext context)
    {
        var li = new HtmlGenericControl("li");


        if (item.HasCategories)
        {
            //holder pro ikonu (šipku ukazující možnost rozbalení menu)
            var iClassContainer = new HtmlGenericControl("span");
            iClassContainer.Attributes.Add("class", "pull-right-container");

            //ikona pro šipku ukazující možnost rozbalení menu
            var iClass = new HtmlGenericControl("i");
            iClass.Attributes.Add("class", "fa fa-angle-left pull-right");

            li.Attributes.Add("class", "treeview expandable");
            if (!string.IsNullOrEmpty(item.Name))
            {
                var ahref = new HtmlGenericControl("a");
                ahref.InnerText = item.Name;
                ahref.Attributes.Add("class", "tree-toggler nav-header");
                ahref.Attributes.Add("id", item.Id.ToString());

                // add <a href> to <li> 
                li.Children.Add(ahref);

                // add <span> container to <a href> 
                ahref.Children.Add(iClassContainer);

                // add <i class> to <span> which contains icon 
                iClassContainer.Children.Add(iClass);
            }

            var childContainer = new HtmlGenericControl("ul");
            childContainer.Attributes.Add("class", "nav nav-list tree");
            childContainer.Attributes.Add("style", "display:none;");

            foreach (var child in item.AssignedToMenuItem)
            {
                DataBindItem(childContainer, child, context);
            }

            li.Children.Add(childContainer);
        }
        else
        {
            li.Attributes.Add("style", "treeview");
            if (item.RouteName != null)
            {
                var routeLink = new RouteLink();
                routeLink.RouteName = item.RouteName;
                routeLink.Text = item.Name;
                routeLink.Attributes.Add("class", "js_isRoute_" + item.Id.ToString());
                routeLink.Attributes.Add("id", item.Id.ToString());
                li.Children.Add(routeLink);
            }
        }
        parent.Children.Add(li);
    }

Problem is my whole structure is not rendered in my view, I only see this. My <a href> tag should also contains span and i.

My structre is not rendered correctly but in debug mode in vs in my component I see it generated correctly. What I do wrong?

Answer 1

It's because the InnerText property works the same way as it works in classic HTML. It replaces all children inside the element.