Как создать вложенные теги <ul> <li> с помощью HtmlTags (FubuMVC)
У меня нет предыдущего опыта работы с библиотекой FubuMVC HtmlTags, и я просто застрял при попытке создать простую вложенную структуру, подобную этой:
<ul>
<li>text</li>
<li>text
<ul>
<li>subtext</li>
<li>subtext</li>
</ul>
</li>
<li>text</li>
</ul>
Вот как у меня это при построении строки:
public static HtmlString ChildNodesRecursive(DocumentNode documentNode)
{
var tag="";
if (documentNode.Children.Count > 0)
{
tag = "<ul>";
foreach (var c in documentNode.Children)
{
tag += "<li>" + c.Name;
tag += ChildNodesRecursive(c);
tag += "</li>";
}
tag += "</ul>";
}
return new HtmlString(tag);
}
Работает нормально, но мне нравится использовать библиотеку HtmlTags (за пределами FubuMvc, с HtmlTags, отдельным Nuget).
Изменить: я получил вдохновение от обоих ответов и придумал, что мне нужно. Итак, вот код, который я в итоге использовал.
public static HtmlTags.HtmlTag ChildNodesRecursiveHtmlTag(DocumentNode documentNode)
{
var ul = new HtmlTags.HtmlTag("ul");
foreach (var c in documentNode.Children)
{
var li = new HtmlTags.HtmlTag("li");
li.Add("a").Attr("href",c.ContextFullPath).Text(c.Name);
if (c.Children.Count > 0)
{
li.Children.Add(ChildNodesRecursiveHtmlTag(c));
}
ul.Children.Add(li);
}
return ul;
}
2 ответа
Решение
Я могу привести вам пример, который может прояснить вам ситуацию:
var ul = new HtmlTag("span").AddClass("form_input");
ul.Modify(t =>
{
foreach (var value in choice)
{
t.Add("input")
.Attr("type", "radio")
.Attr("name", request.Accessor.Name)
.Attr("value", value)
.Add("span")
.AddClass("fixed-width")
.Text(value);
}
});
Дает вам что-то вроде
<span class="form-input">
<input type="radio" name="bla" value="foo" />
<span class="fixed-width">foo</span>
...etc...
</span>
Вы можете продолжать вкладывать теги с изменением и заполнением лямбды. Я думаю, вы обнаружите, что то, что вы хотите сделать, возможно с показанными битами синтаксиса.
Этот код:
var root = new HtmlTags.HtmlTag("ul");
root.Add("li").Text("item1");
var child = root.Add("ul");
child.Add("li").Text("item2");
return root.ToPrettyString();
производит следующий вывод:
-
<Литий> элемент1 литий>
- item2 li> UL> UL>