Toast 组件在 Razor 应用程序 C# 中不起作用

问题描述 投票：0回答：1

Blazor 新手，有点惊讶没有内置 Dialog 或 Toast。 Blazored-Toast 来救援！不幸的是，我无法让它工作。我怀疑我错过了一些关键步骤或某些库的包含，但我无法识别它。

首先是我已经看过的：

https://stackoverflow.com/questions/69091643/blazored-toast-not-working-from-the-view-model#:~:text=1.%20我%20trying%20to%20get%20some% 20toast%20to%20出现%20in

还有

https://github.com/Blazored/Toast/tree/main

我浏览示例和自述文件的地方。

我相信我已经实现了一切，但显然没有。

所以这是代码：

MainLayout.Razor

@inherits LayoutComponentBase
@using Blazored.Toast;
@using Blazored.Toast.Services;
@using Blazored.Toast.Configuration

<BlazoredToasts Position="ToastPosition.TopRight"
                Timeout="10"
                ShowCloseButton="@true"
                MaxToastCount="3">
</BlazoredToasts>

程序.cs

using Blazored.Toast;
using MyStuff.Web;
using MyStuff.Web.Components;

var builder = WebApplication.CreateBuilder(args);

// Add service defaults & Aspire components.
builder.AddServiceDefaults();

// Add services to the container.
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
builder.Services.AddOutputCache();
builder.Services.AddBlazoredToast();
...

App.Razor

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MyStuff.Web.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

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

</html>

MyStuff.Razor

@using System.Data;
@using Blazored.Toast;
@using Blazored.Toast.Services;
@using Blazored.Toast.Configuration;
@attribute [StreamRendering(true)]
@attribute [OutputCache(Duration = 5)] 


<PageTitle>My STuff </PageTitle>

<h1>My Stuff</h1>

<p>Trying to get Blazored Toast to show up</p>

<EditForm Model="@batchModel">
    <button class="btn btn-success" @onclick="@(() => ToastService.ShowSuccess("I'm a message trying to show Toast"))">Success Toast</button>
....

_进口.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.OutputCaching
@using Microsoft.JSInterop
@using CollectXScore.Web
@using CollectXScore.Web.Components
@using Blazored.Toast
@using Blazored.Toast.Services

发生的事情没有任何错误，当我单击按钮时没有任何显示。有趣的是，如果我设置超时，我可以看到超时的延迟（意味着它正在做某事），但由于某种原因它不显示吐司。也许我需要展示如何参考材料？

c# blazor toast blazored
1个回答
0
投票

在 

Layout
中注册的 Blazor 交互式组件要求您的 Blazor 应用程序 [全部] 是交互式的。

这一行：

    <Routes />

意味着您的应用程序当前配置为“每页面/组件”交互性。 Router 和 

Layout
组件是静态渲染的，并且 
BlazoredToasts
也是静态渲染的。 这就是为什么它不起作用。
您需要在 
Routes
 上启用 Global 交互性。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="Blazr.ExploringServices.Web.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>


    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.