Challenges after adding Radzen to existing 9.0 WASM

Puzzler · December 18, 2024, 8:37am

Hello
I have an existing Dotnet 9 webassembly project (formerly "standalone", I don't want any server side parts) that I try to add Radzen to.

It works for the most part. What I am struggling with now is to apply a theme and/or change colors/swatches by selecting one in Radzen Studio. It just doesnt change the theme of the running app. I get whatever theme/CSS is set by one of the CSS rows below.

Below is my index.html

The actual theme runtime is determined by whatever of the following CSS rows I have in the index.html file. That is perhaps not surprising, but I can't leave out that row either as then I get no CSS at all:

    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material.css" />

Oh, and The RadzenAppearanceToggle doesn't do anything either.

What am I missing? I'm thinking it's as if
<RadzenTheme Theme="material3-dark" ...
doesn't do anything/apply at all

In wwwroot\css\ I see the files
app.css
fluent-base.css
fluent-dark-base.css
material3-base.css
material3-dark-base.css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <title>DeQuestApp</title> -->
    <base href="/" />
    <RadzenTheme Theme="material3-dark" @rendermode="@InteractiveWebAssembly" />
    <!-- <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />-->
    <!-- <link rel="stylesheet" href="css/app.css" /> -->
    <link rel="stylesheet" href="css/site.css" /> 

    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css" />

    <link rel="icon" type="image/png" href="favicon.png" />
    <!-- <link rel="stylesheet" href="DeQuestApp.styles.css" />  -->
    <HeadOutlet @rendermode="@InteractiveWebAssembly" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
</body>

</html>

_Imports.razor :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Radzen
@using Radzen.Blazor
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using DeQuestApp
@using DeQuestApp.Layout

korchev · December 18, 2024, 9:04am

Hi @Puzzler,

The provided code doesn't seem to come from a Blazor standalone app - <HeadOutlet @rendermode="@InteractiveWebAssembly" /> indicates a regular WebAssembly app.

yordanov · December 18, 2024, 9:05am

Hi @Puzzler,

In addition to what @korchev said, you don't need to link any css files in the <head> if you use <RadzenTheme>. Have a look at this Get Started article and remove this line from the <head> as it overrides any themes registered with RadzenTheme:

~~<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css" />~~

Puzzler · December 18, 2024, 9:39am

Hi
You are right @korchev, that came from too much copy paste and I have removed that line since.

@yordanov If I remove those lines I get no CSS at all

Does this have to do with the ThemeService not being invoked properly as I now don't have the code that you have added to the App.razor in your project templates? What can be done instead in case of standalone/client side app? Being a standalone app I don't have access to cookies that way

From Radzen's App.razor

@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; }

    [Inject]
    private ThemeService ThemeService { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        if (HttpContext != null)
        {
            var theme = HttpContext.Request.Cookies["DeQuestAppTheme"];

            if (!string.IsNullOrEmpty(theme))
            {
                ThemeService.SetTheme(theme, false);
            }
        }
    }
}

So, with the index.html below I get this look:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <title>DeQuestApp</title> -->
    <base href="/" />
    <RadzenTheme Theme="material3" @rendermode="@InteractiveWebAssembly" />
    <!-- <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />-->
    <!-- <link rel="stylesheet" href="css/app.css" /> -->
    <link rel="stylesheet" href="css/site.css" /> 

    <!-- <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css" /> -->
    <!-- <link rel="stylesheet" href="_content/Radzen.Blazor/css/material.css" /> -->

    <link rel="icon" type="image/png" href="favicon.png" />
    <!-- <link rel="stylesheet" href="DeQuestApp.styles.css" />  -->
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
    <script src="js/cookieHelper.js"></script>
</body>

</html>

korchev · December 18, 2024, 9:48am

I am still not sure if you have a WASM standalone app or not.
If you have a standalone app you should follow the WASM standalone instructions. The code you have pasted is not for WASM standalone.

If you have a subscription you can send us your app at info@radzen.com and we will check it for you.

Puzzler · December 18, 2024, 9:57am

Thank you @korchev

I was missing

<HeadContent>
    <RadzenTheme Theme="material" />
</HeadContent>

in my MainLayout.razor

I mixed up your instructions on the getting started page...

Puzzler · December 18, 2024, 10:49am

I still have some issues

If I dont include this line in the index.html then CSS is not applied on the WYSIWYG pages in Radzen Studio: <link rel="stylesheet" href="_content/Radzen.Blazor/css/material.css" />
I still cant get changes to colors/swatches to appear runtime in browser. Only on the WYSIWYG pages in Radzen Studio (assuming the row above).

Is there something I can do?

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <title>DeQuestApp</title> -->
    <base href="/" />
    <link rel="stylesheet" href="css/app.css" />
    <!-- <link rel="stylesheet" href="css/site.css" /> -->
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
    <script src="js/cookieHelper.js"></script>
</body>

</html>

MainLayout.razor

@inherits LayoutComponentBase

<HeadContent>
    <RadzenTheme Theme="material" />
</HeadContent>

<RadzenComponents />

<RadzenLayout

korchev · December 18, 2024, 11:47am

We can tell more after checking your application. If you have an active subscription you can send it to info@radzen.com.