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?
It's because the InnerText
property works the same way as it works in classic HTML. It replaces all children inside the element.