Index

A Cascading values and parameters, 83, 84 CounterData class, 83 Accept header, 153, 154 GrandMother component, 85, 86 AddCharts extension method, 265 C# extension method, 4, 265 AddSingleton extension method, 130 @ChildContent, 68, 70 AddToBasket method, 49, 50 Client Blazor project AddTransient extension method, 131 index.html, 14 Asynchronous communication, 191 layout component, 17 Attribute Binding, 28–29 routing, 15, 16 AutoIncrement method, 38, 40 Client-Side Blazor dependencies, 137 B @code section, 26 element, 224 Code first migrations, 161, 165 @bind:event syntax, 34 Compilation Model, 116, 118, 119 @bind:format attribute, 37 ComponentBase class, 73 @bind=“SomeProperty” syntax, 63 Component library, 94 @bind syntax, 33 add components, 96 Blazor component library adding reference, 251 Blazor layout components, 210–212 Blazor project, 252 Blazor Server-Side, 6 browser’s console, 257 Blazorwasm, 6 chart.js, 254–257 Blazor Webassembly, 6, 25, 56 ChartOptions Bootstrap process, 4, 41, 69 class, 258, 260 client-side, 21, 23 ChartTestProject, 253 server-side, 23, 24 creation, 250 BuildRenderTree method, 118, 119 LineChartData class, 260–262 project creation, Visual Studio, 94, 95 C referring project CascadingParameter attribute, 85 code, 97 Cascading properties, 112 qualified component, 97, 98 271 © Peter Himschoot 2020 P. Himschoot, Microsoft Blazor, https://doi.org/10.1007/978-1-4842-5928-3 Index

Component library (cont.) Dispose method, 134 stylish component, 99 Document Object Model (DOM), 25, 237 Visual Studio, 96 dotnet-ef tool, 171 testing, 254 DotNet.invokeMethodAsync/DotNet. Conditional attributes, 29–30 invokeMethod, 244 Configure method, 12, 13 Dumb and Smart components, 230 Content negotiation, 154 Content-Type header, 153 E CREATE-READ-UPDATE-DELETE (CRUD) operations, 153 EditContext, 113–115 EditContext.Validate method, 115 EditForm component, 59 D ElementReference property, 242, 243 DataAnnotationsValidator component, 60 Emulating slow network, 190–192 Data binding EnsureSuccessStatusCode() method, 195 error-prone process, 25 Entities, 162 event handling (see Event handling) Entity Framework Core, 151, 161, 185 Pizza Place single-page application code first approach, 161, 162, 164, 165 (see PizzaPlace project) ConfigureServices, 166, 167 DbSet, 165 database generation, 172–174 Debugging, 18, 190, 257 database servers, 168, 169 Chrome, 19, 21 migration, creating, 170–172 Visual Studio, 18, 19 Pizza microservice, 174–176 DebuggingExtensions, 56 EventCallback, 79–81 Dependency Injection, 248, 265 Event handling adding, 125 arguments, 31 configuration, 128–130 C# lambda function, 31 dispose, 134 syntax, 30, 31 singleton, 130 {event}:stopPropagation attribute, 37 transient, 131–134 Extensions for Code, 4 constructor, 126 lifetime client-side, 137, 138 F server-side, 139, 141 FieldChanged method, 113, 114 Dependency inversion principle, 121, 123, Flyweight Pattern, 262 125, 128 Formatting dates, 37–38

272 INDEX G InvokeAsync method, 238 InvokeAsync generic method, 238 Generic type, 87 invokeMethodAsync function, 270 GetFromJsonAsync extension IServiceCollection, 166 method, 193 GetMenu method, 144 GET method, 152 J, K getProperty and setProperty, 238 JavaScript, 209, 237 GitHub, 113, 255 JavaScript Object Global scope, 237 Notation (JSON), 154 Glue functions, 237 JSInvokable attribute, 244, 270 Blazor component, 240 JSON serializable, 237, 244 counter component, 241 JSRuntime, 246, 248, 249

H L _Host.cshtml, 253 @layout component, 213, 214 HttpClient, 192 LayoutComponentBase class, 210 HttpClientJsonExtensions methods, 193 Layout components HTTP headers, 153–154 Blazor, 210–212 Hypertext Transfer Protocol (HTTP), 151 definition, 210 nested, 216 I _Imports.razor, 214 IChartInterop interface, 264 @layout, 213, 214 IDisposable, 103, 134 nested, 215 IJSInProcessRuntime, 238 Life cycle hooks, 99 IJSRuntime, 238 LineChart component, 269 ILocalStorage service, 246–248 implementation, 266, 267 IMenuService interface, 144 index component, 267, 268 _Imports.razor component, 214, 215 toJS extension method, 269 IncrementCount() method, 19, 30 Local storage, 237 @inject syntax, 190 InputText component, 59 InsertPizza method, 176 M Integrated development MainLayout.razor, 17, 211 environments (IDE), 2 Microservices, 152, 156, 185 Inversion-of-Control Blazor project’s Program class, 196–201 Container (IoCC), 126 HttpClient, 185–192

273 INDEX

Microservices (cont.) @onclick attribute, 30 HttpClientJsonExtensions One-way data binding, 27–30 method, 193–196 attribute, 28, 29 OrderService, 207, 208 conditional attribute, 29, 30 PizzaPlace solution, 157–161 syntax, 27, 28 service, 156 OnInitialiazedAsync method, 100, 144, single responsibility, 156 191, 241, 249 storing order (see Storing order) OnInitialized method, 243, 246, 268 Migration class, 171, 172 OnModelCreating method, 165, 204 MVVM pattern, 71 OnParametersSetAsync method, 100, 101 MyFirstBlazor.Client project, 188–190 OnParametersSet method, 100, 101 MyFirstBlazor.Server project, 185–187 Open/Closed principle, 124 MyFirstBlazor.Shared project, 187, 188 open-iconic fonts, 41

N P, Q Navigate Parent-child communication, 72 anchor, 223 DismssableAlert, 73 base tag, 224, 225 EventCallback, 79–81 code, 223, 224 Timer class, 73–75 NavLink component, 223 two-way data binding, 76–79 NavigateTo method, 223 Passing parameters in the route, 220 NavigationManager, 223 Persistence ignorance, 161 NavLink component, 219, 220 PizzaPlace Blazor, project NavLinkMatch.All, 220 cascading properties, 112 NavLinkMatch.Prefix, 220 CustomerEntry component, 109, 110, NavMenu component, 217–219 112 Nested layout component, 215, 216 display list, 104–106 .NET Core, 1, 2, 4 ShoppingBasket .NET methods component, 107, 108 glue functions, 244, 245 PizzaPlace project, 142 JSInvokable method, 245 basket class, 45 NuGet, 51, 94, 162 Console.WriteLine’s output, 51 converting values, 48 creation, 41 O customer OnAfterRenderAsync method, 102, 243 data entry, 55 OnAfterRender method, 102, 243, 267 debugging tips, 56, 57

274 INDEX shopping basket, 56 R customer class, 44 Razor, 25 displaying list of data, 46, 47 Alert component, menu class, 43 implementation, 68–70 NuGet packages, 51 create component, Visual Studio, 68 ordering, 49 @code section, 26 shopping basket, 52–54 Index.razor, 26 Spiciness/Pizza classes, 42 SurveyPrompt.razor, 26 state class, 45 Razor template, 91–94 UI options class, 45 @ref syntax, 82 validation Registering JavaScript, glue class, 263 built-in, 58 Release To Manufacture (RTM), 1 errors, 60, 61 RenderFragment, 68, 88, 91 feedback, 62, 63 Representational State Transfer (REST) FormField/InputText, 59, 60 HTTP, 151 PizzaPlace.Shared project, 147 status code 200, 153 Asynchronous PlaceOrder URI, 152 method, 148 REST endpoint, 186 PostAsJsonAsync extension Route constraints, 221, 222 method, 195 Route parameters, 220, 221 PostAsJsonAsync method, 207 Route templates, 216 Postman, 177 Routing installation, 177 definition, 216 REST calls, 178, 179 NavLink component, 219, 220 GET request, 180, 181 NavMenu component, 217–219 inserting Pizzas, 181–183 router installation, 216, 217 POST method, 152 Roy Fielding, 153 Preventing default actions, 34, 35 Project generation counter page, 10 S dotnet cli, 8, 9 Scoped dependency, 131–134 fetch data page, 10 Scoped lifetime, 142 home page, 10 Scoped objects, 150 SPA, 9 Server projects Visual Studio, 7, 8 Startup.Configure Protocol buffers, 192 method, 12 PutJsonAsync extension method, 196 UseDeveloperExceptionPage PUT method, 152 middleware, 13

275 INDEX

Server-Side dependencies, 139, 141 Storing orders Service object, 121 building microservice Services, 121–123, 127 order, 205–207 SetParametersAsync method, 101 updating database, 201–205 shared WeatherForecast class, 14 Styling components, 99 ShouldRender method, 103 submit button, 115 ShowPizzaInformation method, 233 SurveyPrompt component, 66, 67 Single-page applications (SPA), 9, 209 System.ComponentModel.Annotations, 58 components (see Layout components) definition, 210 navigate (see Navigate) T state (see State class) Templated components, 217 SignalR, 6 FetchData, 89–91 Single responsibility principle, 65, 156, 263 grid, 87, 88 Singleton dependencies, 130, 248 Templates for Blazor projects, 5 Singleton lifetime, 141 Tick method, 75, 82 Singleton objects, 150 Tight-coupling, 122 Singleton pattern, 226 Tim Berners-Lee, 151 SOLID, 124 TItem, 91 StartFrom50 method, 224 ToggleAlert method, 70 State class, 226 Transient, 131 anchor, 228 Transient lifetime, 141 CurrentPizza property, 227, 228 Transient objects, 150 dependency injection, 226, 227 Tuples, 53 Index component, 231, 232 Two-way data binding, 76 PizzaInfo component, 234 adding increment, 33 PizzaInformation callback, 230 @bind attribute, 32 PizzaItem component, 230 syntax, 32 StateHasChanged method, 40, 75, 79, 101 @typeparam, 87 Static page, 209 Static resource, 263 status code, 153 U status code 200, 153 Unit tests, 121 status code 201, 155 Universal Resource status code 404, 153 Identifier (URI), 152 Stopping event propagation, 36, 37 UpdateCounter method, 245, 249

276 Index V Visual Studio Code, 2, 4, 95, 250, 251 Visual Studio for Mac, 2 Validation, 57 ValidationMessage, 60 View and view model, 71, 72 W, X, Y, Z Verbose syntax, 34 WebAssembly, 25

277