Merge pull request #17726 from dotnet/master
commit
e8dc30453a
|
@ -5,7 +5,7 @@ description: Learn about Blazor hosting model configuration, including how to in
|
|||
monikerRange: '>= aspnetcore-3.1'
|
||||
ms.author: riande
|
||||
ms.custom: mvc
|
||||
ms.date: 03/24/2020
|
||||
ms.date: 04/07/2020
|
||||
no-loc: [Blazor, SignalR]
|
||||
uid: blazor/hosting-model-configuration
|
||||
---
|
||||
|
@ -19,14 +19,73 @@ This article covers hosting model configuration.
|
|||
|
||||
## Blazor WebAssembly
|
||||
|
||||
### Environment
|
||||
|
||||
When running an app locally, the environment defaults to Development. When the app is published, the environment defaults to Production.
|
||||
|
||||
A hosted Blazor WebAssembly app picks up the environment from the server via a middleware that communicates the environment to the browser by adding the `blazor-environment` header. The value of the header is the environment. The hosted Blazor app and the server app share the same environment. For more information, including how to configure the environment, see <xref:fundamentals/environments>.
|
||||
|
||||
For a standalone app running locally, the development server adds the `blazor-environment` header to specify the Development environment. To specify the environment for other hosting environments, add the `blazor-environment` header.
|
||||
|
||||
In the following example for IIS, add the custom header to the published *web.config* file. The *web.config* file is located in the *bin/Release/{TARGET FRAMEWORK}/publish* folder:
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<configuration>
|
||||
<system.webServer>
|
||||
|
||||
...
|
||||
|
||||
<httpProtocol>
|
||||
<customHeaders>
|
||||
<add name="blazor-environment" value="Staging" />
|
||||
</customHeaders>
|
||||
</httpProtocol>
|
||||
</system.webServer>
|
||||
</configuration>
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> To use a custom *web.config* file for IIS that isn't overwritten when the app is published to the *publish* folder, see <xref:host-and-deploy/blazor/webassembly#use-a-custom-webconfig>.
|
||||
|
||||
Obtain the app's environment in a component by injecting `IWebAssemblyHostEnvironment` and reading the `Environment` property:
|
||||
|
||||
```razor
|
||||
@page "/"
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
|
||||
@inject IWebAssemblyHostEnvironment HostEnvironment
|
||||
|
||||
<h1>Environment example</h1>
|
||||
|
||||
<p>Environment: @HostEnvironment.Environment</p>
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
As of the ASP.NET Core 3.2 Preview 3 release, Blazor WebAssembly supports configuration from:
|
||||
|
||||
* *wwwroot/appsettings.json*
|
||||
* *wwwroot/appsettings.{ENVIRONMENT}.json*
|
||||
|
||||
In a Blazor Hosted app, the [runtime environment](xref:fundamentals/environments) is the same as the server app's value.
|
||||
Add an *appsettings.json* file in the *wwwroot* folder:
|
||||
|
||||
When running the app locally, the environment defaults to Development. When the app is published, the environment defaults to Production. For more information, including how to configure the environment, see <xref:fundamentals/environments>.
|
||||
```json
|
||||
{
|
||||
"message": "Hello from config!"
|
||||
}
|
||||
```
|
||||
|
||||
Inject an <xref:Microsoft.Extensions.Configuration.IConfiguration> instance into a component to access the configuration data:
|
||||
|
||||
```razor
|
||||
@page "/"
|
||||
@using Microsoft.Extensions.Configuration
|
||||
@inject IConfiguration Configuration
|
||||
|
||||
<h1>Configuration example</h1>
|
||||
|
||||
<p>Message: @Configuration["message"]</p>
|
||||
```
|
||||
|
||||
> [!WARNING]
|
||||
> Configuration in a Blazor WebAssembly app is visible to users. **Don't store app secrets or credentials in configuration.**
|
||||
|
|
|
@ -5,7 +5,7 @@ description: Learn about data binding scenarios for components and DOM elements
|
|||
monikerRange: '>= aspnetcore-3.1'
|
||||
ms.author: riande
|
||||
ms.custom: mvc
|
||||
ms.date: 03/17/2020
|
||||
ms.date: 04/01/2020
|
||||
no-loc: [Blazor, SignalR]
|
||||
uid: blazor/integrate-components
|
||||
---
|
||||
|
@ -105,6 +105,19 @@ To support routable Razor components in Razor Pages apps:
|
|||
|
||||
Components use the shared *_Layout.cshtml* file for their layout.
|
||||
|
||||
<xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode> configures whether the `App` component:
|
||||
|
||||
* Is prerendered into the page.
|
||||
* Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
|
||||
|
||||
| Render Mode | Description |
|
||||
| ----------- | ----------- |
|
||||
| <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.ServerPrerendered> | Renders the `App` component into static HTML and includes a marker for a Blazor Server app. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
|
||||
| <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.Server> | Renders a marker for a Blazor Server app. Output from the `App` component isn't included. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
|
||||
| <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.Static> | Renders the `App` component into static HTML. |
|
||||
|
||||
For more information on the Component Tag Helper, see <xref:mvc/views/tag-helpers/builtin-th/component-tag-helper>.
|
||||
|
||||
1. Add a low-priority route for the *_Host.cshtml* page to endpoint configuration in `Startup.Configure`:
|
||||
|
||||
```csharp
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
## Custom user flows
|
||||
|
||||
The Microsoft Authentication Library (`Microsoft.Authentication.WebAssembly.Msal`) doesn't support [AAD B2C user flows](/azure/active-directory-b2c/user-flow-overview) by default. Create custom user flows in developer code.
|
||||
|
||||
For more information on how to build a challenge for a custom user flow, see [User flows in Azure Active Directory B2C](/azure/active-directory-b2c/user-flow-overview).
|
|
@ -87,10 +87,11 @@ Replaces:
|
|||
endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
|
||||
```
|
||||
|
||||
Routing is configured using the <xref:Microsoft.AspNetCore.Builder.EndpointRoutingApplicationBuilderExtensions.UseRouting*> and <xref:Microsoft.AspNetCore.Builder.EndpointRoutingApplicationBuilderExtensions.UseEndpoints*> middleware. To use controllers:
|
||||
|
||||
* Call <xref:Microsoft.AspNetCore.Builder.ControllerEndpointRouteBuilderExtensions.MapControllers*> inside `UseEndpoints` to map [attribute routed](#ar) controllers.
|
||||
* Call <xref:Microsoft.AspNetCore.Builder.ControllerEndpointRouteBuilderExtensions.MapControllerRoute*> or <xref:Microsoft.AspNetCore.Builder.ControllerEndpointRouteBuilderExtensions.MapAreaControllerRoute*>, to map [conventionally routed](#cr) controllers.
|
||||
> [!IMPORTANT]
|
||||
> Routing is configured using the <xref:Microsoft.AspNetCore.Builder.EndpointRoutingApplicationBuilderExtensions.UseRouting*> and <xref:Microsoft.AspNetCore.Builder.EndpointRoutingApplicationBuilderExtensions.UseEndpoints*> middleware. To use controllers:
|
||||
>
|
||||
> * Call <xref:Microsoft.AspNetCore.Builder.ControllerEndpointRouteBuilderExtensions.MapControllers*> inside `UseEndpoints` to map [attribute routed](#ar) controllers.
|
||||
> * Call <xref:Microsoft.AspNetCore.Builder.ControllerEndpointRouteBuilderExtensions.MapControllerRoute*> or <xref:Microsoft.AspNetCore.Builder.ControllerEndpointRouteBuilderExtensions.MapAreaControllerRoute*>, to map [conventionally routed](#cr) controllers.
|
||||
|
||||
<a name="routing-conventional-ref-label"></a>
|
||||
<a name="crd"></a>
|
||||
|
|
|
@ -4,7 +4,7 @@ author: guardrex
|
|||
ms.author: riande
|
||||
description: Learn how to use the ASP.NET Core Component Tag Helper to render Razor components in pages and views.
|
||||
ms.custom: mvc
|
||||
ms.date: 03/18/2020
|
||||
ms.date: 04/01/2020
|
||||
no-loc: [Blazor, SignalR]
|
||||
uid: mvc/views/tag-helpers/builtin-th/component-tag-helper
|
||||
---
|
||||
|
@ -14,12 +14,25 @@ By [Daniel Roth](https://github.com/danroth27) and [Luke Latham](https://github.
|
|||
|
||||
To render a component from a page or view, use the [Component Tag Helper](xref:Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Follow the guidance in the *Prepare the app to use components in pages and views* section of the <xref:blazor/integrate-components#prepare-the-app-to-use-components-in-pages-and-views> article.
|
||||
|
||||
## Component Tag Helper
|
||||
|
||||
The following Component Tag Helper renders the `Counter` component in a page or view:
|
||||
|
||||
```cshtml
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
@using {APP ASSEMBLY}.Pages
|
||||
|
||||
...
|
||||
|
||||
<component type="typeof(Counter)" render-mode="ServerPrerendered" />
|
||||
```
|
||||
|
||||
The preceding example assumes that the `Counter` component is in the app's *Pages* folder.
|
||||
|
||||
The Component Tag Helper can also pass parameters to components. Consider the following `ColorfulCheckbox` component that sets the check box label's color and size:
|
||||
|
||||
```razor
|
||||
|
@ -51,10 +64,17 @@ The Component Tag Helper can also pass parameters to components. Consider the fo
|
|||
The `Size` (`int`) and `Color` (`string`) [component parameters](xref:blazor/components#component-parameters) can be set by the Component Tag Helper:
|
||||
|
||||
```cshtml
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
@using {APP ASSEMBLY}.Shared
|
||||
|
||||
...
|
||||
|
||||
<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered"
|
||||
param-Size="14" param-Color="@("blue")" />
|
||||
```
|
||||
|
||||
The preceding example assumes that the `ColorfulCheckbox` component is in the app's *Shared* folder.
|
||||
|
||||
The following HTML is rendered in the page or view:
|
||||
|
||||
```html
|
||||
|
@ -68,6 +88,60 @@ Passing a quoted string requires an [explicit Razor expression](xref:mvc/views/r
|
|||
|
||||
The parameter type must be JSON serializable, which typically means that the type must have a default constructor and settable properties. For example, you can specify a value for `Size` and `Color` in the preceding example because the types of `Size` and `Color` are primitive types (`int` and `string`), which are supported by the JSON serializer.
|
||||
|
||||
In the following example, a class object is passed to the component:
|
||||
|
||||
*MyClass.cs*:
|
||||
|
||||
```csharp
|
||||
public class MyClass
|
||||
{
|
||||
public MyClass()
|
||||
{
|
||||
}
|
||||
|
||||
public int MyInt { get; set; } = 999;
|
||||
public string MyString { get; set; } = "Initial value";
|
||||
}
|
||||
```
|
||||
|
||||
**The class must have a public parameterless constructor.**
|
||||
|
||||
*Shared/MyComponent.razor*:
|
||||
|
||||
```razor
|
||||
<h2>MyComponent</h2>
|
||||
|
||||
<p>Int: @MyObject.MyInt</p>
|
||||
<p>String: @MyObject.MyString</p>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter]
|
||||
public MyClass MyObject { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
*Pages/MyPage.cshtml*:
|
||||
|
||||
```cshtml
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
@using {APP ASSEMBLY}
|
||||
@using {APP ASSEMBLY}.Shared
|
||||
|
||||
...
|
||||
|
||||
@{
|
||||
var myObject = new MyClass();
|
||||
myObject.MyInt = 7;
|
||||
myObject.MyString = "Set by MyPage";
|
||||
}
|
||||
|
||||
<component type="typeof(MyComponent)" render-mode="ServerPrerendered"
|
||||
param-MyObject="@myObject" />
|
||||
```
|
||||
|
||||
The preceding example assumes that the `MyComponent` component is in the app's *Shared* folder. `MyClass` is in the app's namespace (`{APP ASSEMBLY}`).
|
||||
|
||||
<xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode> configures whether the component:
|
||||
|
||||
* Is prerendered into the page.
|
||||
|
|
|
@ -5,7 +5,7 @@ description:
|
|||
monikerRange: '>= aspnetcore-3.1'
|
||||
ms.author: riande
|
||||
ms.custom: mvc
|
||||
ms.date: 04/08/2020
|
||||
ms.date: 04/09/2020
|
||||
no-loc: [Blazor, SignalR]
|
||||
uid: security/blazor/webassembly/hosted-with-azure-active-directory-b2c
|
||||
---
|
||||
|
@ -297,6 +297,9 @@ Run the app from the Server project. When using Visual Studio, select the Server
|
|||
<!-- HOLD
|
||||
[!INCLUDE[](~/includes/blazor-security/usermanager-signinmanager.md)]
|
||||
-->
|
||||
|
||||
[!INCLUDE[](~/includes/blazor-security/wasm-aad-b2c-userflows.md)]
|
||||
|
||||
[!INCLUDE[](~/includes/blazor-security/troubleshoot.md)]
|
||||
|
||||
## Additional resources
|
||||
|
|
|
@ -5,7 +5,7 @@ description:
|
|||
monikerRange: '>= aspnetcore-3.1'
|
||||
ms.author: riande
|
||||
ms.custom: mvc
|
||||
ms.date: 04/08/2020
|
||||
ms.date: 04/09/2020
|
||||
no-loc: [Blazor, SignalR]
|
||||
uid: security/blazor/webassembly/standalone-with-azure-active-directory-b2c
|
||||
---
|
||||
|
@ -133,6 +133,8 @@ For more information, see <xref:security/blazor/webassembly/additional-scenarios
|
|||
|
||||
[!INCLUDE[](~/includes/blazor-security/authentication-component.md)]
|
||||
|
||||
[!INCLUDE[](~/includes/blazor-security/wasm-aad-b2c-userflows.md)]
|
||||
|
||||
[!INCLUDE[](~/includes/blazor-security/troubleshoot.md)]
|
||||
|
||||
## Additional resources
|
||||
|
|
Loading…
Reference in New Issue