Dynamic Razor Content via JS

[TheBrambleShark]

Just sort of spitballing here because I'm not sure if this would even be possible. Take this sample page from the Blazor template. This creates a page called Counter which has a label and a button. When the button is clicked, the number shown in the label is incremented.

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

}

I think it would be interesting if for basic data binding examples like this, Javascript could be generated based on the provided C# that accomplishes the same functionality. This could quickly grow to be a rather large module, and is probably best done as its own extension to Statiq, but I wanted to at least toss the idea out and start some discussion.

Specifically, I think we should focus on these topics:

• When in the pipeline should this be executed?
• What sort of support should we specifically provide (e.g. data binding, various lookups, etc.).
• What functions should we explicitly NOT support?
• What sort of things overlap with existing functionality? Generally, anything that can be calculated on the first render of the page already is.
• Do we need to have a code gen that could theoretically parse and rebuild any arbitrary C# code or should we only cover specific use cases (data binding, "active" element based on current page, etc.)