# karmegams02/blazorcircuitdisposalissue architecture

> Architecture diagram of the GitHub repository karmegams02/blazorcircuitdisposalissue, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/karmegams02/blazorcircuitdisposalissue
- Repository: https://github.com/karmegams02/blazorcircuitdisposalissue

## Overview

#### Purpose and runtime
This is a .NET Blazor Server application, apparently focused on reproducing or investigating circuit-disposal/reconnection behavior. It renders interactive Razor components on the server; browser interaction is maintained through Blazor’s server circuit connection.

Entry point: `Program.cs`. Project definition: `BlazorServerCircuitDisposeIssueApp.csproj`.

#### Application bootstrap
`Program.cs` configures the ASP.NET Core host and Blazor Server services/endpoints. Configuration is supplied through `appsettings.json` and environment overrides in `appsettings.Development.json`.

The server owns component execution and lifecycle. Client browsers receive rendered UI and maintain a SignalR-backed circuit; circuit loss/reconnection is therefore an architectural concern rather than a purely client-side UI event.

#### Root component and routing
`Components/App.razor` is the HTML/root application shell. It loads the Blazor application and global assets.

`Components/Routes.razor` is the route dispatcher for page components. It selects a page based on the request route and provides fallback/not-found behavior through:
- `Components/Pages/NotFound.razor`
- `Components/Pages/Error.razor`

#### Shared UI shell and circuit recovery
`Components/Layout/MainLayout.razor` provides the shared page layout and hosts common navigation/content regions. `Components/Layout/NavMenu.razor` supplies navigation between sample pages.

`Components/Layout/ReconnectModal.razor` and `Components/Layout/ReconnectModal.razor.js` form the client-visible circuit reconnection boundary. The Razor component presents reconnect state while the JavaScript file participates in browser-side reconnect modal behavior. This is the key client/server lifecycle seam for the repository’s stated issue area.

#### Feature pages and interaction experiments
Pages under `Components/Pages` are routed interactive component workloads:
- `Components/Pages/Home.razor` is the landing page.
- `Components/Pages/Counter.razor` is a stateful event-handling example.
- `Components/Pages/Weather.razor` is a data-display/sample feature.
- `Components/Pages/DataAnnotateTest.razor` with `Components/Pages/DataAnnotionsTest.cs` exercises model validation/data annotations.
- `Components/Pages/MyInputText.razor` provides a custom input/component behavior experiment.

These components execute in the server circuit, so event callbacks, validation state, rendering, and disposal all depend on circuit continuity.

#### Presentation and static assets
Global styling is in `wwwroot/app.css`; layout-specific styling is colocated with components, including `Components/Layout/MainLayout.razor.css` and `Components/Layout/ReconnectModal.razor.css`.

The only material bundled frontend dependency is Bootstrap under `wwwroot/lib/bootstrap/`. Static files are served by ASP.NET Core; no external API, database, queue, or separate frontend runtime is evidenced by the repository tree.

Main entry points: [`Components/Routes.razor`](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Routes.razor) (Route dispatcher), [`Program.cs`](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Program.cs) (Application bootstrap), [`Components/Layout/MainLayout.razor`](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/MainLayout.razor) (Shared layout), [`Components/App.razor`](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/App.razor) (Root application shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_host["ASP.NET Core Host"]
  node_program{{"Application bootstrap<br/>ASP.NET Core entry point<br/>[Program.cs]"}}
  node_config["Host configuration<br/>[appsettings.json]"]
  node_blazor_circuit(("Server circuit<br/>SignalR-backed runtime"))
end

subgraph group_ui["Blazor UI"]
  node_app_shell["Root application shell<br/>Razor root component<br/>[App.razor]"]
  node_routes["Route dispatcher<br/>Razor router<br/>[Routes.razor]"]
  node_main_layout["Shared layout<br/>Razor layout<br/>[MainLayout.razor]"]
  node_nav_menu["Navigation menu<br/>Razor component<br/>[NavMenu.razor]"]
  node_reconnect_modal["Reconnect modal<br/>Razor lifecycle UI"]
end

subgraph group_pages["Interactive Pages"]
  node_home["Home<br/>routed page<br/>[Home.razor]"]
  node_counter["Counter<br/>stateful routed page<br/>[Counter.razor]"]
  node_weather["Weather<br/>data-display routed page<br/>[Weather.razor]"]
  node_validation["Data annotation test<br/>validation routed page"]
  node_custom_input["Custom input test<br/>interactive routed page<br/>[MyInputText.razor]"]
  node_error_views["Error and not-found views<br/>router fallbacks<br/>[NotFound.razor]"]
end

subgraph group_client["Browser Assets"]
  node_reconnect_js["Reconnect browser logic<br/>JavaScript"]
  node_styles["Application styles<br/>CSS assets<br/>[app.css]"]
  node_bootstrap["Bootstrap<br/>bundled frontend dependency"]
end

node_config -.->|"configures"| node_program
node_program -->|"serves"| node_app_shell
node_program -->|"hosts"| node_blazor_circuit
node_program -->|"serves static files"| node_styles
node_app_shell -->|"loads"| node_routes
node_routes -->|"renders in"| node_main_layout
node_main_layout -->|"includes"| node_nav_menu
node_main_layout -->|"hosts"| node_reconnect_modal
node_reconnect_modal -->|"uses"| node_reconnect_js
node_reconnect_js -.->|"handles reconnect"| node_blazor_circuit
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_counter
node_routes -->|"routes to"| node_weather
node_routes -->|"routes to"| node_validation
node_routes -->|"routes to"| node_custom_input
node_routes -.->|"falls back to"| node_error_views
node_blazor_circuit -->|"executes interactively"| node_counter
node_blazor_circuit -->|"maintains validation state"| node_validation
node_blazor_circuit -->|"executes interactively"| node_custom_input
node_styles -.->|"styles"| node_main_layout
node_bootstrap -.->|"frontend asset"| node_app_shell

click node_program "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Program.cs"
click node_config "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/appsettings.json"
click node_app_shell "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/App.razor"
click node_routes "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Routes.razor"
click node_main_layout "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/MainLayout.razor"
click node_nav_menu "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/NavMenu.razor"
click node_reconnect_modal "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/ReconnectModal.razor"
click node_home "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/Home.razor"
click node_counter "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/Counter.razor"
click node_weather "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/Weather.razor"
click node_validation "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/DataAnnotateTest.razor"
click node_custom_input "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/MyInputText.razor"
click node_error_views "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/NotFound.razor"
click node_reconnect_js "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/ReconnectModal.razor.js"
click node_styles "https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/wwwroot/app.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_program,node_config,node_blazor_circuit toneBlue
class node_app_shell,node_routes,node_main_layout,node_nav_menu,node_reconnect_modal toneAmber
class node_home,node_counter,node_weather,node_validation,node_custom_input,node_error_views toneMint
class node_reconnect_js,node_styles,node_bootstrap toneRose
```

## Components

### ASP.NET Core Host

- [Application bootstrap](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Program.cs): ASP.NET Core entry point · Configures Blazor Server services, static files, and endpoints. · `Program.cs`
- [Host configuration](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/appsettings.json): configuration · Application settings and development environment overrides. · `appsettings.json`
- **Server circuit**: SignalR-backed runtime · Owns interactive component execution, events, rendering, and lifecycle.

### Blazor UI

- [Root application shell](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/App.razor): Razor root component · `Components/App.razor`
- [Route dispatcher](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Routes.razor): Razor router · Selects routed pages and fallback views. · `Components/Routes.razor`
- [Shared layout](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/MainLayout.razor): Razor layout · Hosts navigation and routed content. · `Components/Layout/MainLayout.razor`
- [Navigation menu](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/NavMenu.razor): Razor component · `Components/Layout/NavMenu.razor`
- [Reconnect modal](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/ReconnectModal.razor): Razor lifecycle UI · Presents client-visible circuit reconnection state. · `Components/Layout/ReconnectModal.razor`

### Interactive Pages

- [Home](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/Home.razor): routed page · `Components/Pages/Home.razor`
- [Counter](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/Counter.razor): stateful routed page · Exercises server-side event handling. · `Components/Pages/Counter.razor`
- [Weather](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/Weather.razor): data-display routed page · `Components/Pages/Weather.razor`
- [Data annotation test](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/DataAnnotateTest.razor): validation routed page · Exercises model validation in the server circuit. · `Components/Pages/DataAnnotateTest.razor`
- [Custom input test](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/MyInputText.razor): interactive routed page · `Components/Pages/MyInputText.razor`
- [Error and not-found views](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Pages/NotFound.razor): router fallbacks · `Components/Pages/NotFound.razor`

### Browser Assets

- [Reconnect browser logic](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/Components/Layout/ReconnectModal.razor.js): JavaScript · Participates in browser-side reconnect modal behavior. · `Components/Layout/ReconnectModal.razor.js`
- [Application styles](https://github.com/karmegams02/blazorcircuitdisposalissue/blob/main/wwwroot/app.css): CSS assets · Global and component-scoped presentation styles. · `wwwroot/app.css`
- **Bootstrap**: bundled frontend dependency

## Connections

- Host configuration → Application bootstrap: configures
- Application bootstrap → Root application shell: serves
- Application bootstrap → Server circuit: hosts
- Application bootstrap → Application styles: serves static files
- Root application shell → Route dispatcher: loads
- Route dispatcher → Shared layout: renders in
- Shared layout → Navigation menu: includes
- Shared layout → Reconnect modal: hosts
- Reconnect modal → Reconnect browser logic: uses
- Reconnect browser logic → Server circuit: handles reconnect
- Route dispatcher → Home: routes to
- Route dispatcher → Counter: routes to
- Route dispatcher → Weather: routes to
- Route dispatcher → Data annotation test: routes to
- Route dispatcher → Custom input test: routes to
- Route dispatcher → Error and not-found views: falls back to
- Server circuit → Counter: executes interactively
- Server circuit → Data annotation test: maintains validation state
- Server circuit → Custom input test: executes interactively
- Application styles → Shared layout: styles
- Bootstrap → Root application shell: frontend asset