Skip to content

Full-stack UI updates (Fundamentals/Components nodes) #29996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guardrex merged 1 commit into from
Aug 7, 2023
Merged

Full-stack UI updates (Fundamentals/Components nodes) #29996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions aspnetcore/blazor/fundamentals/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,6 @@ Configuration in app settings files are loaded by default. In the following exam

`wwwroot/appsettings.json`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="json" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/wwwroot/appsettings.json" highlight="2":::
Expand Down Expand Up @@ -72,8 +70,6 @@ Inject an <xref:Microsoft.Extensions.Configuration.IConfiguration> instance into

`ConfigExample.razor`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/configuration/ConfigExample.razor":::
Expand Down Expand Up @@ -147,8 +143,6 @@ using Microsoft.Extensions.Configuration.Memory;

In the `Program` file:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="csharp" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Program.cs" id="snippet1":::
Expand Down Expand Up @@ -177,8 +171,6 @@ Inject an <xref:Microsoft.Extensions.Configuration.IConfiguration> instance into

`MemoryConfig.razor`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/configuration/MemoryConfig.razor":::
Expand Down
2 changes: 0 additions & 2 deletions aspnetcore/blazor/fundamentals/dependency-injection.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,6 @@ The `builder` variable represents a <xref:Microsoft.AspNetCore.Builder.WebApplic
builder.Services.AddSingleton<IDataAccess, DataAccess>();
```

:::moniker-end

:::moniker range="< aspnetcore-6.0"

After creating a new app, examine the `Startup.ConfigureServices` method in `Startup.cs`:
Expand Down
4 changes: 2 additions & 2 deletions aspnetcore/blazor/fundamentals/handle-errors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -503,6 +503,8 @@ In `App.razor`:

:::moniker-end

:::moniker range=">= aspnetcore-6.0"

To process errors in a component:

* Designate the `Error` component as a [`CascadingParameter`](xref:blazor/components/cascading-values-and-parameters#cascadingparameter-attribute) in the [`@code`](xref:mvc/views/razor#code) block. In an example `Counter` component in an app based on a Blazor project template, add the following `Error` property:
Expand Down Expand Up @@ -718,8 +720,6 @@ In the following example where <xref:Microsoft.AspNetCore.Components.ComponentBa
* `loadFailed` is set to `true`, which is used to display an error message to the user.
* The error is logged.

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_Server/Pages/handle-errors/ProductDetails.razor" highlight="11,27-39":::
Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/blazor/fundamentals/logging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ The `using` directive for <xref:Microsoft.Extensions.Logging> is required to sup

The following example:

* [Injects](xref:blazor/fundamentals/dependency-injection) an <xref:Microsoft.Extensions.Logging.ILogger> (`ILogger<Counter>`) object to create a logger. The log's *category* is the fully qualified name of the component's type, `Counter`.
* [Injects](xref:blazor/fundamentals/dependency-injection) an <xref:Microsoft.Extensions.Logging.ILogger> (`ILogger<Counter1>`) object to create a logger. The log's *category* is the fully qualified name of the component's type, `Counter`.
* Calls <xref:Microsoft.Extensions.Logging.LoggerExtensions.LogWarning%2A> to log at the <xref:Microsoft.Extensions.Logging.LogLevel.Warning> level.

`Counter1.razor`:
Expand Down
15 changes: 3 additions & 12 deletions aspnetcore/blazor/fundamentals/routing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,6 @@ Components support multiple route templates using multiple [`@page` directives](

`BlazorRoute.razor`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/BlazorRoute.razor" highlight="1-2":::
Expand Down Expand Up @@ -114,6 +112,9 @@ When the <xref:Microsoft.AspNetCore.Components.Routing.Router> component navigat

## Provide custom content when content isn't found

<!-- UPDATE 8.0 NotFound isn't part of the BWA template ...
confirm if it's a no-op with SSR/BWA -->

The <xref:Microsoft.AspNetCore.Components.Routing.Router> component allows the app to specify custom content if content isn't found for the requested route.

Set custom content in the <xref:Microsoft.AspNetCore.Components.Routing.Router> component's <xref:Microsoft.AspNetCore.Components.Routing.Router.NotFound> template:
Expand Down Expand Up @@ -163,8 +164,6 @@ The router uses route parameters to populate the corresponding [component parame

`RouteParameter1.razor`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/RouteParameter1.razor" highlight="1":::
Expand Down Expand Up @@ -203,8 +202,6 @@ Optional parameters aren't supported. In the following example, two [`@page` dir

`RouteParameter2.razor`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/RouteParameter2.razor" highlight="1":::
Expand Down Expand Up @@ -256,8 +253,6 @@ In the following example, the route to the `User` component only matches if:

`User.razor`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/User.razor" highlight="1":::
Expand Down Expand Up @@ -430,8 +425,6 @@ Catch-all route parameters are:

:::moniker-end

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/CatchAll.razor":::
Expand Down Expand Up @@ -550,8 +543,6 @@ The following component:

`Navigate.razor`:

<!-- UPDATE 8.0 -->

:::moniker range=">= aspnetcore-7.0"

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/Navigate.razor":::
Expand Down
21 changes: 2 additions & 19 deletions aspnetcore/blazor/fundamentals/signalr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,14 @@ For general guidance on ASP.NET Core SignalR configuration, see the topics in th

## Disable response compression for Hot Reload

When using [Hot Reload](xref:test/hot-reload), disable Response Compression Middleware in the `Development` environment. The following examples use the existing environment check in a project created from a Blazor project template. Whether or not the default code from a project template is used, always call <xref:Microsoft.AspNetCore.Builder.ResponseCompressionBuilderExtensions.UseResponseCompression%2A> first in the request processing pipeline.
When using [Hot Reload](xref:test/hot-reload), disable Response Compression Middleware in the `Development` environment. Whether or not the default code from a project template is used, always call <xref:Microsoft.AspNetCore.Builder.ResponseCompressionBuilderExtensions.UseResponseCompression%2A> first in the request processing pipeline.

In the server-side `Program` file:
In the `Program` file:

```csharp
if (!app.Environment.IsDevelopment())
{
app.UseResponseCompression();
app.UseExceptionHandler("/Error");
app.UseHsts();
}
```

In the client-side `Program` file:

```csharp
if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseResponseCompression();
app.UseExceptionHandler("/Error");
app.UseHsts();
}
```

Expand Down
56 changes: 30 additions & 26 deletions aspnetcore/blazor/fundamentals/startup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,60 +296,64 @@ Control headers at startup in C# code using the following approaches.

In the following examples, a [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy) is applied to the app via a CSP header. The `{POLICY STRING}` placeholder is the CSP policy string.

* In server-side and prerendered client-side scenarios, use [ASP.NET Core Middleware](xref:fundamentals/middleware/index) to control the headers collection.
### Server-side and prerendered client-side scenarios

Use [ASP.NET Core Middleware](xref:fundamentals/middleware/index) to control the headers collection.

:::moniker range=">= aspnetcore-6.0"

In the `Program` file:
In the `Program` file:

:::moniker-end

:::moniker range="< aspnetcore-6.0"

In `Startup.Configure` of `Startup.cs`:
In `Startup.Configure` of `Startup.cs`:

:::moniker-end

```csharp
app.Use(async (context, next) =>
{
context.Response.Headers.Add("Content-Security-Policy", "{POLICY STRING}");
await next();
});
```
```csharp
app.Use(async (context, next) =>
{
context.Response.Headers.Add("Content-Security-Policy", "{POLICY STRING}");
await next();
});
```

The preceding example uses inline middleware, but you can also create a custom middleware class and call the middleware with an extension method in the `Program` file. For more information, see <xref:fundamentals/middleware/write>.
The preceding example uses inline middleware, but you can also create a custom middleware class and call the middleware with an extension method in the `Program` file. For more information, see <xref:fundamentals/middleware/write>.

<!-- UPDATE 8.0 MapFallbackToFile is present in the following bullet content -->

* For client-side development without prerendering, pass <xref:Microsoft.AspNetCore.Builder.StaticFileOptions> to <xref:Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile%2A> that specifies response headers at the <xref:Microsoft.AspNetCore.Builder.StaticFileOptions.OnPrepareResponse> stage.
### Client-side development without prerendering

Pass <xref:Microsoft.AspNetCore.Builder.StaticFileOptions> to <xref:Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile%2A> that specifies response headers at the <xref:Microsoft.AspNetCore.Builder.StaticFileOptions.OnPrepareResponse> stage.

:::moniker range=">= aspnetcore-6.0"

In the server-side `Program` file:
In the server-side `Program` file:

:::moniker-end

:::moniker range="< aspnetcore-6.0"

In `Startup.Configure` of `Startup.cs`:
In `Startup.Configure` of `Startup.cs`:

:::moniker-end

```csharp
var staticFileOptions = new StaticFileOptions
{
OnPrepareResponse = context =>
{
context.Context.Response.Headers.Add("Content-Security-Policy",
"{POLICY STRING}");
}
};
```csharp
var staticFileOptions = new StaticFileOptions
{
OnPrepareResponse = context =>
{
context.Context.Response.Headers.Add("Content-Security-Policy",
"{POLICY STRING}");
}
};

...
...

app.MapFallbackToFile("index.html", staticFileOptions);
```
app.MapFallbackToFile("index.html", staticFileOptions);
```

For more information on CSPs, see <xref:blazor/security/content-security-policy>.

Expand Down
4 changes: 1 addition & 3 deletions aspnetcore/blazor/project-structure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ This article describes the files and folders that make up a Blazor app generated

## Blazor Web App

<!-- UPDATE 8.0 Assumes that there will be a 'blazor-empty' template at release -->

Blazor Web App project templates: `blazor`, `blazor-empty`
Blazor Web App project template: `blazor`

Project structure:

Expand Down
11 changes: 1 addition & 10 deletions aspnetcore/blazor/tooling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,13 +118,6 @@ Create a new project:
dotnet new blazor -o BlazorApp
```

