I love Orchard Core and I also love using Blazor for parts of a site that need a lot of user interactivity. I recently had an Orchard Core site that I wanted to add some Blazor components to. It's already pretty easy to add Blazor to a .NET Core MVC or Razor Pages app and since Orchard Core is a .NET Core MVC app, adding Blazor there is pretty easy as well. But I wanted to make it even easier as well as make it so that if you have multiple components in multiple modules you don't have to worry about any required resources trying to load more than once. So I created a module that can be used to easily add a Blazor component to your Orchard Core site. Below is the readme with the steps to use it.

Blazor Module

Everything you need to include Blazor components inside the pages, MVC views, and Template Views of your Orchard Core Module.

NOTE: This currently only works with Themes that have Razor layouts like TheTheme. It does not work with Themes like the Blog or Agency Themes that use liquid layouts.

NuGet Package

Usage

1. Add a refference to the DrewBrasher.OrchardCore.Blazor package to your Orchard Core Module and your web project.

2. Add DrewBrasher.OrchardCore.Blazor to the Dependencies of your Module's Manifest.cs file.

    Dependencies = [ "DrewBrasher.OrchardCore.Blazor" ]
   

3. Add the tag helper to your _ViewImports.cshtml file:

    @addTagHelper *, DrewBrasher.OrchardCore.Blazor
   

4. Add your component to a page or view:

   • If your component does not take any parameters you can add it with one line like this:

       <blazor-component type="typeof(DemoComponent)" render-mode="ServerPrerendered" />
     

   • If your component takes parameters you can add it with two lines like this:

       <enable-blazor-components render-mode="ServerPrerendered" />
       <component type="typeof(DemoComponent)" param-YourParam="YourValue" render-mode="ServerPrerendered" />
     

   • If your theme uses a Zone other than HeadMeta for rendering meta data, you can specify the zone like this:

       <blazor-component type="typeof(DemoComponent)" render-mode="ServerPrerendered" header-zone="YourHeadZoneHere" />
     

     or this:

       <enable-blazor-components render-mode="ServerPrerendered"  header-zone="YourHeadZoneHere" />
     

Related Solution Projects

DrewBrasher.OrchardCore.Blazor

Everything you need to include Blazor components inside the pages, MVC views, and Template Views of your Orchard Core Module.

OCRazorModuleDemo

This is an Orchard Core CMS Module to demo and test this project. It has an MVC View and a Widget that both use the DemoComponent.

RazorDemo

This is a Razor Class Library with a DemoComponent to use for testing this project.

Contributing

If you would like to help out with this module, here are the steps to test it out:

1. Clone this repository
2. Setup OC with the default theme (TheTheme)
3. Enable the OCRazorModuleDemo feature
4. Go to this url to test: /OCRazorModuleDemo/Home/Index

Credits

Thank you to ApacheTech for the EnableBlazorComponentsTagHelper!