CODEWITHSUNDEEP
.netasp.net-mvcrazorblazorumbraco
rokdbest
rokdbest

Reputation: 39

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

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?

Upvotes: 1

Views: 2361

Answers (2)

tomRedox
tomRedox

Reputation: 30403

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.

Upvotes: 1

Nathan
Nathan

Reputation: 594

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: Demo Pic
If my answer is helpful to your porblem, please give me a mark, thank you for your support.
Great Day.

Upvotes: 2

Related Questions