TagBuilder InnerHtml in ASP.NET 5 MVC 6

Question

It seems to me that there are major breaking changes in TagBuilder as of beta7 with no mention about them in the announcements repo.

Specifically .ToString no longer renders the tagbuilder, it just returns the name of the type. previously we could do things like this inside our HtmlHelper extensions to build up nested html elements:

var li = new TagBuilder("li");
li.AddCssClass("inactive");
var span = new TagBuilder("span");
span.SetInnerText(somestring);
li.InnerHtml = span.ToString();

.InnerHtml now no longer accepts string because it is now IHtmlContent

but since .ToString() doesn't render the tag this doesn't work either:

li.InnerHtml = new HtmlString(span.ToString())

it merely renders as "Microsoft.AspNet.Mvc.Rendering.TagBuilder", the name of the type.

I don't see any new methods on TagBuilder to provide the needed functionality. What am I missing? How can I build complex nested html with TagBuilder now?

Answer 1

Using MVC 6, at the time of writing, Tagbuiler.InnerHtml has indeed no setter anymore. It has some methods instead to append the element. For instance you could write:

var container = new TagBuilder("div");
var input = new TagBuilder("input");

container.InnerHtml.AppendHtml(input);

Answer 2

Because TagBuilder now implements IHtmlContent, you should be able to use it directly, without doing .ToString().

var li = new TagBuilder("li");
li.AddCssClass("inactive");
var span = new TagBuilder("span");
span.SetInnerText(somestring);
li.InnerHtml = span;

The real problem with the current implementation in Beta 7 is that there is no easy way to append two child tag builder contents to a parent one. You can follow the discussion on GitHub.

The current proposal is to make InnerHtml not assignable, but support Append instead. This is targeted to be implemented in Beta 8.

The workaround in Beta 7 is to call parent.WriteTo with a StringWriter to convert it to a string.

Answer 3

Having lost span.SetInnerText(somestring); it is now possible to do

span.InnerHtml.SetContent(somestring);

using Microsoft.AspNetCore.Html.HtmlContentBuilderExtensions.

This is coming from a perspective of 4.7 with AspNetCore 2.0.1.

Answer 4

Building on @Mihai's answer to show the actual code for the StringWriter approach:

// Create tag builder
var builder = new TagBuilder("img");
//...
// Render tag approach also changed in .NetCore
builder.TagRenderMode = TagRenderMode.SelfClosing;

//Create the StringWriter and make TagBuilder "WriteTo" it
var stringWriter = new System.IO.StringWriter();
builder.WriteTo(stringWriter, HtmlEncoder.Default);
var tagBuilderIsFinallyAStringNow = stringWriter.ToString();

Answer 5

@Memet Olsen

All my custom TagHelpers broke with an update to 4.6.1 (1.0.0-rc2). InnerHtml.Append() will no longer accept a TagBuilder.

Instead, AppendHtml() method should be used:

var container = new TagBuilder("div");
var input = new TagBuilder("input");

container.InnerHtml.AppendHtml(input);

2nd bug-fix [here]

Answer 6

Beta 8 solved this issue by adding an Append() method to tag helpers.

For beta 7 the solution would be to use the BufferedHtmlContent() class, but since it is not accessible we must do some extra work.

private class MyBufferedHtmlContent : IHtmlContent
{
    internal List<IHtmlContent> Entries { get; } = new List<IHtmlContent>();

    public MyBufferedHtmlContent Append(IHtmlContent htmlContent)
    {
        Entries.Add(htmlContent);
        return this;
    }

    public void WriteTo(TextWriter writer, IHtmlEncoder encoder)
    {
        foreach (var entry in Entries)
        {
            entry.WriteTo(writer, encoder);
        }
    }
}

Usage:

TagBuilder firstChild = new TagBuilder("input");
firstChild.MergeAttribute("type", "hidden");
firstChild.MergeAttribute("name", "Ids");
firstChild.TagRenderMode = TagRenderMode.SelfClosing;

TagBuilder secondChild = new TagBuilder("input");
secondChild.MergeAttribute("type", "hidden");
secondChild.MergeAttribute("name", "Ids");
secondChild.TagRenderMode = TagRenderMode.SelfClosing;

var innerHtml = new MyBufferedHtmlContent();
innerHtml.Append(firstChild);
innerHtml.Append(secondChild);
TagBuilder parent = new TagBuilder("div");
parent.InnerHtml = innerHtml;