如何在C#中从代码构建HTML

Question

我需要在我的MVC应用程序中创建一个HtmlHelper，它可以呈现一些嵌套和相当复杂的UL/LI（树状）结构。HtmlTextWriter和XmlTestWriter类提供了构建正确HTML的手段，但它们是单向的，因此使我的工作非常困难，因为在渲染标记之后，您没有对“父”标记的引用。

XDocument和XElement类是我看过的下一个候选项，但它们已创建用于XML而不是HTML，这可能会导致不太有效的HTML（自关闭标记等）。

我该怎么做呢？ 这个所谓的重复问题实际上并不重复，并且根本没有回答我的问题。它是关于构建HTML-Helper呈现单个Html-Tag。这不是我要的。我想知道如何在C#代码中构建整个DOM。

- Mats

---

建议您探索MVC源代码 - 查看System.Web.MVC.Html命名空间。创建分层树形结构的帮助程序示例在此答案中显示。通常使用TagBuilder类构造HTML元素。 - user3559349

可能是重复的问题：创建 Html 助手方法 - MVC 框架 - JasonWilczak

Answer 1

如果我要开始做这个，我会用以下的方式（简化）：

项目类

    public class HtmlListItem 
    {
         public string Content { get; set; }
         public object HtmlAttributes { get; set; }
    }

Html Helper（HTML助手）

    public HtmlString RenderList(this HtmlHelper htmlHelper, IEnumerable<HtmlListItem> list, object uListHtmlAttributes)
        {
            TagBuilder ul = new Tagbuilder("ul");
            IDictionary<string, object> uListAttributes = new RouteValueDictionary(uListHtmlAttributes);
            ul.MergeAttributes(uListAttributes);
            StringBuilder builder = new StringBuilder();
            builder.Append(ul.ToString(TagRenderMode.StartTag) + Environment.NewLine);

            foreach (var item in list) 
            {
                TagBuilder hold = new TagBuilder("li");
                IDictionary<string, object> htmlAttributes = new RouteValueDictionary(item.HtmlAttributes);
                hold.MergeAttributes(htmlAttributes);
                hold.InnerHtml = item.Content;
                builder.Append(hold.ToString(TagRenderMode.Normal) + Environment.NewLine);
            }

            builder.Append("</ul>" + Environment.NewLine);
            return new HtmlString(builder.ToString());
        }

- Ceshion

---

你能展示一下使用样例吗？数据属性是如何传递的？ - Transformer

Answer 2

我以前也想过做类似的事情，最终玩弄了一个对象结构来表示元素，就像服务器端的DOM一样，在渲染到HTML之前可以在代码中进行操作。

其他人也做过类似的事情。值得注意的例子有SharpDOM：http://www.codeproject.com/Articles/667581/SharpDOM-a-new-view-engine-for-ASP-NET-MVC和CityLizard：https://citylizard.codeplex.com/

现在，我倾向于构建一个视图模型来处理大部分逻辑和视图的操作，然后进行渲染。

您还可以发现部分视图（递归调用）是一种有用的方法。

- DigitalDan