Merge pull request #117 from SyncfusionExamples/898690-blazor-net8.0

Update blazor WASM samples to net8.0
SyncfusionExamples · Jul 24, 2024 · 3f8b9a3 · 3f8b9a3
2 parents 328e66f + 40ec10a
commit 3f8b9a3
Show file tree

Hide file tree

Showing 95 changed files with 641 additions and 2,757 deletions.
diff --git a/...ert Excel to PDF/Convert-Excel-to-PDF.sln → ...ert Excel to PDF/Convert Excel to PDF.sln b/...ert Excel to PDF/Convert-Excel-to-PDF.sln → ...ert Excel to PDF/Convert Excel to PDF.sln
@@ -1,25 +1,25 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
-VisualStudioVersion = 17.5.33516.290
+VisualStudioVersion = 17.9.34310.174
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Convert-Excel-to-PDF", "Convert-Excel-to-PDF\Convert-Excel-to-PDF.csproj", "{3FE3F0DB-E28F-4D81-8C2C-6B5E3879412B}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Convert Excel to PDF", "Convert Excel to PDF\Convert Excel to PDF.csproj", "{39D64370-FF1B-4F4C-BAF0-834E88A581BF}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{3FE3F0DB-E28F-4D81-8C2C-6B5E3879412B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{3FE3F0DB-E28F-4D81-8C2C-6B5E3879412B}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{3FE3F0DB-E28F-4D81-8C2C-6B5E3879412B}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{3FE3F0DB-E28F-4D81-8C2C-6B5E3879412B}.Release|Any CPU.Build.0 = Release|Any CPU
+		{39D64370-FF1B-4F4C-BAF0-834E88A581BF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{39D64370-FF1B-4F4C-BAF0-834E88A581BF}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{39D64370-FF1B-4F4C-BAF0-834E88A581BF}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{39D64370-FF1B-4F4C-BAF0-834E88A581BF}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {BDD70C74-40A1-4F07-9C94-1345D08CD4D8}
+		SolutionGuid = {37730C31-8392-4B7D-B960-7377B0A6FD3C}
 	EndGlobalSection
 EndGlobal
diff --git a/...cel to PDF/Convert-Excel-to-PDF/App.razor → ...cel to PDF/Convert Excel to PDF/App.razor b/...cel to PDF/Convert-Excel-to-PDF/App.razor → ...cel to PDF/Convert Excel to PDF/App.razor
diff --git a/...-Excel-to-PDF/Convert-Excel-to-PDF.csproj → ... Excel to PDF/Convert Excel to PDF.csproj b/...-Excel-to-PDF/Convert-Excel-to-PDF.csproj → ... Excel to PDF/Convert Excel to PDF.csproj
@@ -1,20 +1,21 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
 	<WasmNativeStrip>true</WasmNativeStrip>
+	<RunAOTCompilation>true</RunAOTCompilation>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.20" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.20" PrivateAssets="all" />
-    <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly" Version="2.88.3" />
-    <PackageReference Include="Syncfusion.XlsIORenderer.Net.Core" Version="22.2.7" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
+    <PackageReference Include="Syncfusion.XlsIORenderer.Net.Core" Version="*" />
+	  <PackageReference Include="SkiaSharp.Views.Blazor" Version="2.88.6" />
   </ItemGroup>
 
   <ItemGroup>
-	<NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\2.0.23\*.a" />
+    <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\2.0.23\*.a" />
   </ItemGroup>
 </Project>
diff --git a/...or/Client Side/Convert Excel to PDF/Convert Excel to PDF/Convert Excel to PDF.csproj.user b/...or/Client Side/Convert Excel to PDF/Convert Excel to PDF/Convert Excel to PDF.csproj.user
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <ActiveDebugProfile>https</ActiveDebugProfile>
+  </PropertyGroup>
+</Project>
diff --git a/... to PDF/Convert-Excel-to-PDF/FileUtils.cs → ... to PDF/Convert Excel to PDF/FileUtils.cs b/... to PDF/Convert-Excel-to-PDF/FileUtils.cs → ... to PDF/Convert Excel to PDF/FileUtils.cs
@@ -5,9 +5,9 @@ namespace Convert_Excel_to_PDF
     public static class FileUtils
     {
         public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
-               => js.InvokeAsync<object>(
-                    "saveAsFile",
-                    filename,
-                    Convert.ToBase64String(data));
+       => js.InvokeAsync<object>(
+            "saveAsFile",
+            filename,
+            Convert.ToBase64String(data));
     }
 }
diff --git a/...vert-Excel-to-PDF/Shared/MainLayout.razor → ...vert Excel to PDF/Layout/MainLayout.razor b/...vert-Excel-to-PDF/Shared/MainLayout.razor → ...vert Excel to PDF/Layout/MainLayout.razor
@@ -1,13 +1,12 @@
 @inherits LayoutComponentBase
-
 <div class="page">
     <div class="sidebar">
         <NavMenu />
     </div>
 
     <main>
         <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
         <article class="content px-4">

diff --git a/.../ExcelToImage/Shared/MainLayout.razor.css → ... Excel to PDF/Layout/MainLayout.razor.css b/.../ExcelToImage/Shared/MainLayout.razor.css → ... Excel to PDF/Layout/MainLayout.razor.css
@@ -37,11 +37,7 @@ main {
     }
 
 @media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
+    .top-row {
         justify-content: space-between;
     }
 

diff --git a/...Convert-Excel-to-PDF/Shared/NavMenu.razor → ...Convert Excel to PDF/Layout/NavMenu.razor b/...Convert-Excel-to-PDF/Shared/NavMenu.razor → ...Convert Excel to PDF/Layout/NavMenu.razor
@@ -7,21 +7,21 @@
     </div>
 </div>
 
-<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
             </NavLink>
         </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="fetchdata">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
+            <NavLink class="nav-link" href="weather">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
             </NavLink>
         </div>
         <li class="nav-item px-3">

diff --git a/...ted/Blazor/Client Side/Convert Excel to PDF/Convert Excel to PDF/Layout/NavMenu.razor.css b/...ted/Blazor/Client Side/Convert Excel to PDF/Convert Excel to PDF/Layout/NavMenu.razor.css
@@ -0,0 +1,83 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.bi-house-door-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-plus-square-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.bi-list-nested-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep a {
+        color: #d7d7d7;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.37);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+
+    .nav-scrollable {
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}
diff --git a/.../Convert-Excel-to-PDF/Pages/Counter.razor → .../Convert Excel to PDF/Pages/Counter.razor b/.../Convert-Excel-to-PDF/Pages/Counter.razor → .../Convert Excel to PDF/Pages/Counter.razor
diff --git a/...ing Started/Blazor/Client Side/Convert Excel to PDF/Convert Excel to PDF/Pages/Home.razor b/...ing Started/Blazor/Client Side/Convert Excel to PDF/Convert Excel to PDF/Pages/Home.razor
@@ -0,0 +1,7 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
diff --git a/...celToPDF/ExcelToPDF/Pages/FetchData.razor → .../Convert Excel to PDF/Pages/Weather.razor b/...celToPDF/ExcelToPDF/Pages/FetchData.razor → .../Convert Excel to PDF/Pages/Weather.razor
@@ -1,9 +1,9 @@
-@page "/fetchdata"
+@page "/weather"
 @inject HttpClient Http
 
-<PageTitle>Weather forecast</PageTitle>
+<PageTitle>Weather</PageTitle>
 
-<h1>Weather forecast</h1>
+<h1>Weather</h1>
 
 <p>This component demonstrates fetching data from the server.</p>
 
@@ -46,7 +46,7 @@ else
 
     public class WeatherForecast
     {
-        public DateTime Date { get; set; }
+        public DateOnly Date { get; set; }
 
         public int TemperatureC { get; set; }
 

diff --git a/...DF/Convert-Excel-to-PDF/Pages/XlsIO.razor → ...DF/Convert Excel to PDF/Pages/XlsIO.razor b/...DF/Convert-Excel-to-PDF/Pages/XlsIO.razor → ...DF/Convert Excel to PDF/Pages/XlsIO.razor
@@ -6,17 +6,17 @@
 @inject HttpClient client
 
 <h2>Syncfusion XlsIO library</h2>
-<p>Syncfusion Web Blazor XlsIO library used to create, read, edit, and convert DocIO files in your applications without Microsoft Office dependencies.</p>
+<p>Syncfusion Blazor XlsIO library used to create, read, edit, and convert XlsIO files in your applications without Microsoft Office dependencies.</p>
 <button class="btn btn-primary" @onclick="@ExcelToPDF">Convert Excel to PDF</button>
 
-@functions {
+@code {
     async void ExcelToPDF()
     {
         using (ExcelEngine excelEngine = new ExcelEngine())
         {
             IApplication application = excelEngine.Excel;
 
-            using (Stream inputStream = await client.GetStreamAsync("Data/InputTemplate.xlsx"))
+            using (Stream inputStream = await client.GetStreamAsync("sample-data/InputTemplate.xlsx"))
             {
                 // Open the workbook.
                 IWorkbook workbook = application.Workbooks.Open(inputStream);

diff --git a/...el to PDF/Convert-Excel-to-PDF/Program.cs → ...el to PDF/Convert Excel to PDF/Program.cs b/...el to PDF/Convert-Excel-to-PDF/Program.cs → ...el to PDF/Convert Excel to PDF/Program.cs
diff --git a/...cel-to-PDF/Properties/launchSettings.json → ...cel to PDF/Properties/launchSettings.json b/...cel-to-PDF/Properties/launchSettings.json → ...cel to PDF/Properties/launchSettings.json
@@ -1,19 +1,30 @@
 {
+  "$schema": "http://json.schemastore.org/launchsettings.json",
   "iisSettings": {
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:50870",
-      "sslPort": 44343
+      "applicationUrl": "http://localhost:22428",
+      "sslPort": 44305
     }
   },
   "profiles": {
-    "Convert-Excel-to-PDF": {
+    "http": {
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7281;http://localhost:5027",
+      "applicationUrl": "http://localhost:5162",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7235;http://localhost:5162",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

diff --git a/...o PDF/Convert-Excel-to-PDF/_Imports.razor → ...o PDF/Convert Excel to PDF/_Imports.razor b/...o PDF/Convert-Excel-to-PDF/_Imports.razor → ...o PDF/Convert Excel to PDF/_Imports.razor
@@ -7,4 +7,4 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using Convert_Excel_to_PDF
-@using Convert_Excel_to_PDF.Shared
+@using Convert_Excel_to_PDF.Layout
diff --git a/.../Convert-Excel-to-PDF/wwwroot/css/app.css → .../Convert Excel to PDF/wwwroot/css/app.css b/.../Convert-Excel-to-PDF/wwwroot/css/app.css → .../Convert Excel to PDF/wwwroot/css/app.css
@@ -1,5 +1,3 @@
-@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
-
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
@@ -18,6 +16,10 @@ a, .btn-link {
     border-color: #1861ac;
 }
 
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
 .content {
     padding-top: 1.1rem;
 }
@@ -62,3 +64,40 @@ a, .btn-link {
     .blazor-error-boundary::after {
         content: "An error has occurred."
     }
+
+.loading-progress {
+    position: relative;
+    display: block;
+    width: 8rem;
+    height: 8rem;
+    margin: 20vh auto 1rem auto;
+}
+
+    .loading-progress circle {
+        fill: none;
+        stroke: #e0e0e0;
+        stroke-width: 0.6rem;
+        transform-origin: 50% 50%;
+        transform: rotate(-90deg);
+    }
+
+        .loading-progress circle:last-child {
+            stroke: #1b6ec2;
+            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
+            transition: stroke-dasharray 0.05s ease-in-out;
+        }
+
+.loading-progress-text {
+    position: absolute;
+    text-align: center;
+    font-weight: bold;
+    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+}
+
+    .loading-progress-text:after {
+        content: var(--blazor-load-percentage-text, "Loading");
+    }
+
+code {
+    color: #c02d76;
+}
diff --git a/...F/wwwroot/css/bootstrap/bootstrap.min.css → ...F/wwwroot/css/bootstrap/bootstrap.min.css b/...F/wwwroot/css/bootstrap/bootstrap.min.css → ...F/wwwroot/css/bootstrap/bootstrap.min.css
diff --git a/...wroot/css/bootstrap/bootstrap.min.css.map → ...wroot/css/bootstrap/bootstrap.min.css.map b/...wroot/css/bootstrap/bootstrap.min.css.map → ...wroot/css/bootstrap/bootstrap.min.css.map
diff --git a/...lazor/Client Side/Convert Excel to PDF/Convert Excel to PDF/wwwroot/favicon.png b/...lazor/Client Side/Convert Excel to PDF/Convert Excel to PDF/wwwroot/favicon.png
diff --git a/...Convert-Excel-to-PDF/wwwroot/icon-192.png → ...Convert Excel to PDF/wwwroot/icon-192.png b/...Convert-Excel-to-PDF/wwwroot/icon-192.png → ...Convert Excel to PDF/wwwroot/icon-192.png