Blazor Server Sider without Razor

Question

Context: Bootstrapping an F# app that uses server sider blazor/ razor components BUT does not use razor to define components. Instead I use FsBoleros DSL.

Everything works as expected but there is still on .cshtml file (_Host.cshtml) that I'd like to replace with just (F#) code for a few reasons:

All my code will be written in F# - but if I need to change things/ add code to the host razor file I need to mix in C#. While this works it's not optimal and I'd rather just have F# code and no special razor file.
F# Projects depend on file ordering. The razor file behaves a bit strange in that regard (I cant just reorder it like other files in my project using IDE tooling).

So the goal is to get rid of the _Host.cshtml file and replace it with just code.

I've already invested 2 days in trying to do this. There seems to be little to no content on how to replace a razor page with just code or how to call a tag helper from non razor code. A little guidance on how to approach this would be highly appreciated, otherwise I'll burn more time on this.

My current understanding of what I have to do is:

Render a html response that includes

the server side blazor framework
the prerendered root component annotated with a special comment

Is this correct ?

If so:

Generating the needed html page is trivial except for the prerendered annotated component. Is calling a tag helper the right approach to achieving that (as I'm having some issues with that) ?

Other Component rendering classes (and interfaces) are internal so I suspect that I should not use them. I also assume that I have to use the tag helper in order to get the html correctly annotated.

note: It's not required to actually replace it with code that does exactly the same (eg. is a razor page) but rather does what is required to bootstrap blazor in a maintainable fashion (so no magic string plumbing).

(This is the _Host.cshtml file to replace)

@page "/"
@namespace X.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers





    
    
    Bolero Application
    
    
    



Blazor Host

JaggerJo · Accepted Answer

EDIT: This also seems to be possible using the IHtmlHelper after opening the right namespaces.

task {  
    let htmlHelper = container.GetService()
    
    (htmlHelper :?> IViewContextAware).Contextualize(ViewContext(HttpContext = httpContext))

    // RenderComponentAsync is an extension from "Microsoft.AspNetCore.Mvc.Rendering"
    let! componentHtmlContent = htmlHelper.RenderComponentAsync(RenderMode.ServerPrerendered)
    
    let componentHtml: string =
        using (new StringWriter()) (fun writer ->
            componentHtmlContent.WriteTo (writer, HtmlEncoder.Default)
            writer.Flush()
            writer.ToString()
        )
}

Old answer is below:

The solution I've found works BUT involves calling methods on internal types that are not exposed by ASP.NET Core.

Module to call IComponentRenderer.RenderComponentAsync via reflection.

[]
module ComponentRenderer =
    open System
    open System.Reflection
    open System.Threading.Tasks
    open Microsoft.AspNetCore.Html
    open Microsoft.AspNetCore.Mvc.Rendering
    
    let private ``reflected IComponentRenderer``: Type  =
        let assemblyName = "Microsoft.AspNetCore.Mvc.ViewFeatures"
        let assembly = Assembly.Load assemblyName
        let componentRendererInterface = assembly.GetType $"{assemblyName}.IComponentRenderer"
        componentRendererInterface
   
    let private getRef (serviceContainer: IServiceProvider) : obj =
        serviceContainer.GetService ``reflected IComponentRenderer`` 
        
    let private getMethodRef () : MethodInfo =
        let flags = BindingFlags.Public ||| BindingFlags.Instance 
        let method = ``reflected IComponentRenderer``.GetMethod ("RenderComponentAsync", flags)
        method

    let callRenderComponentAsync
       (serviceContainer: IServiceProvider,
        viewContext: ViewContext,
        componentType: Type,
        renderMode: RenderMode,
        parameters: obj) : Task =
        
        let renderer = getRef serviceContainer
        let method = getMethodRef ()
        let result = method.Invoke(renderer, [| viewContext; componentType; renderMode; parameters |])
        
        result :?> Task

Basically all that's required is a HTML response that contains:

the server side blazor framework
the prerendered root component annotated with a special comment

There are multiple ways to get to that desired result, here is a simple example handler.

module HttpHandlers =

    let htmlTemplate (comp: string) =
        $"""
        
        

        
            
            
            Bolero Application
            
            
        

        
            {comp}
            
        
        
        """
        
    let index (container: IServiceProvider) (httpContext: HttpContext) : Task =
        task {
            let! componentHtmlContent =
                ComponentRenderer.callRenderComponentAsync (
                    container,
                    ViewContext(HttpContext = httpContext),
                    typeof,
                    RenderMode.ServerPrerendered,
                    null
                )
                
            let componentHtml: string =
                using (new StringWriter()) (fun writer ->
                    componentHtmlContent.WriteTo (writer, HtmlEncoder.Default)
                    writer.Flush()
                    writer.ToString()
                )
            
            let! _ =
                (htmlTemplate componentHtml)
                |> Encoding.UTF8.GetBytes
                |> ReadOnlyMemory
                |> httpContext.Response.BodyWriter.WriteAsync
                
            return ()
        } :> _

The resulting html response looks should now look like this:





    
    
    
    



    
    
        Hello World and welcome to my app!

Blazor Server Sider without Razor

Answers (2)

Related Questions