Add Razor Syntax Support Directly in C# Files for Improved Developer Experience

[Nairda015]

Hey, I have an idea to simplify workflow with Razor and minimal API to create a similar experience to the BETH stack in js land:
https://github.com/ethanniser/the-beth-stack/blob/main/src/index.tsx

Maybe this will encourage new people to use c# for frontend stuff more than Blazor itself? It will also merge nicely with the Minimal API ideology of simplifying the starting journey with .NET.

Basic example:

app.MapGet("/skills", () =>
{
    var skills = new List<(string name, int level)>()
    {
        new("test1", 1),
        new("test2", 2),
        new("test3", 3),
    };
    
    return Razor.Htmx($$"""
                        <h4>Skills!</h4>
                        @foreach (var (name, level) in skills)
                        {
                            <div class="row skill">
                                <div class="col-8" hx-get="/skill-details/{{name}}">@name</div>
                                <div class="col-4">@level</div>
                            </div>
                        }
                        """);
});

Reusing existing razor components here also will be a nice touch.

Maybe an extension method for adding HTMX headers will be also a good idea (currently I can't add an extension method to TypedResults because it is a static class)

Similar topics but different needs:

Returning razor components from C#
JSX support

Alternatives:

• Using Razor Pages or MVC views, but these require separation of logic and UI.
• Using JavaScript frameworks like React, but that introduces another language and build steps.

[HaloFour]

That looks like an API and a tooling request? I don't see any changes to C# syntax there. The Razor syntax appears to be embedded in a string literal.

[Nairda015]

Sorry for the confusion I've put this inside string so I have HTML syntax support in Rider - maybe we can drop "" this in the final version or all $$$$""""""" business :D
But we can start with "good enough" solution

[HaloFour]

I'd argue that the relationship should be the other way around, that the Razor platform should understand enough C# that it can take markup mixed directly into the source like that and split out the router from view bits. That's how it works with these Javascript libraries, the Javascript interpreters have no concept of that markup.

[Nairda015]

So you want to stick with .razor files and generate endpoints from them?
How should this look in your opinion?
Will this be similar to my code snippet above?

[Nairda015]

maybe we can drop "" this in the final version or all $$$$""""""" business :D

Another proposition for syntax:

app.MapGet("/skills", () =>
{
    var skills = new List<(string name, int level)>
    {
        new("test1", 1),
        new("test2", 2),
        new("test3", 3),
    };
    
    return (
            <h4>Skills!</h4>
            @foreach (var (name, level) in skills)
            {
                <div class="row skill">
                    <div class="col-8" hx-get="/skill-details/{{name}}">@name</div>
                    <div class="col-4">@level</div>
                </div>
            }
            ).AddHtmxHeaders();
});

[iam3yal]

@Nairda015 It seems like you want to create a new web framework/lib on top of AspNetCore but nothing about the language or the compiler should change so this discussion should probably be discussed elsewhere.

If you do want to use razor components then this is already possible just not exactly the way you depict it in your post, it's also possible to use a SG to construct Blazor components based the pattern you propose in your post even though I can't see why it's better/beneficial than existing solutions.

[Nairda015]

The only thing for the compiler is to support somehow razor syntax inside C# file - maybe even without putting this into a string

[HaloFour]

You'll get more traction asking if the Razor folks can add support for this. The C# compiler isn't going to add support for random HTML blocks in the middle of source, with or without Razor markup.

[Nairda015]

So without compiler support, the only option is to put this into string, am I right?

[HaloFour]

From vanilla C#, yes. My suggestion would be to take this to the Razor team to see if they are interested in extending their project to support C#+Razor syntax files like this, where their tooling can transpile that into vanilla C# for you.

That is how those Javascript projects work, the Javascript language and interpreters don't understand any of the markup (and would error attempting to parse it). They rely on a transpilation step that converts the markup embedded in the Javascript into vanilla Javascript.

[Nairda015]

Ok good idea - I'll move this into razor section thanks :)

[saint4eva]

https://github.com/DamianEdwards/RazorSlices/blob/main/samples/RazorSlices.Samples.WebApp/Program.cs

[Nairda015]

looks good but for simple cases inlining razor would be better instead of path to the file so you don't need to jump between places
also if you inline you don't need to create extra an object for model