Init

Server/Components/Pages/Counter.razor

@@ -0,0 +1,20 @@
+@page "/counter"
+@rendermode InteractiveServer
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+  private int currentCount = 0;
+
+  private void IncrementCount()
+  {
+    currentCount++;
+  }
+
+}

Server/Components/Pages/CreatePage.razor

@@ -0,0 +1,19 @@
+@page "/create"
+@rendermode InteractiveServer
+<h3>Neue Rechnung</h3>
+
+<hr />
+
+<div class="mb-3">
+  <label class="form-label">Rechnungsnummer</label>
+  <InputText class="form-control" @bind-Value="@InvoiceId" style="width: 100%; max-width: 400px;"></InputText>
+</div>
+
+@if (!string.IsNullOrWhiteSpace(AlertMessage))
+{
+  <div class="alert alert-danger mt-3">
+    @AlertMessage
+  </div>
+}
+
+<button type="button" class="btn btn-primary" @onclick="CreateInvoiceAsync">Anlegen</button>

Server/Components/Pages/CreatePage.razor.cs

@@ -0,0 +1,71 @@
+using Microsoft.AspNetCore.Components;
+using Server.Data;
+using Server.Model;
+
+namespace Server.Components.Pages
+{
+    public partial class CreatePage
+    {
+        #region Dependencies
+
+        [Inject]
+        private NavigationManager NavigationManager { get; set; } = null!;
+
+        #endregion
+
+        #region Private Properties
+
+        private string? AlertMessage { get; set; }
+        private string? InvoiceId { get; set; }
+
+        #endregion
+
+        #region Override SetParametersAsync
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            parameters.SetParameterProperties(this);
+
+            await SettingsData.LoadAsync();
+
+            await base.SetParametersAsync(ParameterView.Empty);
+        }
+
+        #endregion
+
+        #region Private Method CreateInvoiceAsync
+
+        /// <summary>
+        ///     Asynchronously creates a new invoice if the provided InvoiceId is not null, empty,
+        ///     or whitespace, and does not already exist in the system. If the invoice is created
+        ///     successfully, navigates to the newly created invoice page.
+        /// </summary>
+        /// <returns>
+        ///     A Task representing the asynchronous operation.
+        /// </returns>
+        private async Task CreateInvoiceAsync()
+        {
+            if (string.IsNullOrWhiteSpace(InvoiceId)) return;
+            if (await InvoiceData.ExistsAsync(InvoiceId))
+            {
+                AlertMessage = "Eine Rechnung mit der Rechnungsnummer existiert bereits";
+                return;
+            }
+
+            var invoice = new InvoiceModel
+            {
+                InvoiceId = InvoiceId,
+                Comment = SettingsData.Instance.Comment,
+                PaymentData = SettingsData.Instance.PaymentData,
+                Seller = SettingsData.Instance.SellerAddress
+            };
+
+            await InvoiceData.SaveAsync(invoice);
+
+            NavigationManager.NavigateTo($"/edit/{InvoiceId}");
+        }
+
+        #endregion
+    }
+}

Server/Components/Pages/CustomerPage.razor

