Skip to content
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.

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

Move code samples and BWA handle errors 8.0 #29918

Merged
merged 5 commits into from
Jul 26, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
130 changes: 85 additions & 45 deletions aspnetcore/blazor/fundamentals/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,57 @@ Configuration in app settings files are loaded by default. In the following exam

`wwwroot/appsettings.json`:

```json
{
"h1FontSize": "50px"
}
```
:::moniker range=">= aspnetcore-7.0"

:::code language="json" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/wwwroot/appsettings.json" highlight="2":::

:::moniker-end

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

:::code language="json" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/wwwroot/appsettings.json" highlight="2":::

:::moniker-end

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

:::code language="json" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/wwwroot/appsettings.json" highlight="2":::

:::moniker-end

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

:::code language="json" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/wwwroot/appsettings.json" highlight="2":::

:::moniker-end

Inject an <xref:Microsoft.Extensions.Configuration.IConfiguration> instance into a component to access the configuration data.

`Pages/ConfigurationExample.razor`:
`Pages/ConfigExample.razor`:

```razor
@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
:::moniker range=">= aspnetcore-7.0"

<h1 style="font-size:@Configuration["h1FontSize"]">
Configuration example
</h1>
```
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/configuration/ConfigExample.razor":::

:::moniker-end

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

:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/configuration/ConfigExample.razor":::

:::moniker-end

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

:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/configuration/ConfigExample.razor":::

:::moniker-end

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

:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/configuration/ConfigExample.razor":::

:::moniker-end

Client security restrictions prevent direct access to files, including settings files for app configuration. To read configuration files in addition to `appsettings.json`/`appsettings.{ENVIRONMENT}.json` from the `wwwroot` folder into configuration, use an <xref:System.Net.Http.HttpClient>.

Expand Down Expand Up @@ -110,49 +142,57 @@ using Microsoft.Extensions.Configuration.Memory;

In `Program.cs`:

```csharp
var vehicleData = new Dictionary<string, string>()
{
{ "color", "blue" },
{ "type", "car" },
{ "wheels:count", "3" },
{ "wheels:brand", "Blazin" },
{ "wheels:brand:type", "rally" },
{ "wheels:year", "2008" },
};
:::moniker range=">= aspnetcore-7.0"

var memoryConfig = new MemoryConfigurationSource { InitialData = vehicleData };
:::code language="csharp" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Program.cs" id="snippet1":::

builder.Configuration.Add(memoryConfig);
```
:::moniker-end

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

:::code language="csharp" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Program.cs" id="snippet1":::

:::moniker-end

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

:::code language="csharp" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Program.cs" id="snippet1":::

:::moniker-end

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

:::code language="csharp" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Program.cs" id="snippet1":::

:::moniker-end

Inject an <xref:Microsoft.Extensions.Configuration.IConfiguration> instance into a component to access the configuration data.

`Pages/MemoryConfig.razor`:

```razor
@page "/memory-config"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
:::moniker range=">= aspnetcore-7.0"

<h1>Memory configuration example</h1>
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/configuration/MemoryConfig.razor":::

<h2>General specifications</h2>
:::moniker-end

<ul>
<li>Color: @Configuration["color"]</li>
<li>Type: @Configuration["type"]</li>
</ul>
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0"

<h2>Wheels</h2>
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/configuration/MemoryConfig.razor":::

<ul>
<li>Count: @Configuration["wheels:count"]</li>
<li>Brand: @Configuration["wheels:brand"]</li>
<li>Type: @Configuration["wheels:brand:type"]</li>
<li>Year: @Configuration["wheels:year"]</li>
</ul>
```
:::moniker-end

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

:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/configuration/MemoryConfig.razor":::

:::moniker-end

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

:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/configuration/MemoryConfig.razor":::

:::moniker-end

Obtain a section of the configuration in C# code with <xref:Microsoft.Extensions.Configuration.IConfiguration.GetSection%2A?displayProperty=nameWithType>. The following example obtains the `wheels` section for the configuration in the preceding example:

