11 | About
12 |
13 |
14 |
15 | @Body
16 |
17 | ClassLib Consumer
5 | 6 |Hello, @message!
7 |Converter
3 | 4 | 5 | 8 | = 9 | 12 | 13 | 14 | @code { 15 | double inches = 1; // default value 16 | public double Inches 17 | { 18 | get => inches; 19 | set 20 | { 21 | centimeters = value * 2.54; 22 | inches = value; 23 | } 24 | } 25 | 26 | double centimeters = 2.54; // default value 27 | public double Centimeters 28 | { 29 | get => centimeters; 30 | set 31 | { 32 | inches = value / 2.54; 33 | centimeters = value; 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /BookServer/Pages/Counter.razor: -------------------------------------------------------------------------------- 1 | @page "/counter" 2 | 3 |Counter
4 | 5 |Current count: @currentCount
6 | 7 | 8 | 9 | @code { 10 | private int currentCount = 0; 11 | 12 | private void IncrementCount() 13 | { 14 | currentCount++; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /BookServer/Pages/Error.razor: -------------------------------------------------------------------------------- 1 | @page "/error" 2 | 3 | 4 |Error.
5 |An error occurred while processing your request.
6 | 7 |Development Mode
8 |9 | Swapping to Development environment will display more detailed information about the error that occurred. 10 |
11 |12 | The Development environment shouldn't be enabled for deployed applications. 13 | It can result in displaying sensitive information from exceptions to end users. 14 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 15 | and restarting the app. 16 |
-------------------------------------------------------------------------------- /BookServer/Pages/FetchData.razor: -------------------------------------------------------------------------------- 1 | @page "/fetchdata" 2 | 3 |Weather forecast
4 | 5 |This component demonstrates fetching data from a service.
6 | 7 | @if (forecasts == null) 8 | { 9 |Loading...
10 | } 11 | else 12 | { 13 || Date | 17 |Temp. (C) | 18 |Temp. (F) | 19 |Summary | 20 |
|---|---|---|---|
| @forecast.Date.ToShortDateString() | 27 |@forecast.TemperatureC | 28 |@forecast.TemperatureF | 29 |@forecast.Summary | 30 |
Hello, world!
6 | 7 | @if (hasGeoLocation) 8 | { 9 |Browser has GeoLocation
10 | } 11 | 12 | @if (position != null) 13 | { 14 |Current position: @position.Coords.Latitude Lat, @position.Coords.Longitude Long
15 |Position reported at: @position.Timestamp
16 | } 17 | 18 | @switch (error) 19 | { 20 | case PositionError.PERMISSION_DENIED: 21 |GeoLocation Permisson Denied
22 | break; 23 | case PositionError.POSITION_UNAVAILABLE: 24 |GeoLocation Position Unavailable
25 | break; 26 | case PositionError.TIMEOUT: 27 |GeoLocation Timeout
28 | break; 29 | default: 30 | break; 31 | } 32 | 33 | @code { 34 | Position position; 35 | PositionError error; 36 | bool hasGeoLocation; 37 | 38 | void OnSuccess(Position p) { 39 | position = p; 40 | StateHasChanged(); 41 | } 42 | 43 | void OnError(PositionError e) { 44 | error = e; 45 | StateHasChanged(); 46 | } 47 | 48 | protected override async Task OnAfterRenderAsync(bool firstRender) 49 | { 50 | if (firstRender) 51 | { 52 | var geo = new Geolocation(js); 53 | hasGeoLocation = await geo.HasGeolocationFeature(); 54 | StateHasChanged(); 55 | 56 | var options = new PositionOptions() { EnableHighAccuracy = false, Timeout = 200, MaximumAge = 0 }; 57 | await geo.GetCurrentPosition(OnSuccess, OnError, options); 58 | } 59 | } 60 | 61 | } 62 | -------------------------------------------------------------------------------- /BookServer/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 |Hello, world!
4 | 5 | Welcome to your new app. 6 | 7 |RenderTree Example
3 |See source code to toggle the key attribute.
4 | 5 |-
6 | @foreach (var item in items)
7 | {
8 | @* remove key attribute to see the effect on checkbox *@
9 |
-
10 |
@item.Value
11 | 12 |
13 | }
14 |
WeeklyForecast
6 | 7 |
8 | @if (forecasts == null)
9 | {
10 | No Data
11 | }
12 | else
13 | {
14 | @foreach (var forecast in forecasts)
15 | {
16 |
21 |
22 | @if (forecast.Summary == "Rainy")
23 | {
24 |
29 |
30 | }
31 | }
32 |
33 |
34 | @code {
35 | private WeatherForecast[] forecasts;
36 |
37 | protected override async Task OnInitializedAsync()
38 | {
39 | forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
40 | }
41 |
42 | void HandleItemSelected(DayOfWeek selectedValue)
43 | {
44 | // Clear selections
45 | foreach (var item in forecasts)
46 | item.Selected = false;
47 | forecasts.First(f => f.Date.DayOfWeek == selectedValue).Selected = true;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/BookServer/Pages/_Host.cshtml:
--------------------------------------------------------------------------------
1 | @page "/"
2 | @namespace BookServer.Pages
3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4 | @{
5 | Layout = "_Layout";
6 | }
7 |
8 |
25 | Tornado Warning!
26 |
27 | }
28 |
20 | @RenderBody()
21 |
22 |
23 |
24 |
25 | An error has occurred. This application may no longer respond until reloaded.
26 |
27 |
28 | An unhandled exception has occurred. See browser dev tools for details.
29 |
30 | Reload
31 | 🗙
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/BookServer/Program.cs:
--------------------------------------------------------------------------------
1 | using BookServer.Data;
2 |
3 | var builder = WebApplication.CreateBuilder(args);
4 |
5 | // Add services to the container.
6 | builder.Services.AddRazorPages();
7 | builder.Services.AddServerSideBlazor();
8 | builder.Services.AddSingleton
10 |
18 |
--------------------------------------------------------------------------------
/BookServer/Shared/NavMenu.razor:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
51 |
52 |
53 | @code {
54 | private bool collapseNavMenu = true;
55 |
56 | private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
57 |
58 | private void ToggleNavMenu()
59 | {
60 | collapseNavMenu = !collapseNavMenu;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/BookServer/Shared/SurveyPrompt.razor:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/BookServer/Shared/ThemeChooser.razor:
--------------------------------------------------------------------------------
1 | @inject IJSRuntime js
2 |
3 | Click here to switch themes
4 |
5 |
6 |
7 | @code {
8 |
9 | bool isDark;
10 | string SetThemeName => isDark ? "Dark" : "Light";
11 |
12 | async Task SwapTheme() {
13 | isDark = !isDark;
14 | await js.InvokeVoidAsync("themeChooser.setTheme", SetThemeName);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/BookServer/Shared/WeatherDay.razor:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 | @code {
13 |
14 | string IconCssClass =>
15 | Summary == "Cloudy" ? "cloud" :
16 | Summary == "Rainy" ? "rain" :
17 | "sun";
18 |
19 | [Parameter]
20 | public string Summary { get; set; }
21 |
22 | [Parameter]
23 | public int TemperatureC { get; set; }
24 |
25 | [Parameter]
26 | public DayOfWeek DayOfWeek { get; set; }
27 |
28 | [Parameter]
29 | public RenderFragment CustomMessage { get; set; }
30 |
31 | [Parameter]
32 | public EventCallback
3 |
4 |
10 | @TemperatureC C°
5 | @CustomMessage 6 |7 | @Summary weather expected @DayOfWeek 8 |
9 |
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* `