converting string builder to tagbuilder asp.net mvc 4

Question

I am building an HTML Helper and it does the job, but I am using a StringBuilder class to output the following

<div class="panel panel-default">
    <div class="panel-heading">The Panel Title</div>
    <div class="panel-body">
        <h2><span>Content stuff</span></h2>
    </div>
</div>

How do you write an MVC 4 HTML Helper using the TagBuilder class?

Answer 1

TagBuilder span = new TagBuilder("span");
span.InnerHtml = "Content stuff";

TagBuilder heading = new TagBuilder ("h2");
heading.InnerHtml = span.ToString();

StringBuilder html = new StringBuilder();

TagBuilder div = new TagBuilder("div");
div.AddCssClass("panel-heading");
div.InnerHtml = "The Panel Title";
html.Append(div.ToString());

div = new TagBuilder("div");
div.AddCssClass("panel-body");
div.InnerHtml = heading.ToString();
html.Append(div.ToString());

div = new TagBuilder("div");
div.AddCssClass("panel panel-default");
div.InnerHtml = html.ToString();

return MvcHtmlString.Create(div.ToString());

Answer 2

I hope it will help someone. There is an extension that I wrote for TagBuilder for implementing complex html structure:

    var htmlFactory = new HtmlFactory(); 
    htmlFactory.Add("div")
        .Style("display", "block")
        .Class("base-item")
        .Inner(elements =>
        {
            elements.Add("span")
                .Class("header")
                .Text("Header");
            elements.Add("div")
                .Class("subheader")
                .Inner(inner =>
                {
                    inner.Add("span")
                        .Class("subheader-content")
                        .Text("SubHeader");
                });
        });

    var result = htmlFactory.ToString();

and it produces the following result:

<div class="base-item" style="display:block;">
    <span class="header">Header</span>
    <div class="subheader">
        <span class="subheader-content">SubHeader</span>
    </div>
</div>