radzen

HyperCube.csproj

@@ -14,7 +14,8 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="5.0.4" />
     <PackageReference Include="MySql.EntityFrameworkCore" Version="5.0.0" />
     <PackageReference Include="MySql.Data" Version="8.0.23" />
-    <PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
+    <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
+    <PackageReference Include="Radzen.Blazor" Version="3.1.10" />
   </ItemGroup>
 
 </Project>

Pages/Index.razor

@@ -1,3 +1,26 @@
 @page "/"
+@inject DialogService DialogService
 
 <h1>Добро пожаловать!</h1>
+
+<RadzenButton Text="Show confirm dialog" Click=@(args => DialogService.Confirm("Are you sure?", "MyTitle", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" })) />
+
+@code {
+    protected override void OnInitialized()
+    {
+        DialogService.OnOpen += Open;
+        DialogService.OnClose += Close;
+    }
+
+    void Open(string title, Type type, Dictionary<string, object> parameters, DialogOptions options)
+    {
+        //console.Log("Dialog opened");
+        Console.WriteLine("Dialog opened");
+    }
+
+    void Close(dynamic result)
+    {
+        //console.Log($"Dialog closed with result: {result}");
+        Console.WriteLine($"Dialog closed with result: {result}");
+    }
+}

Pages/_Host.cshtml

@@ -15,7 +15,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HyperCube</title>
     <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
+    @*<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />*@
     <link href="css/site.css" rel="stylesheet" />
     <link href="HyperCube.styles.css" rel="stylesheet" />
 </head>
@@ -34,5 +35,6 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
 </body>
 </html>

Shared/MainLayout.razor

@@ -13,6 +13,10 @@
 
         <div class="content px-4">
             @Body
+            <RadzenDialog />
+            <RadzenNotification />
+            <RadzenContextMenu />
+            <RadzenTooltip />
         </div>
     </div>
 </div>

Startup.cs

@@ -15,6 +15,7 @@ using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using Radzen;
 
 namespace HyperCube
 {
@@ -41,6 +42,11 @@ namespace HyperCube
             services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();
             services.AddDatabaseDeveloperPageExceptionFilter();
             services.AddSingleton<WeatherForecastService>();
+
+            services.AddScoped<DialogService>();
+            services.AddScoped<NotificationService>();
+            services.AddScoped<TooltipService>();
+            services.AddScoped<ContextMenuService>();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

_Imports.razor

@@ -9,3 +9,5 @@
 @using Microsoft.JSInterop
 @using HyperCube
 @using HyperCube.Shared
+@using Radzen
+@using Radzen.Blazor