microsoft · awentzel · Mar 2, 2022 · Jan 3, 2022 · Jan 3, 2022 · Jan 4, 2022
@@ -0,0 +1,5 @@
+{
+  "$schema": "http://json.schemastore.org/vs-2017.3.host",
+  "order": 600,
+  "icon": "icon.png"
+}
@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Microsoft Fast",
+  "sourceName": "FluentUIBlazorServerApp",
+  "classifications": [
+    "Linux",
+    "macOS",
+    "Windows",
+    "Blazor",
+    "Cloud",
+    "Web"
+  ],
+  "identity": "Microsoft.Fast.Templates.FluentUI.Server",
+  "name": "FluentUI Blazor Server App",
+  "shortName": "fluentuiblazorserver",
+  "defaultName": "BlazorApp",
+  "description": "A project template for creating a Blazor app that uses the Fluent UI component library, runs server-side inside an ASP.NET Core app and handles user interactions over a SignalR connection. This template can be used for web apps with rich dynamic user interfaces (UIs).",
+  "tags": {
+    "language": "C#",
+    "type": "project"
+  },
+  "preferNameDirectory": true
+}
@@ -0,0 +1,13 @@
+<FluentDesignSystemProvider BaseLayerLuminance="1">
+    <Router AppAssembly="@typeof(App).Assembly">
+        <Found Context="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        </Found>
+        <NotFound>
+            <PageTitle>Not found</PageTitle>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <p role="alert">Sorry, there's nothing at this address.</p>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</FluentDesignSystemProvider>
@@ -0,0 +1,12 @@
+namespace FluentUIBlazorServerApp.Data;
+
+public class WeatherForecast
+{
+    public DateTime Date { get; set; }
+
+    public int TemperatureC { get; set; }
+
+    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+    public string? Summary { get; set; }
+}
@@ -0,0 +1,19 @@
+namespace FluentUIBlazorServerApp.Data;
+
+public class WeatherForecastService
+{
+    private static readonly string[] Summaries = new[]
+    {
+        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+    };
+
+    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
+    {
+        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
+        {
+            Date = startDate.AddDays(index),
+            TemperatureC = Random.Shared.Next(-20, 55),
+            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+        }).ToArray());
+    }
+}
@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+	<TargetFramework>net6.0</TargetFramework>
+	<Nullable>enable</Nullable>
+	<ImplicitUsings>enable</ImplicitUsings>
+	<IsPackable>true</IsPackable>
+  </PropertyGroup>
+
+  <ItemGroup>
+	<PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="1.*" />
+  </ItemGroup>
+
+</Project>
@@ -0,0 +1,18 @@
+@page "/counter"
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<FluentButton Appearance="Appearance.Accent" @onclick="IncrementCount">Click me</FluentButton>
+
+@code {
+    private int currentCount = 0;
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}
@@ -0,0 +1,42 @@
+@page
+@model FluentUIBlazorServerApp.Pages.ErrorModel
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>Error</title>
+    <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
+    <link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />
+</head>
+
+<body>
+    <div class="main">
+        <div class="content px-4">
+            <h1 class="text-danger">Error.</h1>
+            <h2 class="text-danger">An error occurred while processing your request.</h2>
+
+            @if (Model.ShowRequestId)
+            {
+                <p>
+                    <strong>Request ID:</strong> <code>@Model.RequestId</code>
+                </p>
+            }
+
+            <h3>Development Mode</h3>
+            <p>
+                Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
+            </p>
+            <p>
+                <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+                It can result in displaying sensitive information from exceptions to end users.
+                For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+                and restarting the app.
+            </p>
+        </div>
+    </div>
+</body>
+
+</html>
@@ -0,0 +1,27 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace FluentUIBlazorServerApp.Pages
+{
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    [IgnoreAntiforgeryToken]
+    public class ErrorModel : PageModel
+    {
+        public string? RequestId { get; set; }
+
+        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+        private readonly ILogger<ErrorModel> _logger;
+
+        public ErrorModel(ILogger<ErrorModel> logger)
+        {
+            _logger = logger;
+        }
+
+        public void OnGet()
+        {
+            RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+        }
+    }
+}
@@ -0,0 +1,48 @@
+@page "/fetchdata"
+
+<PageTitle>Weather forecast</PageTitle>
+
+@using FluentUIBlazorServerApp.Data
+@inject WeatherForecastService ForecastService
+
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from a service.</p>
+
+@if (forecasts == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <FluentDataGrid id="manualGrid" GenerateHeader=GenerateHeaderOptions.None GridTemplateColumns="1fr 1fr 1fr 2fr" TItem=string>
+        <FluentDataGridRow TItem=string RowType="DataGridRowType.Header">
+            <FluentDataGridCell GridColumn=1 CellType="DataGridCellType.ColumnHeader">Date</FluentDataGridCell>
+            <FluentDataGridCell GridColumn=2 CellType="DataGridCellType.ColumnHeader">Temp. (C)</FluentDataGridCell>
+            <FluentDataGridCell GridColumn=3 CellType="DataGridCellType.ColumnHeader">Temp. (F)</FluentDataGridCell>
+            <FluentDataGridCell GridColumn=4 CellType="DataGridCellType.ColumnHeader">Summary</FluentDataGridCell>
+        </FluentDataGridRow>
+
+        @foreach (var forecast in forecasts)
+        {
+            <FluentDataGridRow TItem=string>
+                <FluentDataGridCell GridColumn=1>@forecast.Date.ToShortDateString()</FluentDataGridCell>
+                <FluentDataGridCell GridColumn=2>@forecast.TemperatureC</FluentDataGridCell>
+                <FluentDataGridCell GridColumn=3>@forecast.TemperatureF</FluentDataGridCell>
+                <FluentDataGridCell GridColumn=4>@forecast.Summary</FluentDataGridCell>
+            </FluentDataGridRow>
+
+        }
+
+    </FluentDataGrid>
+
+}
+
+@code {
+    private WeatherForecast[]? forecasts;
+
+    protected override async Task OnInitializedAsync()
+    {
+        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
+    }
+}
@@ -0,0 +1,15 @@
+@page "/"
+
+<PageTitle>Index</PageTitle>
+
+<h1>Hello, world!</h1>
+
+<p style="margin-bottom: 1rem;">
+    Welcome to your new app.
+</p>
+
+<FluentDesignSystemProvider FillColor="#D6D6D6">
+    <FluentCard neutral-palette-source="#CABA8C">
+        <SurveyPrompt Title="How is Blazor working for you?" />
+    </FluentCard>
+</FluentDesignSystemProvider>
@@ -0,0 +1,26 @@
+fluent-card {
+    --card-height: 400px;
+    --card-width: 500px;
+    padding: 20px;
+    margin: 12px;
+}
+
+.class-override {
+    height: 163px;
+    width: 300px;
+}
+
+.state-override {
+    --card-width: 350px;
+    --card-height: 300px;
+    --elevation: 6;
+}
+
+    .state-override:hover {
+        --elevation: 12;
+    }
+
+.contents {
+    display: flex;
+    flex-direction: column;
+}
@@ -0,0 +1,8 @@
+@page "/"
+@namespace FluentUIBlazorServerApp.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@{
+    Layout = "_Layout";
+}
+
+<component type="typeof(App)" render-mode="ServerPrerendered" />
@@ -0,0 +1,32 @@
+@using Microsoft.AspNetCore.Components.Web
+@namespace FluentUIBlazorServerApp.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="~/" />
+    <link href="css/site.css" rel="stylesheet" />
+    <link href="FluentUIBlazorServerApp.styles.css" rel="stylesheet" />
+    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
+</head>
+<body>
+    @RenderBody()
+
+    <div id="blazor-error-ui">
+        <environment include="Staging,Production">
+            An error has occurred. This application may no longer respond until reloaded.
+        </environment>
+        <environment include="Development">
+            An unhandled exception has occurred. See browser dev tools for details.
+        </environment>
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <script src="_framework/blazor.server.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@@fluentui/web-components/dist/web-components.min.js"></script>
+</body>
+</html>
@@ -0,0 +1,29 @@
+using FluentUIBlazorServerApp.Data;
+
+WebApplicationBuilder? builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorPages();
+builder.Services.AddServerSideBlazor();
+builder.Services.AddSingleton<WeatherForecastService>();
+
+WebApplication? app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseStaticFiles();
+
+app.UseRouting();
+
+app.MapBlazorHub();
+app.MapFallbackToPage("/_Host");
+
+app.Run();
@@ -0,0 +1,28 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:14184",
+      "sslPort": 44320
+    }
+  },
+  "profiles": {
+    "FluentUIBlazorServerApp": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7061;http://localhost:5061",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}