Disallow (@:) syntax in .razor files

[ajaybhargavb]

Repro:

Input:

@if (test)
{
    @:Hello <span>@text</span>
}

@code {
    string text = "world!";
    bool test = true;
}

Generated code:

builder.AddMarkupContent(1, "    Hello <span>");
builder.AddContent(2, text);
builder.AddMarkupContent(3, "</span>\r\n");

Expected Output:

Hello <span>world!</span>

Actual Output:

Hello <span></span> world!

[ajaybhargavb]

@rynowak @SteveSandersonMS, this doesn't look like a Razor compiler issue because the generated code makes sense to me. Do we do some auto tag completion magic in Blazor runtime that messes up how it is rendered?

[SteveSandersonMS]

When we ask the browser to insert markup, we first tell it to parse that markup. Browsers do funky stuff to "fix" your mistakes in HTML, so for example Hello <span> probably gets parsed as if you wrote Hello <span></span>. Likewise it probably ignores the </span> because that's not valid on its own.

To avoid this weirdness, we are meant to be requiring that the markup passed to AddMarkupContent is well-formed and the tags are correctly balanced. </span> on its own should not be allowed by the compiler, so I'd say this is a Razor compiler issue.

It sounds like the fix is to disallow @: syntax, right? There's no use for it in .razor; it's just harmful.

[ajaybhargavb]

It sounds like the fix is to disallow @: syntax, right? There's no use for it in .razor; it's just harmful.

I'm not sure if there is no use for @: in .razor. Without it you won't be able to transition out of C# in code block without wrapping it in a tag. This was also an issue with <text> tags which is special in Razor code blocks. This was originally reported here dotnet/aspnetcore#11316.
@NTaylorMullen, can you think of other ways to do what @: currently lets you do?

Nvm I answered my own question. I can always use <text> tags to replace what @: does. And I verified it works correctly if we use <text> tags like,

@if (test)
{
    <text>Hello <span>@text</span></text>
}

@code {
    string text = "world!";
    bool test = true;
}

[NTaylorMullen]

Using <text> on its own should suffice; that being said you are definitely restricted from utilizing a tag named <text> directly in a code block without @:. To work around that users can store their HTML in variables and spit them out if they need the text tag. I know it's not ideal but there's not a great alternative.

The other option would be to make @: parse HTML properly which would be difficult but more importantly would differ from the normal Razor syntax where people 99% of the time use it to render unbalanced HTML in different code blocks (not supported in component files):

@if (something)
{
    @: <p>
}

...

@if (something)
{
    @:</p>
}

So i'm on board with disallowing @: in Component files, at least for now with a specific error. Can always add a resemblance of the feature functionality later.

[git-net]

It is theoretically correct。but when we port our old code，the same razor code ，different。

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.