dotnet · guardrex · Oct 10, 2023 · Oct 4, 2023 · Oct 4, 2023 · Oct 4, 2023
@@ -37,7 +37,7 @@ In <xref:Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder> methods wi
 
 ```razor
 @page "/built-content"
-@attribute [RenderModeServer]
+@rendermode RenderMode.InteractiveServer
 
 <h1>Build a component</h1>
 

@@ -61,18 +61,19 @@ The Blazor examples that demonstrate obtaining weather data from a server API ar
 
 :::moniker range=">= aspnetcore-8.0"
 
-<!-- UPDATE 8.0 Cross-link render modes -->
+<!-- UPDATE 8.0 Cross-link render modes, and 
+                this will simplify at RTM -->
 
-For server-side components in Blazor Web Apps that require interactivity, add the `[RenderModeServer]` attribute to the top of the component:
+For server-side components in Blazor Web Apps that require interactivity, add interactive server rendering to the component:
 
 ```razor
-@attribute [RenderModeServer]
+@rendermode RenderMode.InteractiveServer
 ```
 
-For client-side components in Blazor Web Apps that require interactivity, add the `[RenderModeWebAssembly]` attribute to the top of the component:
+For client-side components in Blazor Web Apps that require interactivity, add interactive WebAssembly rendering to the component:
 
 ```razor
-@attribute [RenderModeWebAssembly]
+@rendermode RenderMode.InteractiveWebAssembly
 ```
 
 :::moniker-end

@@ -55,7 +55,7 @@ The following `Daleks` component displays the cascaded values.
 
 ```razor
 @page "/daleks"
-@attribute [RenderModeServer]
+@rendermode RenderMode.InteractiveServer
 
 <h1>Root-level cascading value registration example</h1>
 

@@ -119,6 +119,8 @@ For events that support an event argument type, specifying an event parameter in
 
 Supported <xref:System.EventArgs> are shown in the following table.
 
+<!-- UPDATE 8.0 Review and update event args for the framework -->
+
 | Event            | Class  | DOM notes |
 | ---------------- | ------ | --- |
 | Clipboard        | <xref:Microsoft.AspNetCore.Components.Web.ClipboardEventArgs> | |
@@ -142,6 +144,45 @@ For more information, see the following resources:
 
 * <xref:Microsoft.AspNetCore.Components.Web.EventHandlers> holds attributes to configure the mappings between event names and event argument types.
 
+:::moniker range=">= aspnetcore-8.0"
+
+## Support for dialog cancel and close events
+
+Blazor supports the [`cancel`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/cancel_event) and [`close`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/close_event) events on the `dialog` HTML element.
+
+In the following example:
+
+* `OnClose` is called when the `my-dialog` dialog is closed with the **Close** button.
+* `OnCancel` is called when the dialog is cancelled with the <kbd>Esc</kbd> key. Note that when an HTML dialog is dismissed with the <kbd>Esc</kbd> key, both the `cancel` and `close` events are triggered.
+
+```razor
+<div>
+    <p>Output: @message</p>
+
+    <button onclick="document.getElementById('my-dialog').showModal()">
+        Show modal dialog
+    </button>
+
+    <dialog id="my-dialog" @onclose="OnClose" @oncancel="OnCancel">
+        <p>Hi there!</p>
+
+        <form method="dialog">
+            <button>Close</button>
+        </form>
+    </dialog>
+</div>
+
+@code {
+    private string? message;
+
+    private void OnClose(EventArgs e) => message += "onclose, ";
+
+    private void OnCancel(EventArgs e) => message += "oncancel, ";
+}
+```
+
+:::moniker-end
+
 :::moniker range=">= aspnetcore-6.0"
 
 ## Custom event arguments

