Console error in browser when trying to use component

[Fernando Candido]

Failed to load resource: the server responded with a status of 404 () syncfusion-blazor.min.js

Other components work but Toast doesn't show the message at all.

[Buvana Sathasivam]

Hi Fernando,

Greetings from Syncfusion support.

We were unable to reproduce your reported problem at our end. We have tried the following way to render the SfToast component at our end.

First, we installed Syncfusion.Blazor.Notifications and Syncfusion.Blazor.Themes packages and the referred codes below.

Program.cs

builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });

_Layout.cshtml

<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript" />

Index.razor

@using Syncfusion.Blazor.Notifications

 

<div class="col-lg-12 control-section toast-default-section">

    <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">

        <ToastPosition X="@ToastPosition"></ToastPosition>

    </SfToast>

    <div class="col-lg-12 col-sm-12 col-md-12 center">

        <div id="toastBtnDefault" style="margin: auto;text-align: center">

            <button class="e-btn" @onclick="@ShowOnClick">Show Toasts</button>

            <button class="e-btn" @onclick="@HideOnClick">Hide All</button>

        </div>

    </div>

</div>

<style>

    #toast_default .e-meeting::before {

        content: "\e705";

        font-size: 17px;

    }

 

    .bootstrap4 #toast_default .e-meeting::before {

        content: "\e763";

        font-size: 20px;

    }

</style>

@code {

    SfToast ToastObj;

    private string ToastPosition = "Right";

    private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";

    private async Task ShowOnClick()

    {

        await this.ToastObj.ShowAsync();

    }

    private async Task HideOnClick()

    {

        await this.ToastObj.HideAsync("All");

    }

}

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast-1467854437

If you still have a problem, can you please share your code and Syncfusion Nuget package version to reproduce your issue at our end?

Regards,

Buvana S

[Fernando Candido]

Follow your example, at least on my computer it presents the error, the mask also doesn't work correctly.

Attachment: MaskToast_7333eed.zip

[Buvana Sathasivam]

Hi Fernando,

We have checked your shared sample. You are using the common Syncfusion.Blazor nuget and Syncfusion.Blazor.Themes nuget which are not installed in your application. So, we suggest installing Syncfusion.Blazor.Themes nuget and referring to the below styles and scripts.

<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

    <script  src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script>

Documentation: https://blazor.syncfusion.com/documentation/common/adding-script-references#refer-script-from-static-web-assets

We have modified your shared sample with runnable SfToast component.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MaskToast-1192084286

Regards,

Buvana S

[Fernando Candido]

Thanks

[Buvana Sathasivam]

You are welcome. Please let us know if you need any further assistance.