<!-- UPDATE 8.0 Assumes that there will be a 'blazor-empty' template at release -->

* Alternatively, create a Blazor Web App without demonstration code and Bootstrap using the `blazor-empty` project template:

```dotnetcli
dotnet new blazor-empty -o BlazorApp

<!-- UPDATE 8.0 Cross-link SSR -->

To enable interactivity with server-side rendering (SSR), add the `--use-server` option to the command:
Expand Down Expand Up @@ -614,9 +607,7 @@ The Blazor framework provides templates for creating new apps. The templates are

:::moniker range=">= aspnetcore-8.0"

<!-- UPDATE 8.0 Assumes that there will be a 'blazor-empty' template at release -->

* Blazor Web App project template (*recommended*): `blazor`, `blazor-empty`
* Blazor Web App project template (*recommended*): `blazor`
* Blazor WebAssembly project templates: `blazorwasm`, `blazorwasm-empty`

:::moniker-end
Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/blazor/tutorials/build-a-blazor-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ The `-n|--name` option in the preceding command specifies the name of the new Ra

Open the `Todo` component in any file editor and make the following changes at the top of the file:

<!-- UPDATE 8.0 -->
<!-- UPDATE 8.0 For render mode guidance -->

* Add an `@page` Razor directive with a relative URL of `/todo`.
* Add the `[RenderModeServer]` attribute. The attribute indicates that for this component the render mode should be server-side rendering (SSR), which means that the `Todo` component is rendered interactively on the server via Blazor Server hosting with server-side prerendering. <!-- `@rendermode` Razor directive set to `Auto`. The directive indicates that for this component the render mode should be determined automatically based on a policy. The default render mode for a Blazor Web App is server-side rendering (SSR), which means that the `Todo` component is rendered interactively on the server via Blazor Server hosting with server-side prerendering. -->
Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/blazor/tutorials/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ For an overview of Blazor, see <xref:blazor/index>.

* <xref:blazor/tutorials/build-a-blazor-app>

<!-- UPDATE 8.0 -->
<!-- UPDATE 8.0 For cross-link to SignalR-Blazor tutorial -->

* <xref:blazor/tutorials/signalr-blazor-preview>

Expand Down