@@ -95,10 +95,8 @@ The namespace of a component authored with Razor is based on the following (in p
 
 The following are **not** supported:
 
-<!-- UPDATE 8.0 Confirm second bullet is correct -->
-
 * The [`global::`](/dotnet/csharp/language-reference/operators/namespace-alias-qualifier) qualification.
-* Partially-qualified names. For example, you can't add `@using BlazorSample` to a component and then reference the `NavMenu` component in the app's `Components/Layout` folder (`Components/Layout/NavMenu.razor`) with `<Layout.NavMenu></Layout.NavMenu>`.
+* Partially-qualified names. For example, you can't add `@using BlazorSample.Components` to a component and then reference the `NavMenu` component in the app's `Components/Layout` folder (`Components/Layout/NavMenu.razor`) with `<Layout.NavMenu></Layout.NavMenu>`.
 
 :::moniker-end
 
@@ -1478,9 +1476,6 @@ In the preceding code, the CSS selector, `#app`, indicates that the `App` compon
 <div id="app">...</app>
 ```
 
-<!-- UPDATE 8.0 Need to check on this: Is this still valid in a 
-     BW app, and is the render-mode still set in this way? -->
-
 MVC and Razor Pages apps can also use the [Component Tag Helper](xref:Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper) to register statically-rendered Blazor WebAssembly root components:
 
 ```cshtml

@@ -84,40 +84,22 @@ Where services are registered, add services for Razor components and services to
 
 In the `Program` file before the line that builds the app (`builder.Build()`):
 
-```csharp
-builder.Services.AddRazorComponents()
-    .AddServerComponents();
-```
-
-<!-- UPDATE 8.0 RC2
-
 ```csharp
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
 ```
 
--->
-
 For more information on adding support for server and WebAssembly components, see <xref:blazor/components/render-modes>.
 
 <!-- UPDATE 8.0 Update API cross-link -->
 
-In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component. By default, the app's root component is the `App` component (`App.razor`). Chain a call to `AddInteractiveServerRenderMode` <!-- <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointConventionBuilder.AddInteractiveServerRenderMode%2A> --> to configure the Server render mode for the app:
-
-```csharp
-app.MapRazorComponents<App>()
-    .AddServerRenderMode();
-```
-
-<!-- UPDATE 8.0 RC2
+In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component. By default, the app's root component is the `App` component (`App.razor`). Chain a call to `AddInteractiveInteractiveServerRenderMode` <!-- <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointConventionBuilder.AddInteractiveInteractiveServerRenderMode%2A> --> to configure the Server render mode for the app:
 
 ```csharp
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 ```
 
--->
-
 > [!NOTE]
 > If the app hasn't already been updated to include Antiforgery Middleware, add the following line after <xref:Microsoft.AspNetCore.Builder.AuthorizationAppBuilderExtensions.UseAuthorization%2A> is called:
 >
@@ -429,40 +411,22 @@ Where services are registered, add services for Razor components and services to
 
 In the `Program` file before the line that builds the app (`builder.Build()`):
 
-```csharp
-builder.Services.AddRazorComponents()
-    .AddServerComponents();
-```
-
-<!-- UPDATE 8.0 RC2
-
 ```csharp
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
 ```
 
--->
-
 For more information on adding support for server and WebAssembly components, see <xref:blazor/components/render-modes>.
 
 <!-- UPDATE 8.0 Update API cross-link -->
 
-In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component. By default, the app's root component is the `App` component (`App.razor`). Chain a call to `AddInteractiveServerRenderMode` <!-- <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointConventionBuilder.AddInteractiveServerRenderMode%2A> --> to configure the Server render mode for the app:
-
-```csharp
-app.MapRazorComponents<App>()
-    .AddServerRenderMode();
-```
-
-<!-- UPDATE 8.0 RC2
+In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component. By default, the app's root component is the `App` component (`App.razor`). Chain a call to `AddInteractiveInteractiveServerRenderMode` <!-- <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointConventionBuilder.AddInteractiveInteractiveServerRenderMode%2A> --> to configure the Server render mode for the app:
 
 ```csharp
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 ```
 
--->
-
 > [!NOTE]
 > If the app hasn't already been updated to include Antiforgery Middleware, add the following line after <xref:Microsoft.AspNetCore.Builder.AuthorizationAppBuilderExtensions.UseAuthorization%2A> is called:
 >
@@ -476,7 +440,7 @@ Create a `Pages` folder in the `Components` folder for routable components. The
 
 ```razor
 @page "/counter"
-@attribute [RenderModeServer]
+@rendermode RenderMode.InteractiveServer
 
 <PageTitle>Counter</PageTitle>
 
@@ -496,12 +460,6 @@ Create a `Pages` folder in the `Components` folder for routable components. The
 }
 ```
 
-<!-- UPDATE 8.0 RC2
-
-@attribute [RenderModeInteractiveServer]
-
--->
-
 Run the project and navigate to the routable `Counter` component at `/counter`.
 
 For more information on namespaces, see the [Component namespaces](#component-namespaces) section.

@@ -49,11 +49,15 @@ The following example demonstrates the dynamic registration of the preceding `Qu
 
 :::moniker range=">= aspnetcore-8.0"
 
-* In a Blazor Web App app, modify the call to <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddServerComponents%2A> in the server-side `Program` file:
+* In a Blazor Web App app, modify the call to `AddInteractiveServerComponents` in the server-side `Program` file:
+
+    <!-- UPDATE 8.0 HOLD
+     <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddInteractiveServerComponents%2A>
+    -->
 
   ```csharp
   builder.Services.AddRazorComponents()
-      .AddServerComponents(options =>
+      .AddInteractiveServerComponents(options =>
       {
           options.RootComponents.RegisterForJavaScript<Quote>(identifier: "quote",
             javaScriptInitializer: "initializeComponent");
@@ -228,15 +232,19 @@ Add a package reference for [`Microsoft.AspNetCore.Components.CustomElements`](h
 
 ### Blazor Web App registration
 
-To register a root component as a custom element in a Blazor Web App, modify the call to <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddServerComponents%2A> in the server-side `Program` file. The following example registers the `Counter` component with the custom HTML element `my-counter`:
+To register a root component as a custom element in a Blazor Web App, modify the call to `AddInteractiveServerComponents` in the server-side `Program` file. The following example registers the `Counter` component with the custom HTML element `my-counter`:
+
+<!-- UPDATE 8.0 HOLD
+  <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddInteractiveServerComponents%2A>
+-->
 
 <!-- UPDATE 8.0 Per PU issue https://github.com/dotnet/aspnetcore/issues/42329 and
      PR https://github.com/dotnet/aspnetcore/pull/42314.
      Check that this compiles under Pre7. -->
 
 ```csharp
 builder.Services.AddRazorComponents()
-    .AddServerComponents(options =>
+    .AddInteractiveServerComponents(options =>
     {
         options.RootComponents.RegisterCustomElement<Counter>("my-counter");
     });
@@ -351,7 +359,11 @@ Supported parameter types:
 
 Register a root component as a custom element:
 
-* In a Blazor Server app, modify the call to <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddServerComponents%2A> in the `Program` file:
+* In a Blazor Server app, modify the call to `AddInteractiveServerComponents` in the `Program` file:
+
+<!-- UPDATE 8.0 HOLD
+  <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddInteractiveServerComponents%2A>
+-->
 
   ```csharp
   builder.Services.AddServerSideBlazor(options =>

diff --git a/aspnetcore/blazor/components/prerendering.md b/aspnetcore/blazor/components/prerendering.md
@@ -35,7 +35,7 @@ Consider the following `PrerenderedCounter1` counter component. The component se
 
 ```razor
 @page "/prerendered-counter-1"
-@attribute [RenderModeServer]
+@rendermode RenderMode.InteractiveServer
 @inject ILogger<PrerenderedCounter1> Logger
 
 <PageTitle>Prerendered Counter 1</PageTitle>
@@ -63,12 +63,6 @@ Consider the following `PrerenderedCounter1` counter component. The component se
 }
 ```
 
-<!-- UPDATE 8.0 RC2
-
-@attribute [RenderModeInteractiveServer]
-
--->
-
 Run the app and inspect logging from the component:
 
 > :::no-loc text="info: BlazorSample.Components.Pages.PrerenderedCounter1[0]":::  
@@ -133,7 +127,7 @@ The following counter component example persists counter state during prerenderi
 
 ```razor
 @page "/prerendered-counter-2"
-@attribute [RenderModeServer]
+@rendermode RenderMode.InteractiveServer
 @implements IDisposable
 @inject ILogger<PrerenderedCounter2> Logger
 @inject PersistentComponentState ApplicationState
@@ -188,12 +182,6 @@ The following counter component example persists counter state during prerenderi
 }
 ```
 
-<!-- UPDATE 8.0 RC2
-
-@attribute [RenderModeInteractiveServer]
-
--->
-
 When the component executes, `currentCount` is only set once during prerendering. The value is restored when the component is rerendered:
 
 > :::no-loc text="info: BlazorSample.Components.Pages.PrerenderedCounter2[0]":::  

@@ -55,7 +55,7 @@ For example, add the following component to render a grid.
 ```razor
 @page "/quickgrid-example"
 @using Microsoft.AspNetCore.Components.QuickGrid
-@attribute [RenderModeServer]
+@rendermode RenderMode.InteractiveServer
 
 <QuickGrid Items="@people">
     <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
@@ -78,7 +78,7 @@ For example, add the following component to render a grid.
 }
 ```
 
-The preceding example specifies server rendering (`@attribute [RenderModeServer]`), which enables the `QuickGrid`'s interactive features. In this case, the only interactive feature is sortable columns.
+The preceding example specifies server rendering (`@rendermode RenderMode.InteractiveServer`), which enables the `QuickGrid`'s interactive features. In this case, the only interactive feature is sortable columns.
 
 For an example that uses an <xref:System.Linq.IQueryable> with Entity Framework Core as the queryable data source, see the [`SampleQuickGridComponent` component in the ASP.NET Core Basic Test App (`dotnet/aspnetcore` GitHub repository)](https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor).