Using Blazor components (Telerik / MudBlazor) in Razor ASP.NET Core MVC

Question

I have tried (unsuccessfully) using Telerik and / or MudBlazor components in Umbraco - ASP.NET Core 6 MVC razor view application (running razor components on razor views - hence Blazor components, because .NET Core ones are not able to run in razor components). Is using javascript components really the only way?

I configure services, everything works fine, but then the wrapper syntax (<MudThemeProvider/> for mudblazor) is not being recognized.

For Telerik, I get an error, where it says that some Telerik.Documents.Spreadsheets assembly is missing; I copied the .dll files from elsewhere and referenced it in the project and it still does not work.

Does anybody know if it's even possible?

Jason · Accepted Answer · 2022-08-29 07:58:58Z

2

There's a way can allow you use blazor components in Razor Page. Here's what I test:
Step1: Create your blazor component and put it under the folder Components, here is the following content:

<h3>Count</h3>

<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int InitialValue { get; set; }

    private void IncrementCount() => currentCount++;

    protected override void OnParametersSet()
    {
        currentCount = InitialValue;
    }
}

Step2: Change the Program.cs file to add Blazor services builder.Services.AddServerSideBlazor(); and map the required endpoints endpoints.MapRazorPages(); endpoints.MapBlazorHub();

Step3: Integrate the Blazor component into a razor page, such as Index.razor, and add the script. Following code is which adding to the index.razor:

<component type="typeof(YourProjectName.Components.Counter)" param-InitialValue="0" render-mode="Server" />

@section Scripts {
    <script src="_framework/blazor.server.js"></script>
}

After this, it should be working:
If my answer is helpful to your porblem, please give me a mark, thank you for your support.
Great Day.

answered Aug 29, 2022 at 7:58

Jason

6021 gold badge4 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rokdbest Over a year ago

I marked as the answer, but I have a different problem; I wanted to use 3rd party components like Telerik or Mudblazor in razor components that are rendered in razor mvc projects. I already knew how to do what you showed here.

Jason Over a year ago

Maybe this can help you: github.com/MudBlazor/MudBlazor/discussions/3398?sort=new. Thank you for your mark.

tomRedox · Accepted Answer · 2022-09-28 09:19:10Z

It definitely should be possible, there's nothing inherently different about using a third-party component library to using your own components.

The first step is to get a basic Blazor component working on your Umbraco site. I think you've done that already, but if not This blog post describes how to do that. There are a few posts on the Umbraco forum about that too.

Once you have that working, the steps in either the guides for getting Telerik working in Blazor or getting MudBlazor up and running should hopefully get their components working in your project.

If things aren't working after when working through one of those guides, I'd suggest putting a minimal reproducible example in a public repo and then asking a more specific question about the exact issue you're stuck on.

A couple of things worth checking once you have Telerik/Blazor set up:

Make sure their CSS and JavaScript files are showing in the list of source files in the browser
If you are using Blazor WebAssembly, check the the DLLs are actually getting to the browser. You may need to change the publishing settings on those files in Visual Studio.

Collectives™ on Stack Overflow

Using Blazor components (Telerik / MudBlazor) in Razor ASP.NET Core MVC

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related