Skip to content

Using Blazor server components without ending whitespace in wrapping container places the last component first #43688

Open
@Gebov

Description

@Gebov

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

I am using a standard razor pages application and using Blazor Server rendering to it. There are lots of articles on how to do this. This is just one.

If you render the same component (or different ones in the same wrapping container) without leaving a new line before the closing wrapping tag at the end like so:

<div>
@(await Html.RenderComponentAsync<TestComponent>(RenderMode.Server, new { Title = "Test 1" }))
@(await Html.RenderComponentAsync<TestComponent>(RenderMode.Server, new { Title = "Test 2" }))
@(await Html.RenderComponentAsync<TestComponent>(RenderMode.Server, new { Title = "Test 3" }))</div>

It will render the components in a different order - placing the last one (Test 3) first:

image

Expected Behavior

I would expect the components to be rendered as they are placed in the code like so:

image

Steps To Reproduce

I am using a starter template for a razor pages app and just added my custom blazor component to it. All there is to do is to run the app, it would automatically open the Index page.

The changes are in the Index.cshml file.
WebApplication1.zip

Exceptions (if any)

No response

.NET Version

6.0

Anything else?

A workaround would be to add a new line before the closing wrapping tag.

<div>
@(await Html.RenderComponentAsync<TestComponent>(RenderMode.Server, new { Title = "Test 1" }))
@(await Html.RenderComponentAsync<TestComponent>(RenderMode.Server, new { Title = "Test 2" }))
@(await Html.RenderComponentAsync<TestComponent>(RenderMode.Server, new { Title = "Test 3" }))
</div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Pillar: Technical Debtarea-blazorIncludes: Blazor, Razor ComponentsbugThis issue describes a behavior which is not expected - a bug.feature-renderingFeatures dealing with how blazor renders components

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions