如何在C＃中使用Code构建HTML

Question

I need to create an HtmlHelper in my MVC application which renders out some nested and fairly complex UL/LI (tree-like) structures. The HtmlTextWriter and XmlTestWriter classes provide means to construct proper HTML, but they are forward-only thus making my job pretty difficult, since after you rendered a tag you don't have a reference to "parent" tag.

XDocument and XElement classes were the next candidates I looked at, but they have been created for XML and not for HTML, which might result in no-so-valid HTML (self-closing tags etc.).

How would I go about this?

This alleged duplicate is not really a duplicate and doesn't answer my question at all. It is about building an HTML-Helper rendering a single Html-Tag. This is not what I am after. I'd like to know how to build an entire DOM in C# code.

Answer 1

I've wanted to do something like this before, and ended up playing around with an object structure that would represent elements, like a server side DOM, that could be manipulated in code before rendering to HTML.

Others have done similar things. Notable examples are SharpDOM: http://www.codeproject.com/Articles/667581/SharpDOM-a-new-view-engine-for-ASP-NET-MVC and CityLizard: https://citylizard.codeplex.com/

These days I tend to build a View Model that deals with most of the logic and manipulation of how the view should look then render that instead.

You may also find partial views (called recursively) a useful approach.

Answer 2

If I were to go about doing this, I'd do it in a way such as this (simplified):

Item Class

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

Html Helper

    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());
        }