Upgrade / migration to Radzen.Blazor v5 – resolved

Radzen.Blazor Components
1

Hello,

i have a strange problem while upgrading Radzen Blazor from latest v4 to current v5. What i basically have is .NET8 WebAssembly standalone app. In v4 I've used

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

in MainLayout->HeadContent. According to docs, that should be the case also in v5. But even after clearing the browser / app cache I'm still experiencing strange visual bugs. Some of them are related to icons, majority of icons is displayed fine (like menu and button icons), but some are missing (up/down icons in RadzenNumeric or calendar icon in RadzenDatePicker). Some components are completely fine (text inputs, dropdowns, checkboxes, switches, ...) but some are completely unstyled / broken. I've tried several browsers... I'm still including the newest bootstrap.css for utility purposes. Could that be a problem?

I've done (only checked option):

image
image585×567 14.7 KB

But still, I'm experiencing errors like this even after app restart:

Grid column headers:

image
image1237×69 3 KB

Grid pagination footer:

image
image803×79 5.48 KB

RadzenDatePicker input (unstyled, icon is floated half a page away):
image

RadzenNumeric input:
image

Also, I've noticed that default theme has different colors, that is normal? I don't mean different shades of blue or whatever but when something like Active style is applied it changed color from blue to green and stuff like that. Did you recolored themes in general?

2

Hi @ns6000,

The screenshot looks as caching issues. Try browsing in incognito mode. Also check for any failing HTTP requests in the network tab.

3

I've tried InPrivate / Incognito, it's the same and all request on network tab are finishing with http status 200... I know that it looks like caching, but I'm not sure why and what more can i do...

4

Check if you don't have an old default-base.css file in your application. It would take precedence over the embedded one.

5

Ha, I've got it... It's suprisingly Me problem :pensive:... But for anyone else the solution:

  • As a form of cache-busting, I'm appending to all CSS / JS includes in head:
    ?v=<appVersion>.
    You are recomending similar thing in docs:
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
  • Even if i cleared browser cache, app cache (Application tab in browsers) and completely restarted debug session somehow parts of old styles were still present somewhere...
  • Solution: bumping <appVersion> (and clean solution / rebuild all)

Still not sure why it behaves like that (i mean VS / dev server / etc.).
So long story short, now is completely fine, including colors... Thank you for the assistance!

6

Hey @ns6000 I am having the same issue.

image
image1370×750 58.7 KB

is that how you solved it? because it did not work for me....

7

Hey...

my Blazor bootstrapper page is not index.html but Index.razor Razor page. So that <appVersion> was just symbolic name. What I have there is string variable with version of my app. Which is changed every time i change version of my app... Like in this Radzen example:

<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>

That means that if my app version is 1.2.5 the html page generated from the Razor page will be:

<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=1.2.5"></script>

So when the page is executed on the client browser it has different query parameter and is not recycled from cache but fetched from the server.