Expand Down
57 changes: 53 additions & 4 deletions aspnetcore/blazor/fundamentals/handle-errors.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,61 @@ When a Blazor app isn't functioning properly during development, receiving detai

The UI for this error handling experience is part of the [Blazor project templates](xref:blazor/project-structure).

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

In a Blazor Web App, customize the experience in the `App.razor` file. Because the [Environment Tag Helper](xref:mvc/views/tag-helpers/builtin-th/environment-tag-helper) (for example, `<environment include="Production">...</environment>`) isn't supported in Razor components, the following example injects <xref:Microsoft.Extensions.Hosting.IHostEnvironment> to configure error messages for different environments.

:::moniker-end

In a Blazor Server app, customize the experience in the `Pages/_Host.cshtml` file:
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"

In a Blazor Server app, customize the experience in the `Pages/_Host.cshtml` file. The following example uses the [Environment Tag Helper](xref:mvc/views/tag-helpers/builtin-th/environment-tag-helper) to configure error messages for different environments.

:::moniker-end

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

In a Blazor Server app, customize the experience in the `Pages/_Layout.cshtml` file:
In a Blazor Server app, customize the experience in the `Pages/_Layout.cshtml` file. The following example uses the [Environment Tag Helper](xref:mvc/views/tag-helpers/builtin-th/environment-tag-helper) to configure error messages for different environments.

:::moniker-end

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

In a Blazor Server app, customize the experience in the `Pages/_Host.cshtml` file:
In a Blazor Server app, customize the experience in the `Pages/_Host.cshtml` file. The following example uses the [Environment Tag Helper](xref:mvc/views/tag-helpers/builtin-th/environment-tag-helper) to configure error messages for different environments.

:::moniker-end

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

At the top of the `App` component file (`App.razor`):

```razor
@inject IHostEnvironment HostEnvironment
```

Create or modify the Blazor error UI markup:

```razor
<div id="blazor-error-ui">
@if (HostEnvironment.IsProduction())
{
<span>An error has occurred.</span>
}
else
{
<span>An unhandled exception occurred.</span>
}
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
```

:::moniker-end

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

Create or modify the Blazor error UI markup:

```cshtml
<div id="blazor-error-ui">
<environment include="Staging,Production">
Expand All @@ -54,6 +91,8 @@ In a Blazor Server app, customize the experience in the `Pages/_Host.cshtml` fil
</div>
```

:::moniker-end

In a Blazor WebAssembly app, customize the experience in the `wwwroot/index.html` file:

```html
Expand All @@ -64,8 +103,18 @@ In a Blazor WebAssembly app, customize the experience in the `wwwroot/index.html
</div>
```

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

The `blazor-error-ui` element is normally hidden due to the presence of the `display: none` style of the `blazor-error-ui` CSS class in the app's stylesheet (`wwwroot/css/app.css`). When an error occurs, the framework applies `display: block` to the element.

:::moniker-end

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

The `blazor-error-ui` element is normally hidden due to the presence of the `display: none` style of the `blazor-error-ui` CSS class in the site's stylesheet (`wwwroot/css/site.css` for Blazor Server or `wwwroot/css/app.css` for Blazor WebAssembly). When an error occurs, the framework applies `display: block` to the element.

:::moniker-end

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

## Handle caught exceptions outside of a Razor component's lifecycle
Expand Down
31 changes: 17 additions & 14 deletions aspnetcore/blazor/fundamentals/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,29 @@ The following is an example counter component and part of an app created from a

`Pages/Counter.razor`:

```razor
@page "/counter"
:::moniker range=">= aspnetcore-7.0"

<PageTitle>Counter</PageTitle>
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/Counter.razor":::

<h1>Counter</h1>
:::moniker-end

<p role="status">Current count: @currentCount</p>
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0"

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/Counter.razor":::

@code {
private int currentCount = 0;
:::moniker-end

private void IncrementCount()
{
currentCount++;
}
}
```
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0"

:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/Counter.razor":::

:::moniker-end

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

:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/Counter.razor":::

:::moniker-end

The preceding `Counter` component:

Expand Down