Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: BlazorWebAssembly MessageProvider not displaying the confirmation dialog #5521

Closed
yarutyunov opened this issue May 22, 2024 · 2 comments
Closed

[Bug]: BlazorWebAssembly MessageProvider not displaying the confirmation dialog #5521

yarutyunov opened this issue May 22, 2024 · 2 comments
Labels
Type: Bug 🐞 Something isn't working

Comments

@yarutyunov
Copy link

yarutyunov commented May 22, 2024 •
edited
Loading

Blazorise Version

1.5.2

What Blazorise provider are you running on?

Bootstrap4

Link to minimal reproduction or a simple code snippet

https://github.com/yarutyunov/BlazorWebAssemblyConfirmation/tree/notworking-net8

Steps to reproduce

  1. Launch App
  2. Click on 'Show confirmation dialog' button

What is expected?

When 'Show confirmation dialog' button is clicked a Confirmation Dialog displays

What is actually happening?

Page becomes disabled and requires reload

What browsers do you see the problem on?

Chrome, Microsoft Edge

Any additional comments?

Working net7 version: https://github.com/yarutyunov/BlazorWebAssemblyConfirmation/tree/working-net7

No response
@yarutyunov yarutyunov added the Type: Bug 🐞 Something isn't working label May 22, 2024
@yarutyunov yarutyunov mentioned this issue May 22, 2024
Closed
@stsrki
Copy link
Collaborator

stsrki commented May 23, 2024

There are several things you forgot to include in your project.

1. index.html

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link rel="icon" type="image/png" href="favicon.png" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />

    <link rel="stylesheet" href="css/app.css" />
    <link href="BlazorApp1.styles.css" rel="stylesheet" />
</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>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

Bootstrap5 Nuget packages

<ItemGroup>
  <PackageReference Include="Blazorise" Version="1.5.2" />
  <PackageReference Include="Blazorise.Bootstrap5" Version="1.5.2" />
  <PackageReference Include="Blazorise.Components" Version="1.5.2" />
  <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.5.2" />
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.3" />
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.3" PrivateAssets="all" />
</ItemGroup>

Adjust code to use BS5

using BlazorApp1;
using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services
    .AddBlazorise(options =>
    {
        options.Immediate = true;
    })
    .AddBootstrap5Providers()
    .AddFontAwesomeIcons();

await builder.Build().RunAsync();

@yarutyunov
Copy link
Author

Thank you! it worked

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug 🐞 Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stsrki @yarutyunov