@@ -0,0 +1,68 @@
+@page "/customers"
+@using Server.Data
+@using Server.Model
+@rendermode InteractiveServer
+
+<h3>Kunden</h3>
+
+@if (EditFormShow && EditFormObject != null)
+{
+  <div class="mb-3">
+    <label class="form-label">Name</label>
+    <InputText DisplayName="Name" class="form-control" @bind-Value="@EditFormObject.Name"></InputText>
+  </div>
+  
+  <div class="mb-3">
+    <label class="form-label">Name2</label>
+    <InputText DisplayName="Name2" class="form-control" @bind-Value="@EditFormObject.Name2"></InputText>
+  </div>
+  
+  <div class="mb-3">
+    <label class="form-label">Street</label>
+    <InputText DisplayName="Street" class="form-control" @bind-Value="@EditFormObject.Street"></InputText>
+  </div>
+  
+  <div class="mb-3">
+    <label class="form-label">Zip</label>
+    <InputText DisplayName="Zip" class="form-control" @bind-Value="@EditFormObject.Zip"></InputText>
+  </div>
+  
+  <div class="mb-3">
+    <label class="form-label">City</label>
+    <InputText DisplayName="City" class="form-control" @bind-Value="@EditFormObject.City"></InputText>
+  </div>
+  
+  <div class="mb-3">
+    <label class="form-label">Phone</label>
+    <InputText DisplayName="Phone" class="form-control" @bind-Value="@EditFormObject.Phone"></InputText>
+  </div>
+  
+  <button type="button" class="btn btn-sm btn-primary" @onclick="SaveCustomerAsync">Speichern</button>
+  <button type="button" class="btn btn-sm btn-secondary" @onclick="HideEditFormAsync">Abbrechen</button>
+}
+else
+{
+  <button type="button" class="btn btn-primary" @onclick="ShowCreateAsync">Neuer Kunde</button>
+}
+
+<hr />
+<div class="row">
+@foreach (var customer in CustomerData.Instance.Customers.Where(x => x.State != RecordState.Deleted))
+{
+  <div class="col-md-auto pt-3">
+    <div class="card" style="width: 18rem;">
+      <div class="card-body">
+        <h5 class="card-title">@customer.Name</h5>
+        <p class="card-text">
+          @customer.Name2<br>
+          @customer.Street<br>
+          @customer.Zip - @customer.City<br>
+          @customer.Phone<br>
+        </p>
+        <button type="button" class="btn btn-sm btn-primary" @onclick="() => EditCustomerAsync(customer)">Bearbeiten</button>
+        <button type="button" class="btn btn-sm btn-danger" @onclick="() => DeleteCustomerAsync(customer)">Löschen</button>
+      </div>
+    </div>
+  </div>
+}
+</div>

Server/Components/Pages/CustomerPage.razor.cs

@@ -0,0 +1,116 @@
+using Microsoft.AspNetCore.Components;
+using Server.Data;
+using Server.Model;
+
+namespace Server.Components.Pages
+{
+    public partial class CustomerPage : ComponentBase
+    {
+        #region Private Properties
+
+        private bool EditFormIsNew { get; set; }
+
+        private Address? EditFormObject { get; set; }
+
+        private bool EditFormShow { get; set; }
+
+        #endregion
+
+        #region Override SetParametersAsync
+
+        //// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            parameters.SetParameterProperties(this);
+
+            await CustomerData.LoadAsync();
+
+            await base.SetParametersAsync(ParameterView.Empty);
+        }
+
+        #endregion
+
+        #region Private Method DeleteCustomerAsync
+
+        /// <summary>
+        ///     Deletes the specified customer asynchronously.
+        /// </summary>
+        /// <param name="customer">The customer to be deleted.</param>
+        /// <return>A Task representing the asynchronous operation.</return>
+        private async Task DeleteCustomerAsync(Address customer)
+        {
+            customer.State = RecordState.Deleted;
+            await CustomerData.SaveAsync();
+        }
+
+        #endregion
+
+        #region Private Method EditCustomerAsync
+
+        /// <summary>
+        ///     Initiates the edit process for a given customer asynchronously.
+        /// </summary>
+        /// <param name="customer">The customer to be edited.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        private Task EditCustomerAsync(Address customer)
+        {
+            EditFormIsNew = false;
+            EditFormObject = customer;
+            EditFormShow = true;
+            return Task.CompletedTask;
+        }
+
+        #endregion
+
+        #region Private Method HideEditFormAsync
+
+        /// <summary>
+        ///     Hides the edit form asynchronously.
+        /// </summary>
+        /// <return>A Task representing the asynchronous operation.</return>
+        private Task HideEditFormAsync()
+        {
+            EditFormObject = new();
+            EditFormShow = false;
+
+            return Task.CompletedTask;
+        }
+
+        #endregion
+
+        #region Private Method SaveCustomerAsync
+
+        /// <summary>
+        ///     Saves the current customer data asynchronously.
+        /// </summary>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        private async Task SaveCustomerAsync()
+        {
+            if (EditFormObject == null) return;
+
+            EditFormShow = false;
+            if (EditFormIsNew) CustomerData.Instance.Customers.Add(EditFormObject);
+            await CustomerData.SaveAsync();
+            EditFormObject = new();
+        }
+
+        #endregion
+
+        #region Private Method ShowCreateAsync
+
+        /// <summary>
+        ///     Displays the form for creating a new customer.
+        /// </summary>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        private Task ShowCreateAsync()
+        {
+            EditFormIsNew = true;
+            EditFormObject = new();
+            EditFormShow = true;
+
+            return Task.CompletedTask;
+        }
+
+        #endregion
+    }
+}

