1. Home
  2. Forum
  3. Blazor
  4. Upgraded from 21 to 27 and Dialogs/Toasts stopped working

Upgraded from 21 to 27 and Dialogs/Toasts stopped working

Thanks in advance for reading. Has anyone had this problem? I've scoured the internet with no luck. I can't find any way to detect where my problem is. I'm working on a project and upgraded Syncfusion.Blazor. The dialogs and toasts have disappeared. I'm using about 20 other Syncfusion controls and they work fine. My console has this error: x Failed to load resource: the server responded with a status of 404 (Not Found) syncfusion-blazor.min.js:1 which I also can't figure out. I made a separate test page to try simple implementations of the Dialogs and Toasts, but it's just not doing anything.


2 Replies
DR Doug Rosenberg October 15, 2024 03:22 PM UTC

For more detail, in the elements developer tools tab, I can see a div id="model-dialog...etc" with a class of e-dlg-container which has a display: none.


PK Priyanka Karthikeyan Syncfusion Team October 16, 2024 12:57 PM UTC

Hi Doug Rosenberg,

 

Thank you for reaching out to us. Upon investigation, it appears that the styles and scripts for Syncfusion components are not correctly referenced in your project. In .NET 8, it's important to apply the 'rendermode' to the project. In case of missing this, it might cause issues related to script functionalities.

 

To implement the render mode across your entire application, consider adding the 'rendermode' attribute within the Route tag in the App.razor file, placed inside the body tag. We have created a simple sample in .net8, kindly check it out in the attachment. Here's an example snippet.

 

[App.razor]

<body>

   <Routes @rendermode="RenderMode.InteractiveServer" />

   <script src="_framework/blazor.web.js"></script>

</body>

 

For more detailed insights, please visit the following blog and documentation.

 

Blog: https://www.syncfusion.com/blogs/post/blazor-ui-support-dotnet-8.aspx

Documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0

 

And Regarding the inclusion of script and style references when using Syncfusion Blazor components, it's important to ensure correct references for proper rendering. Here’s a breakdown based on the type of NuGet package you are using:

 

 

1. Common Package (Syncfusion.Blazor):

If you are using the common NuGet package (Syncfusion.Blazor) which includes all Syncfusion Blazor components, you should include the following references in your index.cshtml:

<!-- Include the stylesheet for the individual package -->
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
<!-- Include the script for the common package -->
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

2. Individual Package (Syncfusion.Blazor.DropDowns):

If you are using an individual NuGet package like Syncfusion.Blazor.DropDowns, make sure to include the correct script and style references. The typical references are as follows:

<!-- Include the stylesheet for the individual package -->
<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />
<!-- Include the script for the individual package -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Important Notes:

  • Do not mix individual package references with common package references as it may cause components to not render properly.
  • Make sure to follow the exact paths for the scripts and styles to ensure they are correctly linked.

Documentation References:

 

Please ensure these adjustments are included in your project. If the issue persists, kindly share a runnable sample or whole page code snippet with us and video illustration of the issue you are facing. This will help us validate the problem you're facing and offer more precise solutions. Thank you for your patience and cooperation.

 

Regards,

Priyanka K


Loader.
Up arrow icon