Merge pull request #2 from dotnet-presentations/master

Sync

Author: rms81

Directory.Build.props

@@ -1,8 +1,8 @@
 <Project>
     <PropertyGroup>
-        <AspNetCoreVersion>3.1.3</AspNetCoreVersion>
-        <BlazorVersion>3.2.0-rc1.20223.4</BlazorVersion>
-        <EntityFrameworkVersion>3.1.3</EntityFrameworkVersion>
-        <SystemNetHttpJsonVersion>3.2.0-rc1.20217.1</SystemNetHttpJsonVersion>
+        <AspNetCoreVersion>3.1.4</AspNetCoreVersion>
+        <BlazorVersion>3.2.0</BlazorVersion>
+        <EntityFrameworkVersion>3.1.4</EntityFrameworkVersion>
+        <SystemNetHttpJsonVersion>3.2.0</SystemNetHttpJsonVersion>
     </PropertyGroup>
 </Project>

docs/01-components-and-layout.md

@@ -15,8 +15,8 @@ The solution already contains four projects:
 
 - **BlazingPizza.Client**: This is the Blazor project. It contains the UI components for the app.
 - **BlazingPizza.Server**: This is the ASP.NET Core project hosting the Blazor app and also the backend services for the app.
-- **BlazingPizza.Shared**: Shared model types for the app.
-- **BlazingPizza.ComponentsLibrary**: A library of components and helper code to be used by the app in later sessions.
+- **BlazingPizza.Shared**: This project contains the shared model types for the app.
+- **BlazingPizza.ComponentsLibrary**: This is a library of components and helper code to be used by the app in later sessions.
 
 The **BlazingPizza.Server** project should be set as the startup project.
 
@@ -46,7 +46,7 @@ Add a `@code` block to *Index.razor* with a list field to keep track of the avai
 }
 ```
 
-The code in the `@code` block is added to the generated class for the component. The `PizzaSpecial` type is already defined for you in the Shared project.
+The code in the `@code` block is added to the generated class for the component. The `PizzaSpecial` type is already defined for you in the **BlazingPizza.Shared** project.
 
 To get the available list of specials we need to call an API on the backend. Blazor provides a preconfigured `HttpClient` through dependency injection that is already setup with the correct base address. Use the `@inject` directive to inject an `HttpClient` into the `Index` component.
 
@@ -70,7 +70,7 @@ Override the `OnInitializedAsync` method in the `@code` block to retrieve the li
 }
 ```
 
-The `/specials` API is defined by the `SpecialsController` in the Server project.
+The `/specials` API is defined by the `SpecialsController` in the **BlazingPizza.Server** project.
 
 Once the component is initialized it will render its markup. Replace the markup in the `Index` component with the following to list the pizza specials:
 
@@ -123,7 +123,9 @@ Update the `MainLayout` component to define a top bar with a branding logo and a
 @inherits LayoutComponentBase
 
 <div class="top-bar">
-    <img class="logo" src="img/logo.svg" />
+    <a class="logo" href="">
+        <img src="img/logo.svg" />
+    </a>
 
     <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
         <img src="img/pizza-slice.svg" />

docs/02-customize-a-pizza.md

@@ -65,7 +65,7 @@ Now we need to implement the pizza customization dialog so we can display it whe
 
 Add a *ConfigurePizzaDialog.razor* file under the *Shared* directory. Since this component is not a separate page, it does not need the `@page` directive.
 
-> Note: In Visual Studio, you can right-click the *Shared* directory in Solution Explorer, then choose *Add* -> *New Item*, then use the *Razor Component* item template.
+> Note: In Visual Studio, you can right-click the *Shared* directory in Solution Explorer, then choose *Add* -> *New Item* to use the *Razor Component* item template to add a new Razor component.
 
 The `ConfigurePizzaDialog` should have a `Pizza` parameter that specifies the pizza being configured. Component parameters are defined by adding a writable property to the component decorated with the `[Parameter]` attribute. Add a `@code` block to the `ConfigurePizzaDialog` with the following `Pizza` parameter:
 
