Update master with release/3.0-preview9 (#14147)

Update master with release/3.0-preview9

Author: scottaddie

aspnetcore/blazor/common/samples/3.x/BlazorSample/App.razor

@@ -1,5 +1,8 @@
 <Router AppAssembly="typeof(Program).Assembly">
-    <NotFoundContent>
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
         <p>Sorry, there's nothing at this address.</p>
-    </NotFoundContent>
+    </NotFound>
 </Router>

aspnetcore/blazor/common/samples/3.x/BlazorSample/BlazorSample.csproj

@@ -8,10 +8,10 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview8.19405.7" />
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview8.19405.7" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.0.0-preview8.19405.7" />
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview8.19405.7" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19424.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19424.4" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.0.0-preview9.19424.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview9.19424.4" PrivateAssets="all" />
   </ItemGroup>
 
 </Project>

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/ChildComponent.razor

@@ -15,6 +15,6 @@
     public RenderFragment ChildContent { get; set; }
 
     [Parameter]
-    public EventCallback<UIMouseEventArgs> OnClick { get; set; }
+    public EventCallback<MouseEventArgs> OnClick { get; set; }
 }
 

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/HTTPRequestTester.razor

@@ -1,6 +1,6 @@
 @using Microsoft.AspNetCore.Blazor.Http
 @inject HttpClient Http
-@inject IUriHelper UriHelper
+@inject NavigationManager NavigationManager
 
 <h2>HTTP Request Tester</h2>
 
@@ -98,7 +98,7 @@
 
     protected override void OnInitialized()
     {
-        _requestReferrer = UriHelper.GetAbsoluteUri();
+        _requestReferrer = NavigationManager.Uri;
     }
 
     private async void DoRequest()

aspnetcore/blazor/common/samples/3.x/BlazorSample/JsInteropClasses/ExampleJsInterop.cs

@@ -17,12 +17,12 @@ public ExampleJsInterop(IJSRuntime jsRuntime)
             _jsRuntime = jsRuntime;
         }
 
-        public Task CallHelloHelperSayHello(string name)
+        public ValueTask<object> CallHelloHelperSayHello(string name)
         {
             // sayHello is implemented in wwwroot/exampleJsInterop.js
             return _jsRuntime.InvokeAsync<object>(
                 "exampleJsFunctions.sayHello",
-                DotNetObjectRef.Create(new HelloHelper(name)));
+                DotNetObjectReference.Create(new HelloHelper(name)));
         }
     }
     #endregion

aspnetcore/blazor/common/samples/3.x/BlazorSample/Pages/ParentComponent.razor

@@ -14,7 +14,7 @@
 @code {
     private string messageText;
 
-    private void ShowMessage(UIMouseEventArgs e)
+    private void ShowMessage(MouseEventArgs e)
     {
         messageText = "Blaze a new trail with Blazor!";
     }
@@ -44,7 +44,7 @@
 @@code {
     private string messageText;
 
-    private void ShowMessage(UIMouseEventArgs e)
+    private void ShowMessage(MouseEventArgs e)
     {
         messageText = "Blaze a new trail with Blazor!";
     }
@@ -67,5 +67,5 @@
     public RenderFragment ChildContent { get; set; }
 
     [Parameter]
-    public EventCallback<UIMouseEventArgs> OnClick { get; set; }
+    public EventCallback<MouseEventArgs> OnClick { get; set; }
 }</code></pre>

aspnetcore/blazor/common/samples/3.x/BlazorSample/Pages/_Imports.razor

@@ -1,6 +1,7 @@
 @using System.Net.Http
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
 @using Microsoft.JSInterop
 @using BlazorSample
 @using BlazorSample.Shared

aspnetcore/blazor/common/samples/3.x/BlazorSample/_Imports.razor

@@ -5,7 +5,7 @@ description: Learn how to create and use Razor components, including how to bind
 monikerRange: '>= aspnetcore-3.0'
 ms.author: riande
 ms.custom: mvc
-ms.date: 09/02/2019
+ms.date: 09/04/2019
 uid: blazor/components
 ---
 # Create and use ASP.NET Core Razor components
@@ -66,8 +66,8 @@ Use components with existing Razor Pages and MVC apps. There's no need to rewrit
 To render a component from a page or view, use the `RenderComponentAsync<TComponent>` HTML helper method:
 
 ```cshtml
-<div id="Counter">
-    @(await Html.RenderComponentAsync<Counter>(new { IncrementAmount = 10 }))
+<div id="MyComponent">
+    @(await Html.RenderComponentAsync<MyComponent>(RenderMode.ServerPrerendered))
 </div>
 ```
 
@@ -414,23 +414,23 @@ In the following example, `UpdateHeading` is called asynchronously when the butt
 
 For some events, event argument types are permitted. If access to one of these event types isn't necessary, it isn't required in the method call.
 
-Supported [UIEventArgs](https://github.com/aspnet/AspNetCore/blob/release/3.0-preview8/src/Components/Components/src/UIEventArgs.cs) are shown in the following table.
+Supported [EventArgs](https://github.com/aspnet/AspNetCore/tree/release/3.0-preview9/src/Components/Web/src/Web) are shown in the following table.
 
 | Event | Class |
 | ----- | ----- |
-| Clipboard | `UIClipboardEventArgs` |
-| Drag  | `UIDragEventArgs` &ndash; `DataTransfer` is used to hold the dragged data during a drag and drop operation and may hold one or more `UIDataTransferItem`. `UIDataTransferItem` represents one drag data item. |
-| Error | `UIErrorEventArgs` |
-| Focus | `UIFocusEventArgs` &ndash; Doesn't include support for `relatedTarget`. |
-| `<input>` change | `UIChangeEventArgs` |
-| Keyboard | `UIKeyboardEventArgs` |
-| Mouse | `UIMouseEventArgs` |
-| Mouse pointer | `UIPointerEventArgs` |
-| Mouse wheel | `UIWheelEventArgs` |
-| Progress | `UIProgressEventArgs` |
-| Touch | `UITouchEventArgs` &ndash; `UITouchPoint` represents a single contact point on a touch-sensitive device. |
-
-For information on the properties and event handling behavior of the events in the preceding table, see [EventArgs classes in the reference source (aspnet/AspNetCore release/3.0-preview9 branch)](https://github.com/aspnet/AspNetCore/tree/release/3.0-preview9/src/Components/Web/src).
+| Clipboard        | `ClipboardEventArgs` |
+| Drag             | `DragEventArgs` &ndash; `DataTransfer` and `DataTransferItem` hold dragged item data. |
+| Error            | `ErrorEventArgs` |
+| Focus            | `FocusEventArgs` &ndash; Doesn't include support for `relatedTarget`. |
+| `<input>` change | `ChangeEventArgs` |
+| Keyboard         | `KeyboardEventArgs` |
+| Mouse            | `MouseEventArgs` |
+| Mouse pointer    | `PointerEventArgs` |
+| Mouse wheel      | `WheelEventArgs` |
+| Progress         | `ProgressEventArgs` |
+| Touch            | `TouchEventArgs` &ndash; `TouchPoint` represents a single contact point on a touch-sensitive device. |
+
+For information on the properties and event handling behavior of the events in the preceding table, see [EventArgs classes in the reference source (aspnet/AspNetCore release/3.0-preview9 branch)](https://github.com/aspnet/AspNetCore/tree/release/3.0-preview9/src/Components/Web/src/Web).
 
 ### Lambda expressions
 
@@ -517,10 +517,9 @@ Component references provide a way to reference a component instance so that you
 
 * Add an [@ref](xref:mvc/views/razor#ref) attribute to the child component.
 * Define a field with the same type as the child component.
-* Provide the `@ref:suppressField` parameter, which suppresses backing field generation. For more information, see [Removing automatic backing field support for @ref in 3.0.0-preview9](https://github.com/aspnet/Announcements/issues/381).
 
 ```cshtml
-<MyLoginDialog @ref="loginDialog" @ref:suppressField ... />
+<MyLoginDialog @ref="loginDialog" ... />
 
 @code {
     private MyLoginDialog loginDialog;
@@ -537,34 +536,67 @@ When the component is rendered, the `loginDialog` field is populated with the `M
 > [!IMPORTANT]
 > The `loginDialog` variable is only populated after the component is rendered and its output includes the `MyLoginDialog` element. Until that point, there's nothing to reference. To manipulate components references after the component has finished rendering, use the `OnAfterRenderAsync` or `OnAfterRender` methods.
 
-<!-- HOLD https://github.com/aspnet/AspNetCore.Docs/pull/13818
-Component references provide a way to reference a component instance so that you can issue commands to that instance, such as `Show` or `Reset`.
+While capturing component references use a similar syntax to [capturing element references](xref:blazor/javascript-interop#capture-references-to-elements), it isn't a [JavaScript interop](xref:blazor/javascript-interop) feature. Component references aren't passed to JavaScript code&mdash;they're only used in .NET code.
 
-The Razor compiler automatically generates a backing field for element and component references when using [@ref](xref:mvc/views/razor#ref). In the following example, there's no need to create a `myLoginDialog` field for the `LoginDialog` component:
+> [!NOTE]
+> Do **not** use component references to mutate the state of child components. Instead, use normal declarative parameters to pass data to child components. Use of normal declarative parameters result in child components that rerender at the correct times automatically.
 
-```cshtml
-<LoginDialog @ref="myLoginDialog" ... />
+## Invoke component methods externally to update state
 
-@code {
-    private void OnSomething()
+Blazor uses a `SynchronizationContext` to enforce a single logical thread of execution. A component's lifecycle methods and any event callbacks that are raised by Blazor are executed on this `SynchronizationContext`. In the event a component must be updated based on an external event, such as a timer or other notifications, use the `InvokeAsync` method, which will dispatch to Blazor's `SynchronizationContext`.
+
+For example, consider a *notifier service* that can notify any listening component of the updated state:
+
+```csharp
+public class NotifierService
+{
+    // Can be called from anywhere
+    public async Task Update(string key, int value)
     {
-        myLoginDialog.Show();
+        if (Notify != null)
+        {
+            await Notify.Invoke(key, value);
+        }
     }
+
+    public event Action<string, int, Task> Notify;
 }
 ```
 
-When the component is rendered, the generated `myLoginDialog` field is populated with the `LoginDialog` component instance. You can then invoke .NET methods on the component instance.
+Usage of the `NotifierService` to update a component:
 
-In some cases, a backing field is required. For example, declare a backing field when referencing generic components. To suppress backing field generation, specify the `@ref:suppressField` parameter.
+```cshtml
+@page "/"
+@inject NotifierService Notifier
+@implements IDisposable
 
-> [!IMPORTANT]
-> The generated `myLoginDialog` variable is only populated after the component is rendered and its output includes the `LoginDialog` element. Until that point, there's nothing to reference. To manipulate components references after the component has finished rendering, use the `OnAfterRenderAsync` or `OnAfterRender` methods.
--->
+<p>Last update: @lastNotification.key = @lastNotification.value</p>
 
-While capturing component references use a similar syntax to [capturing element references](xref:blazor/javascript-interop#capture-references-to-elements), it isn't a [JavaScript interop](xref:blazor/javascript-interop) feature. Component references aren't passed to JavaScript code&mdash;they're only used in .NET code.
+@code {
+    private (string key, int value) lastNotification;
 
-> [!NOTE]
-> Do **not** use component references to mutate the state of child components. Instead, use normal declarative parameters to pass data to child components. Use of normal declarative parameters result in child components that rerender at the correct times automatically.
+    protected override void OnInitialized()
+    {
+        Notifier.Notify += OnNotify;
+    }
+
+    public async Task OnNotify(string key, int value)
+    {
+        await InvokeAsync(() =>
+        {
+            lastNotification = (key, value);
+            StateHasChanged();
+        });
+    }
+
+    public void Dispose()
+    {
+        Notifier.Notify -= OnNotify;
+    }
+}
+```
+
+In the preceding example, `NotifierService` invokes the component's `OnNotify` method outside of Blazor's `SynchronizationContext`. `InvokeAsync` is used to switch to the correct context and queue a render.
 
 ## Use \@key to control the preservation of elements and components
 
@@ -1356,7 +1388,7 @@ public class CultureController : Controller
 The following component shows an example of how to perform the initial redirection when the user selects a culture:
 
 ```cshtml
-@inject IUriHelper UriHelper
+@inject NavigationManager NavigationManager
 
 <h3>Select your language</h3>
 
@@ -1372,12 +1404,12 @@ The following component shows an example of how to perform the initial redirecti
     private void OnSelected(UIChangeEventArgs e)
     {
         var culture = (string)e.Value;
-        var uri = new Uri(UriHelper.GetAbsoluteUri())
+        var uri = new Uri(NavigationManager.Uri())
             .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
         var query = $"?culture={Uri.EscapeDataString(culture)}&" +
             $"redirectUri={Uri.EscapeDataString(uri)}";
 
-        UriHelper.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
+        NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
     }
 }
 ```
@@ -1397,3 +1429,21 @@ A limited set of ASP.NET Core's localization scenarios are currently supported:
 * `IHtmlLocalizer<>`, `IViewLocalizer<>`, and Data Annotations localization are ASP.NET Core MVC scenarios and **not supported** in Blazor apps.
 
 For more information, see <xref:fundamentals/localization>.
+
+## Scalable Vector Graphics (SVG) images
+
+Since Blazor renders HTML, browser-supported images, including Scalable Vector Graphics (SVG) images (*.svg*), are supported via the `<img>` tag:
+
+```html
+<img alt="Example image" src="some-image.svg" />
+```
+
+Similarly, SVG images are supported in the CSS rules of a stylesheet file (*.css*):
+
+```css
+.my-element {
+    background-image: url("some-image.svg");
+}
+```
+
+However, inline SVG markup isn't supported in all scenarios. If you place an `<svg>` tag directly into a component file (*.razor*), basic image rendering is supported but many advanced scenarios aren't yet supported. For example, `<use>` tags aren't currently respected, and `@bind` can't be used with some SVG tags. We expect to address these limitations in a future release.

aspnetcore/blazor/components.md

@@ -27,7 +27,7 @@ Default services are automatically added to the app's service collection.
 | ------- | -------- | ----------- |
 | <xref:System.Net.Http.HttpClient> | Singleton | Provides methods for sending HTTP requests and receiving HTTP responses from a resource identified by a URI. Note that this instance of `HttpClient` uses the browser for handling the HTTP traffic in the background. [HttpClient.BaseAddress](xref:System.Net.Http.HttpClient.BaseAddress) is automatically set to the base URI prefix of the app. For more information, see <xref:blazor/call-web-api>. |
 | `IJSRuntime` | Singleton | Represents an instance of a JavaScript runtime where JavaScript calls are dispatched. For more information, see <xref:blazor/javascript-interop>. |
-| `IUriHelper` | Singleton | Contains helpers for working with URIs and navigation state. For more information, see [URI and navigation state helpers](xref:blazor/routing#uri-and-navigation-state-helpers). |
+| `NavigationManager` | Singleton | Contains helpers for working with URIs and navigation state. For more information, see [URI and navigation state helpers](xref:blazor/routing#uri-and-navigation-state-helpers). |
 
 A custom service provider doesn't automatically provide the default services listed in the table. If you use a custom service provider and require any of the services shown in the table, add the required services to the new service provider.