Server/Components/Pages/Error.razor

@@ -0,0 +1,38 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (ShowRequestId)
+{
+  <p>
+    <strong>Request ID:</strong> <code>@RequestId</code>
+  </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+  Swapping to <strong>Development</strong> environment will display more 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>
+
+@code{
+
+  [CascadingParameter]
+  private HttpContext? HttpContext { get; set; }
+
+  private string? RequestId { get; set; }
+  private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+  protected override void OnInitialized() =>
+    RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+
+}

Server/Components/Pages/InvoiceListPage.razor

@@ -0,0 +1,30 @@
+@page "/"
+@page "/invoices"
+@using Server.Model
+@rendermode InteractiveServer
+
+<h3>Rechnungen (@((Invoices ?? []).Count))</h3>
+
+@foreach (var invoice in Invoices ?? [])
+{
+  <div class="row">
+    <div class="col-md-auto pt-3">
+      <div class="card" style="width: 18rem;">
+        <div class="card-body">
+          <h5 class="card-title">#@invoice.InvoiceId</h5>
+          <h6 class="card-subtitle mb-2 text-muted">@invoice.IssueDate.ToShortDateString()</h6>
+          <p class="card-text">
+            @invoice.Customer?.Name<br />
+            @invoice.Items.Count Artikel<br />
+            @($"{invoice.TotalNetto:N2} €") Netto<br />
+          </p>
+          <a href="@($"edit/{invoice.InvoiceId}")" class="btn btn-sm btn-primary">Bearbeiten</a>
+          @if (invoice.DeletionAllowed)
+          {
+            <button class="btn btn-sm btn-danger" style="margin-left: .5rem;" @onclick="() => DeleteInvoiceAsync(invoice.InvoiceId)">Löschen</button>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+}

Server/Components/Pages/InvoiceListPage.razor.cs

@@ -0,0 +1,45 @@
+using Microsoft.AspNetCore.Components;
+using Server.Data;
+using Server.Model;
+
+namespace Server.Components.Pages
+{
+    public partial class InvoiceListPage : ComponentBase
+    {
+        #region Private Properties
+
+        private List<InvoiceModel>? Invoices { get; set; }
+
+        #endregion
+
+        #region Override SetParametersAsync
+
+        //// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            parameters.SetParameterProperties(this);
+
+            Invoices = await InvoiceData.LoadAllAsync();
+
+            await base.SetParametersAsync(ParameterView.Empty);
+        }
+
+        #endregion
+
+        #region Private Method DeleteInvoiceAsync
+
+        /// <summary>
+        ///     Deletes an invoice asynchronously by its ID.
+        /// </summary>
+        /// <param name="invoiceInvoiceId">The ID of the invoice to be deleted.</param>
+        /// <returns>A task representing the asynchronous delete operation.</returns>
+        private async Task DeleteInvoiceAsync(string? invoiceInvoiceId)
+        {
+            if (string.IsNullOrWhiteSpace(invoiceInvoiceId)) return;
+            await InvoiceData.DeleteAsync(invoiceInvoiceId);
+            Invoices = await InvoiceData.LoadAllAsync();
+        }
+
+        #endregion
+    }
+}

Server/Components/Pages/InvoicePage.razor

@@ -0,0 +1,86 @@
+@page "/edit/{InvoiceId}"
+@using Server.Model
+@rendermode InteractiveServer
+
+
+<PageTitle>Home</PageTitle>
+
+
+
+<h1>@Invoice.InvoiceId</h1>
+
+<button type="button" class="btn btn-primary" @onclick="SaveInvoiceAsync">Speichern</button>
+<button type="button" class="btn btn-info" @onclick="GenerateInvoiceAsync">Generieren</button>
+
+@if (!string.IsNullOrWhiteSpace(AlertMessage))
+{
+  <div class="alert alert-danger mt-3">
+    @AlertMessage
+  </div>
+}
+
+<hr />
+
+<div class="mb-3">
+  <div class="form-check form-switch">
+    <InputCheckbox @bind-Value="@Invoice.DeletionAllowed" class="form-check-input" id="deletionallowedcheck"></InputCheckbox>
+    <label class="form-check-label" for="deletionallowedcheck">Löschen erlaubt</label>
+  </div>
+</div>
+
+<div class="mb-3">
+  <label class="form-label">Datum</label>
+  <InputDate class="form-control" @bind-Value="@Invoice.IssueDate"></InputDate>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >Rechnungsnummer</label>
+  <InputText class="form-control" @bind-Value="@Invoice.InvoiceId" disabled></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label">Kommentar</label>
+  <InputTextArea class="form-control" @bind-Value="@Invoice.Comment"></InputTextArea>
+</div>
+
+<hr />
+
+<button type="button" class="btn btn-sm btn-primary" @onclick="CreateItemAsync">Neuer Artikel</button>
+
+@foreach (var item in Invoice.Items)
+{
+  <hr />
+  
+  <div class="card" style="width: 100%; max-width: 1000px;">
+    <div class="card-body">
+      <div class="row pt-1">
+        <div class="col-xl">
+          <label class="form-label mb-0">Name</label>
+          <InputText class="form-control" @bind-Value="@item.Name"></InputText>
+        </div>
+        <div class="col-sm">
+          <label class="form-label mb-0">Menge</label>
+          <InputNumber TValue="double" class="form-control" @bind-Value="@item.Quantity"></InputNumber>
+        </div>
+        <div class="col-sm">
+          <label class="form-label mb-0">Price (Netto)</label>
+          <InputNumber TValue="double" class="form-control" @bind-Value="@item.PriceNetto"></InputNumber>
+        </div>
+        <div class="col-sm">
+          <label class="form-label mb-0">Tax Type</label>
+          <InputSelect @bind-Value="@item.TaxType" class="form-select">
+            @foreach (var taxType in Enum.GetValues(typeof(TaxType)))
+            {
+              <option value="@taxType">@taxType</option>
+            }
+          </InputSelect>
+        </div>
+      </div>
+
+      <div class="mb-1 mt-2">
+        <label class="form-label mb-0">Description</label>
+        <InputText class="form-control" @bind-Value="@item.Description"></InputText>
+      </div>
+    </div>
+  </div>
+}

Server/Components/Pages/InvoicePage.razor.cs

@@ -0,0 +1,153 @@
+using Microsoft.AspNetCore.Components;
+using QuestPDF;
+using QuestPDF.Fluent;
+using QuestPDF.Infrastructure;
+using Server.Data;
+using Server.Model;
+
+namespace Server.Components.Pages
+{
+    public partial class InvoicePage
+    {
+        #region Dependencies
+
+        [Inject]
+        private NavigationManager NavigationManager { get; set; } = null!;
+
+        #endregion
+
+        #region Parameters
+
+        [Parameter]
+        public string? InvoiceId { get; set; }
+
+        #endregion
+
+        #region Private Properties
+
+        private InvoiceModel Invoice { get; set; } = new();
+        
+        private string? AlertMessage { get; set; }
+
+        #endregion
+
+        #region Override SetParametersAsync
+
+        //// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            parameters.SetParameterProperties(this);
+
+            // No invoice id
+            if (string.IsNullOrWhiteSpace(InvoiceId))
+            {
+                NavigationManager.NavigateTo("/");
+                return;
+            }
+            
+            // Existing
+            var invoice = await InvoiceData.LoadAsync(InvoiceId);
+            if (invoice == null)
+            {
+                NavigationManager.NavigateTo("/");
+                return;
+            }
+
+            // Found
+            Invoice = invoice;
+
+            Settings.License = LicenseType.Community;
+
+            await CustomerData.LoadAsync();
+
+            await base.SetParametersAsync(ParameterView.Empty);
+        }
+
+        #endregion
+
+        #region Private Method CreateItemAsync
+
+        /// <summary>
+        ///     Asynchronously creates a new item and adds it to the current invoice.
+        /// </summary>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        private Task CreateItemAsync()
+        {
+            Invoice.Items.Add(new());
+            return Task.CompletedTask;
+        }
+
+        #endregion
+
+        #region Private Method Generate
+
+        private async Task Generate()
+        {
+            var doc = new InvoiceDocument(new()
+            {
+                InvoiceId = "3129",
+                Seller = SettingsData.Instance.SellerAddress,
+                PaymentData = SettingsData.Instance.PaymentData,
+                Comment = SettingsData.Instance.Comment,
+                Customer = new()
+                {
+                    Name = "DRK-Ortsverein Dreis-Tiefenbach e.V.",
+                    Name2 = "Jutta Weber",
+                    Street = "Feldwasserstraße 9",
+                    Zip = "57250",
+                    City = "Netphen"
+                },
+                Items =
+                [
+                    new OrderItem
+                    {
+                        Name = "Schulung DRK-Cloud in Std.",
+                        Description = "09.12.2022 - Schulungsgruppe 1",
+                        Quantity = 5,
+                        TaxType = TaxType.Tax19,
+                        PriceNetto = 29
+                    },
+                    new OrderItem
+                    {
+                        Name = "Schulung DRK-Cloud in Std.",
+                        Description = "10.12.2022 - Schulungsgruppe 2",
+                        Quantity = 5,
+                        TaxType = TaxType.Tax19,
+                        PriceNetto = 29
+                    }
+                ]
+            });
+
+            doc.GeneratePdfAndShow();
+        }
+
+        #endregion
+
+        #region Private Method GenerateInvoiceAsync
+
+        private Task GenerateInvoiceAsync()
+        {
+            var doc = new InvoiceDocument(Invoice);
+            doc.GeneratePdfAndShow();
+            return Task.CompletedTask;
+        }
+
+        #endregion
+
+        #region Private Method SaveInvoiceAsync
+
+        /// <summary>
+        ///     Asynchronously saves the current invoice.
+        /// </summary>
+        /// <returns>A Task representing the asynchronous save operation.</returns>
+        private async Task SaveInvoiceAsync()
+        {
+            AlertMessage = null;
+            
+            await InvoiceData.SaveAsync(Invoice);
+            NavigationManager.NavigateTo("/invoices");
+        }
+
+        #endregion
+    }
+}

Server/Components/Pages/SettingsPage.razor

@@ -0,0 +1,74 @@
+@page "/settings"
+@using Server.Data
+@using Server.Model
+@rendermode InteractiveServer
+
+<h3>Einstellungen</h3>
+
+<button type="button" class="btn btn-primary" @onclick="Save">Save</button>
+
+<hr />
+
+<div class="mb-3">
+  <label class="form-label" >Name</label>
+  <InputText DisplayName="Name" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.Name"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >Name 2</label>
+  <InputText DisplayName="Name 2" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.Name2"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >Street</label>
+  <InputText DisplayName="Street" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.Street"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >Zip</label>
+  <InputText DisplayName="Zip" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.Zip"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >City</label>
+  <InputText DisplayName="City" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.City"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >Phone</label>
+  <InputText DisplayName="Phone" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.Phone"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >Web</label>
+  <InputText DisplayName="Web" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.Web"></InputText>
+</div>
+
+<hr />
+
+<div class="mb-3">
+  <label class="form-label" >Comment</label>
+  <InputTextArea DisplayName="Comment" class="form-control" @bind-Value="@SettingsData.Instance.Comment"></InputTextArea>
+</div>
+
+<hr />
+
+<div class="mb-3">
+  <label class="form-label" >TaxId</label>
+  <InputText DisplayName="TaxId" class="form-control" @bind-Value="@SettingsData.Instance.SellerAddress.TaxId"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >Bank</label>
+  <InputText DisplayName="Bank" class="form-control" @bind-Value="@SettingsData.Instance.PaymentData.BankName"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >IBAN</label>
+  <InputText DisplayName="IBAN" class="form-control" @bind-Value="@SettingsData.Instance.PaymentData.Iban"></InputText>
+</div>
+
+<div class="mb-3">
+  <label class="form-label" >BIC</label>
+  <InputText DisplayName="BIC" class="form-control" @bind-Value="@SettingsData.Instance.PaymentData.Bic"></InputText>
+</div>

Server/Components/Pages/SettingsPage.razor.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Components;
+using Server.Data;
+using Server.Model;
+
+namespace Server.Components.Pages
+{
+    public partial class SettingsPage : ComponentBase
+    {
+        #region Override SetParametersAsync
+
+        //// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            parameters.SetParameterProperties(this);
+
+            await SettingsData.LoadAsync();
+
+            await base.SetParametersAsync(ParameterView.Empty);
+        }
+
+        #endregion
+
+        #region Private Method Save
+
+        /// <summary>
+        ///     Asynchronously saves the current settings to a JSON file.
+        /// </summary>
+        /// <returns>A task that represents the asynchronous save operation.</returns>
+        private async Task Save() => await SettingsData.SaveAsync();
+
+        #endregion
+    }
+}

Server/Components/Pages/Weather.razor

@@ -0,0 +1,65 @@
+@page "/weather"
+@attribute [StreamRendering]
+
+<PageTitle>Weather</PageTitle>
+
+<h1>Weather</h1>
+
+<p>This component demonstrates showing data.</p>
+
+@if (forecasts == null)
+{
+  <p><em>Loading...</em></p>
+}
+else
+{
+  <table class="table">
+    <thead>
+    <tr>
+      <th>Date</th>
+      <th>Temp. (C)</th>
+      <th>Temp. (F)</th>
+      <th>Summary</th>
+    </tr>
+    </thead>
+    <tbody>
+    @foreach (var forecast in forecasts)
+    {
+      <tr>
+        <td>@forecast.Date.ToShortDateString()</td>
+        <td>@forecast.TemperatureC</td>
+        <td>@forecast.TemperatureF</td>
+        <td>@forecast.Summary</td>
+      </tr>
+    }
+    </tbody>
+  </table>
+}
+
+@code {
+  private WeatherForecast[]? forecasts;
+
+  protected override async Task OnInitializedAsync()
+  {
+    // Simulate asynchronous loading to demonstrate streaming rendering
+    await Task.Delay(500);
+
+    var startDate = DateOnly.FromDateTime(DateTime.Now);
+    var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
+    forecasts = 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();
+  }
+
+  private class WeatherForecast
+  {
+    public DateOnly Date { get; set; }
+    public int TemperatureC { get; set; }
+    public string? Summary { get; set; }
+    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+  }
+
+}