@@ -134,7 +134,7 @@ Now the dialog shows a slider that can be used to change the pizza size. However
 
 ![Slider](https://user-images.githubusercontent.com/1430011/57576985-eff40400-7421-11e9-9a1b-b22d96c06bcb.png)
 
-We want the value of the `Pizza.Size` to reflect the value of the slider. When the dialog opens, the slider gets its value from `Pizza.Size`. Moving the slider should update the pizza size stored in `Pizza.Size` accordingly. This concept is called two-way binding.
+We want the value of `Pizza.Size` to reflect the value of the slider. When the dialog opens, the slider gets its value from `Pizza.Size`. Moving the slider should update the pizza size stored in `Pizza.Size` accordingly. This concept is called two-way binding.
 
 If you wanted to implement two-way binding manually, you could do so by combining value and @onchange, as in the following code (which you don't actually need to put in your application, because there's an easier solution):
 

docs/03-show-order-status.md

@@ -85,7 +85,7 @@ Then add a `@code` block that makes an asynchronous request for the data we need
 
 ```csharp
 @code {
-    List<OrderWithStatus> ordersWithStatus;
+    IEnumerable<OrderWithStatus> ordersWithStatus;
 
     protected override async Task OnParametersSetAsync()
     {
@@ -108,7 +108,7 @@ It's simple to express this using `@if/else` blocks in Razor code. Update the ma
     {
         <text>Loading...</text>
     }
-    else if (ordersWithStatus.Count == 0)
+    else if (!ordersWithStatus.Any())
     {
         <h2>No orders placed</h2>
         <a class="btn btn-success" href="">Order some pizza</a>
@@ -142,7 +142,7 @@ Asynchronous work when applying parameters and property values must occur during
 
 ### 5. How can I reset the database?
 
-If you want to reset your database to see the "no orders" case, simply delete `pizza.db` from the Server project and reload the page in your browser.
+If you want to reset your database to see the "no orders" case, simply delete `pizza.db` from the **BlazingPizza.Server** project and reload the page in your browser.
 
 ![My orders empty list](https://user-images.githubusercontent.com/1874516/77241390-a4b49100-6bae-11ea-8dd4-e59afdd8f710.png)
 
@@ -199,7 +199,7 @@ Once again we'll add a component to handle this. In the `Pages` directory, creat
 }
 ```
 
-This code illustrates how components can receive parameters from the router by declaring them as tokens in the `@page` directive. If you want to receive a `string`, the syntax is simply `{parameterName}`, which matches a `[Parameter]` name case-insensitively. If you want to receive a numeric value, the syntax is `{parameterName:int}`, as in the example above. The `:int` is an example of a *route constraint*. Other route constraints are supported too.
+This code illustrates how components can receive parameters from the router by declaring them as tokens in the `@page` directive. If you want to receive a `string`, the syntax is simply `{parameterName}`, which matches a `[Parameter]` name case-insensitively. If you want to receive a numeric value, the syntax is `{parameterName:int}`, as in the example above. The `:int` is an example of a *route constraint*. Other route constraints, such as bool, datetime and guid, are also supported.
 
 ![Order details empty](https://user-images.githubusercontent.com/1874516/77241434-391ef380-6baf-11ea-9803-9e7e65a4ea2b.png)
 
@@ -259,17 +259,24 @@ Now you can implement the polling. Update your `@code` block as follows:
             {
                 invalidOrder = false;
                 orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>($"orders/{OrderId}");
+                StateHasChanged();
+
+                if (orderWithStatus.IsDelivered)
+                {
+                    pollingCancellationToken.Cancel();
+                }
+                else
+                {
+                    await Task.Delay(4000);
+                }
             }
             catch (Exception ex)
             {
                 invalidOrder = true;
                 pollingCancellationToken.Cancel();
                 Console.Error.WriteLine(ex);
+                StateHasChanged();
             }
-
-            StateHasChanged();
-
-            await Task.Delay(4000);
         }
     }
 }
@@ -280,7 +287,7 @@ The code is a bit intricate, so be sure to go through it carefully to understand
 * This uses `OnParametersSet` instead of `OnInitialized` or `OnInitializedAsync`. `OnParametersSet` is another component lifecycle method, and it fires when the component is first instantiated *and* any time its parameters change value. If the user clicks a link directly from `myorders/2` to `myorders/3`, the framework will retain the `OrderDetails` instance and simply update its `OrderId` parameter in place.
   * As it happens, we haven't provided any links from one "my orders" screen to another, so the scenario never occurs in this application, but it's still the right lifecycle method to use in case we change the navigation rules in the future.
 * We're using an `async void` method to represent the polling. This method runs for arbitrarily long, even while other methods run. `async void` methods have no way to report exceptions upstream to callers (because typically the callers have already finished), so it's important to use `try/catch` and do something meaningful with any exceptions that may occur.
-* We're using `CancellationTokenSource` as a way of signalling when the polling should stop. Currently it only stops if there's an exception, but we'll add another stopping condition later.
+* We're using `CancellationTokenSource` as a way of signalling when the polling should stop. Currently it stops if there's an exception, or once the order is delivered.
 * We need to call `StateHasChanged` to tell Blazor that the component's data has (possibly) changed. The framework will then re-render the component. There's no way that the framework could know when to re-render your component otherwise, because it doesn't know about your polling logic.
 
 ## Rendering the order details

docs/04-refactor-state-management.md

@@ -20,7 +20,7 @@ public static async Task Main(string[] args)
     var builder = WebAssemblyHostBuilder.CreateDefault(args);
     builder.RootComponents.Add<App>("app");
 
-    builder.Services.AddBaseAddressHttpClient();
+    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
     builder.Services.AddScoped<OrderState>();
 
     await builder.Build().RunAsync();