10 | About
11 |
12 |
13 | Sorry, there's nothing at this address.
10 |
2 |
3 | @Title
4 |
5 |
6 | Please take our
7 | brief survey
8 |
9 | and tell us what you think.
10 |
11 |
12 | @code {
13 | // Demonstrates how a parent component can supply parameters
14 | [Parameter]
15 | public string? Title { get; set; }
16 | }
17 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Server/BlazorAppReactiveExtensions.Server.csproj:
--------------------------------------------------------------------------------
1 |
20 |
24 |
25 |
26 |
27 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Client/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "iisSettings": {
3 | "windowsAuthentication": false,
4 | "anonymousAuthentication": true,
5 | "iisExpress": {
6 | "applicationUrl": "http://localhost:32421",
7 | "sslPort": 44356
8 | }
9 | },
10 | "profiles": {
11 | "http": {
12 | "commandName": "Project",
13 | "dotnetRunMessages": true,
14 | "launchBrowser": true,
15 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
16 | "applicationUrl": "http://localhost:5158",
17 | "environmentVariables": {
18 | "ASPNETCORE_ENVIRONMENT": "Development"
19 | }
20 | },
21 | "https": {
22 | "commandName": "Project",
23 | "dotnetRunMessages": true,
24 | "launchBrowser": true,
25 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
26 | "applicationUrl": "https://localhost:7109;http://localhost:5158",
27 | "environmentVariables": {
28 | "ASPNETCORE_ENVIRONMENT": "Development"
29 | }
30 | },
31 | "IIS Express": {
32 | "commandName": "IISExpress",
33 | "launchBrowser": true,
34 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
35 | "environmentVariables": {
36 | "ASPNETCORE_ENVIRONMENT": "Development"
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Client/Shared/NavMenu.razor:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
28 |
29 |
30 | @code {
31 | private bool collapseNavMenu = true;
32 |
33 | private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
34 |
35 | private void ToggleNavMenu()
36 | {
37 | collapseNavMenu = !collapseNavMenu;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Client/Shared/NavMenu.razor.css:
--------------------------------------------------------------------------------
1 | .navbar-toggler {
2 | background-color: rgba(255, 255, 255, 0.1);
3 | }
4 |
5 | .top-row {
6 | height: 3.5rem;
7 | background-color: rgba(0,0,0,0.4);
8 | }
9 |
10 | .navbar-brand {
11 | font-size: 1.1rem;
12 | }
13 |
14 | .oi {
15 | width: 2rem;
16 | font-size: 1.1rem;
17 | vertical-align: text-top;
18 | top: -2px;
19 | }
20 |
21 | .nav-item {
22 | font-size: 0.9rem;
23 | padding-bottom: 0.5rem;
24 | }
25 |
26 | .nav-item:first-of-type {
27 | padding-top: 1rem;
28 | }
29 |
30 | .nav-item:last-of-type {
31 | padding-bottom: 1rem;
32 | }
33 |
34 | .nav-item ::deep a {
35 | color: #d7d7d7;
36 | border-radius: 4px;
37 | height: 3rem;
38 | display: flex;
39 | align-items: center;
40 | line-height: 3rem;
41 | }
42 |
43 | .nav-item ::deep a.active {
44 | background-color: rgba(255,255,255,0.25);
45 | color: white;
46 | }
47 |
48 | .nav-item ::deep a:hover {
49 | background-color: rgba(255,255,255,0.1);
50 | color: white;
51 | }
52 |
53 | @media (min-width: 641px) {
54 | .navbar-toggler {
55 | display: none;
56 | }
57 |
58 | .collapse {
59 | /* Never collapse the sidebar for wide screens */
60 | display: block;
61 | }
62 |
63 | .nav-scrollable {
64 | /* Allow sidebar to scroll for tall menus */
65 | height: calc(100vh - 3.5rem);
66 | overflow-y: auto;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Server/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "iisSettings": {
3 | "windowsAuthentication": false,
4 | "anonymousAuthentication": true,
5 | "iisExpress": {
6 | "applicationUrl": "http://localhost:32421",
7 | "sslPort": 44356
8 | }
9 | },
10 | "profiles": {
11 | "http": {
12 | "commandName": "Project",
13 | "dotnetRunMessages": true,
14 | "launchBrowser": true,
15 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
16 | "applicationUrl": "http://localhost:5158",
17 | "environmentVariables": {
18 | "ASPNETCORE_ENVIRONMENT": "Development"
19 | }
20 | },
21 | "https": {
22 | "commandName": "Project",
23 | "dotnetRunMessages": true,
24 | "launchBrowser": true,
25 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
26 | "applicationUrl": "https://localhost:7109;http://localhost:5158",
27 | "environmentVariables": {
28 | "ASPNETCORE_ENVIRONMENT": "Development"
29 | }
30 | },
31 | "IIS Express": {
32 | "commandName": "IISExpress",
33 | "launchBrowser": true,
34 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
35 | "environmentVariables": {
36 | "ASPNETCORE_ENVIRONMENT": "Development"
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Client/Pages/FetchData.razor:
--------------------------------------------------------------------------------
1 | @page "/fetchdata/{Id:int}"
2 | @using BlazorAppReactiveExtensions.Shared
3 | @inject HttpClient Http
4 | @using System.Reactive
5 | @using System.Reactive.Subjects;
6 | @using System.Reactive.Linq
7 |
8 | Weather forecast
11 | 12 |This component demonstrates fetching data from the server.
13 | 14 | @if (forecasts == null) 15 | { 16 |Loading...
17 | } 18 | else 19 | { 20 || Id | 24 |Date | 25 |Temp. (C) | 26 |Temp. (F) | 27 |Summary | 28 |
|---|---|---|---|---|
| @forecast.Id | 35 |@forecast.Date.ToShortDateString() | 36 |@forecast.TemperatureC | 37 |@forecast.TemperatureF | 38 |@forecast.Summary | 39 |
Bind Example
45 | 46 |47 | 50 |
51 | 52 |53 | 56 |
57 | } 58 | -------------------------------------------------------------------------------- /BlazorAppReactiveExtensions/Server/Pages/Error.cshtml: -------------------------------------------------------------------------------- 1 | @page 2 | @model BlazorAppReactiveExtensions.Server.Pages.ErrorModel 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
17 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Client/Shared/MainLayout.razor.css:
--------------------------------------------------------------------------------
1 | .page {
2 | position: relative;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | main {
8 | flex: 1;
9 | }
10 |
11 | .sidebar {
12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13 | }
14 |
15 | .top-row {
16 | background-color: #f7f7f7;
17 | border-bottom: 1px solid #d6d5d5;
18 | justify-content: flex-end;
19 | height: 3.5rem;
20 | display: flex;
21 | align-items: center;
22 | }
23 |
24 | .top-row ::deep a, .top-row ::deep .btn-link {
25 | white-space: nowrap;
26 | margin-left: 1.5rem;
27 | text-decoration: none;
28 | }
29 |
30 | .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31 | text-decoration: underline;
32 | }
33 |
34 | .top-row ::deep a:first-child {
35 | overflow: hidden;
36 | text-overflow: ellipsis;
37 | }
38 |
39 | @media (max-width: 640.98px) {
40 | .top-row:not(.auth) {
41 | display: none;
42 | }
43 |
44 | .top-row.auth {
45 | justify-content: space-between;
46 | }
47 |
48 | .top-row ::deep a, .top-row ::deep .btn-link {
49 | margin-left: 0;
50 | }
51 | }
52 |
53 | @media (min-width: 641px) {
54 | .page {
55 | flex-direction: row;
56 | }
57 |
58 | .sidebar {
59 | width: 250px;
60 | height: 100vh;
61 | position: sticky;
62 | top: 0;
63 | }
64 |
65 | .top-row {
66 | position: sticky;
67 | top: 0;
68 | z-index: 1;
69 | }
70 |
71 | .top-row.auth ::deep a:first-child {
72 | flex: 1;
73 | text-align: right;
74 | width: 0;
75 | }
76 |
77 | .top-row, article {
78 | padding-left: 2rem !important;
79 | padding-right: 1.5rem !important;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/BlazorAppReactiveExtensions/Client/Pages/FetchData.razor.cs:
--------------------------------------------------------------------------------
1 | using BlazorAppReactiveExtensions.Shared;
2 | using Microsoft.AspNetCore.Components;
3 | using System.Net.Http.Json;
4 | using System.Reactive.Linq;
5 | using System.Reactive.Subjects;
6 |
7 | namespace BlazorAppReactiveExtensions.Client.Pages
8 | {
9 | public partial class FetchData : IDisposable
10 | {
11 |
12 | [Parameter]
13 | public int Id { get; set; }
14 |
15 | private Subject
18 |
39 | Error.
19 |An error occurred while processing your request.
20 | 21 | @if (Model.ShowRequestId) 22 | { 23 |
24 | Request ID: @Model.RequestId
25 |
Development Mode
29 |30 | Swapping to the Development environment displays detailed information about the error that occurred. 31 |
32 |33 | The Development environment shouldn't be enabled for deployed applications. 34 | It can result in displaying sensitive information from exceptions to end users. 35 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 36 | and restarting the app. 37 |
38 |
30 | ```
31 |
32 | #### Using Open Iconic's SVG Sprite
33 |
34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
35 |
36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `