TagHelperContent.AppendHtml does not append but replace

[ygoe]

Describe the bug

In a TagHelper, I use the AppendHtml method to append <option> elements to a <select> element. This works if I don't already define options in the select HTML code. But if there's already options in there, the tag helper just deletes them and only the options added by the tag helper remain. The predefined options are gone. That's not what I understand as "append".

To Reproduce

HTML:

<select asp-for="User.LocationId" options="Model.Locations">
	<option value="0">(keine)</option>
</select>

C#:

[HtmlTargetElement("select")]
public class SelectTagHelper : TagHelper
{
	private readonly IHtmlGenerator generator;

	public SelectTagHelper(IHtmlGenerator generator)
	{
		this.generator = generator;
	}

	[HtmlAttributeNotBound]
	[ViewContext]
	public ViewContext ViewContext { get; set; }

	[HtmlAttributeName("asp-for")]
	public ModelExpression For { get; set; }

	public IEnumerable<SelectListOption> Options { get; set; }

	public override void Init(TagHelperContext context)
	{
		if (For == null)
		{
			context.Items[typeof(SelectTagHelper)] = null;
			return;
		}

		var realModelType = For.ModelExplorer.ModelType;
		allowMultiple = realModelType != typeof(string) && typeof(IEnumerable).IsAssignableFrom(realModelType);
		currentValues = generator.GetCurrentValues(ViewContext, For.ModelExplorer, For.Name, allowMultiple);

		context.Items[typeof(SelectTagHelper)] = currentValues;
	}

	public override void Process(TagHelperContext context, TagHelperOutput output)
	{
		if (Options != null)
		{
			var listItemBuilder = new HtmlContentBuilder(Options.Count());

			foreach (var option in Options)
			{
				var tagBuilder = new TagBuilder("option");
				tagBuilder.InnerHtml.SetContent(option.Text);
				tagBuilder.Attributes["value"] = option.Value;
				if (option.Summary != null)
					tagBuilder.Attributes["data-summary"] = option.Summary;
				if (option.HtmlText != null)
					tagBuilder.Attributes["data-html"] = option.HtmlText;
				if (option.HtmlSummary != null)
					tagBuilder.Attributes["data-summary-html"] = option.HtmlSummary;
				if (option.Selected || currentValues?.Contains(option.Value) == true)
					tagBuilder.Attributes["selected"] = "selected";
				if (option.Disabled)
					tagBuilder.Attributes["disabled"] = "disabled";

				listItemBuilder.AppendLine(tagBuilder);
			}

			// The following line removes already existing options, see HTML above
			output.Content.AppendHtml(listItemBuilder);
		}
	}
}

Further technical details

• ASP.NET Core version: 3.1.11
• Include the output of dotnet --info

.NET SDK (gemäß "global.json"):
 Version:   5.0.102
 Commit:    71365b4d42

Laufzeitumgebung:
 OS Name:     Windows
 OS Version:  10.0.19041
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\5.0.102\

Host (useful for support):
  Version: 5.0.2
  Commit:  cb5f173b96

.NET SDKs installed:
  5.0.102 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

• The IDE (VS / VS Code/ VS4Mac) you're running on, and its version: Visual Studio 2019 16.8.4, Windows 10 x64

[javiercn]

@ygoe thanks for contacting us.

From looking at the code, this can be a bug in the implementation. We probably can add a test here to validate the case.

The logic here seems suspicious and might indicate the root cause, but more analysis is needed.

This is just a hypothesis from looking at the code, the proper root cause is yet to be identified.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[fvoronin]

I figured out the problem. The reason is the following.
When RazorPage is executed, the following code is involved in the html generation process

    await __tagHelperRunner.RunAsync(__tagHelperExecutionContext);
    if (!__tagHelperExecutionContext.Output.IsContentModified)
    {
        await __tagHelperExecutionContext.SetOutputContentAsync();
    }
    Write(__tagHelperExecutionContext.Output);

This code is generated for .cshtml files for each TagHelper

What is important, there are 3 properties defined for Output (it is TagHelperOutput type) - sections for internal tag content output: PreContent, Content, PostContent of TagHelperContent type.

Then the above code logically looks like this

    if (!Output.Content.IsModified)
    {
        Output.Content = GetChildContentAsync();
    }
    Write(Output.PreContent);
    Write(Output.Content);
    Write(Output.PostContent);

The Content prop will be considered modified (Content.IsModified == true) if we call Append() or AppendHtml() on it.
I.e. the html code defined inside our tag will be saved and not overwritten unless we do not touch the Content prop.

In order to achieve the desired result

• we can change PreContent and/or PostContent inside Process method of our custom TagHelper
• we can initialize Content (output.Content.SetContent(...)) with output.GetChildContentAsync() and then safely call AppendHtml() on it.

I'm not sure it's worth making changes to the Razor code as it would be BrakingChanges. Imho it's better supplementing the documentation to describe that if you change output.Content, you are responsible for it completely.

/cc @javiercn

[singh733]

Hi,

In the custom tag helper we need to set the Output.Content. See image below. Append Html does not remove the option.

[singh733]

or you can use the Async version

[isbullaml]

I wanted to make a contribution. Can you please guide me on this issue?