From f788250ff4e37c8851c748fb3ee492a610d92595 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 2 Apr 2020 12:25:27 -0500 Subject: [PATCH 1/6] Surface additional Blazor environment content --- .../blazor/hosting-model-configuration.md | 62 ++++++++++++++++++- 1 file changed, 59 insertions(+), 3 deletions(-) diff --git a/aspnetcore/blazor/hosting-model-configuration.md b/aspnetcore/blazor/hosting-model-configuration.md index 2dbab74532..d4fc8c8b7e 100644 --- a/aspnetcore/blazor/hosting-model-configuration.md +++ b/aspnetcore/blazor/hosting-model-configuration.md @@ -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/02/2020 no-loc: [Blazor, SignalR] uid: blazor/hosting-model-configuration --- @@ -19,14 +19,70 @@ 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 . + +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 + + + + + ... + + + + + + + + +``` + +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 + +

Environment example

+ +

Environment: @HostEnvironment.Environment

+``` + +### 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 . +```json +{ + "message": "Hello from config!" +} +``` + +Inject an instance into a component to access the configuration data: + +```razor +@page "/" +@using Microsoft.Extensions.Configuration +@inject IConfiguration Configuration + +

Configuration example

+ +

@Configuration["message"]

+``` > [!WARNING] > Configuration in a Blazor WebAssembly app is visible to users. **Don't store app secrets or credentials in configuration.** From 03d5ee7fb4e6996973ba3d897014265ea76bed89 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 2 Apr 2020 12:28:43 -0500 Subject: [PATCH 2/6] Nits --- aspnetcore/blazor/hosting-model-configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/hosting-model-configuration.md b/aspnetcore/blazor/hosting-model-configuration.md index d4fc8c8b7e..23556b44e7 100644 --- a/aspnetcore/blazor/hosting-model-configuration.md +++ b/aspnetcore/blazor/hosting-model-configuration.md @@ -68,7 +68,7 @@ Add an *appsettings.json* file in the *wwwroot* folder: ```json { - "message": "Hello from config!" + "message": "Hello from config!" } ``` @@ -81,7 +81,7 @@ Inject an instance into

Configuration example

-

@Configuration["message"]

+

Message: @Configuration["message"]

``` > [!WARNING] From d5940b48b92a605eb0f860d695cf86327fcab257 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 7 Apr 2020 07:47:06 -0500 Subject: [PATCH 3/6] NOTE on using a custom web.config --- aspnetcore/blazor/hosting-model-configuration.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/aspnetcore/blazor/hosting-model-configuration.md b/aspnetcore/blazor/hosting-model-configuration.md index 23556b44e7..64435cd218 100644 --- a/aspnetcore/blazor/hosting-model-configuration.md +++ b/aspnetcore/blazor/hosting-model-configuration.md @@ -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: 04/02/2020 +ms.date: 04/07/2020 no-loc: [Blazor, SignalR] uid: blazor/hosting-model-configuration --- @@ -45,6 +45,9 @@ In the following example for IIS, add the custom header to the published *web.co ``` +> [!NOTE] +> To use a custom *web.config* file for IIS that isn't overwritten when the app is published to the *publish* folder, see . + Obtain the app's environment in a component by injecting `IWebAssemblyHostEnvironment` and reading the `Environment` property: ```razor From b5b6f87eeae10e4bffa11628f3db666e3c585e35 Mon Sep 17 00:00:00 2001 From: Marko Hrovatic Date: Fri, 10 Apr 2020 05:00:55 +0200 Subject: [PATCH 4/6] Upgrade the info about exposing attribute routes to Warning (#17511) * Upgrade the info about exposing attribute routes to Warning Makes it more obvious you have to do something special, e.g. call MapControllers() to expose attribute only routes on regular (non-API) controllers. If you just comment out the default conventional route and add attribute routes to controllers, it won't work. And it is not immediately obvious why it doesn't work. This change makes those two lines more prominent. * upgrade warning to important Co-authored-by: Scott Addie <10702007+scottaddie@users.noreply.github.com> --- aspnetcore/mvc/controllers/routing.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/aspnetcore/mvc/controllers/routing.md b/aspnetcore/mvc/controllers/routing.md index 9bdf38a301..c80b23fc92 100644 --- a/aspnetcore/mvc/controllers/routing.md +++ b/aspnetcore/mvc/controllers/routing.md @@ -87,10 +87,11 @@ Replaces: endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}"); ``` -Routing is configured using the and middleware. To use controllers: - -* Call inside `UseEndpoints` to map [attribute routed](#ar) controllers. -* Call or , to map [conventionally routed](#cr) controllers. +> [!IMPORTANT] +> Routing is configured using the and middleware. To use controllers: +> +> * Call inside `UseEndpoints` to map [attribute routed](#ar) controllers. +> * Call or , to map [conventionally routed](#cr) controllers. From 052119e9c91528fc2fc20673d607ad792446b6b7 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Fri, 10 Apr 2020 06:35:30 -0500 Subject: [PATCH 5/6] Rendering components in RP/MVC updates (#17571) --- aspnetcore/blazor/integrate-components.md | 15 +++- .../built-in/component-tag-helper.md | 76 ++++++++++++++++++- 2 files changed, 89 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/integrate-components.md b/aspnetcore/blazor/integrate-components.md index 336186f395..3edade0c0b 100644 --- a/aspnetcore/blazor/integrate-components.md +++ b/aspnetcore/blazor/integrate-components.md @@ -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. + 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 | + | ----------- | ----------- | + | | 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. | + | | 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. | + | | Renders the `App` component into static HTML. | + + For more information on the Component Tag Helper, see . + 1. Add a low-priority route for the *_Host.cshtml* page to endpoint configuration in `Startup.Configure`: ```csharp diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md b/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md index 704261e511..a7e3ea21c6 100644 --- a/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md +++ b/aspnetcore/mvc/views/tag-helpers/built-in/component-tag-helper.md @@ -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 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 + +... + ``` +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 + +... + ``` +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 +

MyComponent

+ +

Int: @MyObject.MyInt

+

String: @MyObject.MyString

+ +@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"; +} + + +``` + +The preceding example assumes that the `MyComponent` component is in the app's *Shared* folder. `MyClass` is in the app's namespace (`{APP ASSEMBLY}`). + configures whether the component: * Is prerendered into the page. From 208f824fcd61459ec2c9df885ccacd6075d7cf33 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Fri, 10 Apr 2020 06:45:58 -0500 Subject: [PATCH 6/6] Blazor WASM AAD B2C user flows (#17699) --- .../includes/blazor-security/wasm-aad-b2c-userflows.md | 5 +++++ .../webassembly/hosted-with-azure-active-directory-b2c.md | 5 ++++- .../standalone-with-azure-active-directory-b2c.md | 4 +++- 3 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 aspnetcore/includes/blazor-security/wasm-aad-b2c-userflows.md diff --git a/aspnetcore/includes/blazor-security/wasm-aad-b2c-userflows.md b/aspnetcore/includes/blazor-security/wasm-aad-b2c-userflows.md new file mode 100644 index 0000000000..4ee558fcff --- /dev/null +++ b/aspnetcore/includes/blazor-security/wasm-aad-b2c-userflows.md @@ -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). diff --git a/aspnetcore/security/blazor/webassembly/hosted-with-azure-active-directory-b2c.md b/aspnetcore/security/blazor/webassembly/hosted-with-azure-active-directory-b2c.md index d737cae550..d1f8fd011c 100644 --- a/aspnetcore/security/blazor/webassembly/hosted-with-azure-active-directory-b2c.md +++ b/aspnetcore/security/blazor/webassembly/hosted-with-azure-active-directory-b2c.md @@ -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 + +[!INCLUDE[](~/includes/blazor-security/wasm-aad-b2c-userflows.md)] + [!INCLUDE[](~/includes/blazor-security/troubleshoot.md)] ## Additional resources diff --git a/aspnetcore/security/blazor/webassembly/standalone-with-azure-active-directory-b2c.md b/aspnetcore/security/blazor/webassembly/standalone-with-azure-active-directory-b2c.md index b04a2f761f..ac073cb49c 100644 --- a/aspnetcore/security/blazor/webassembly/standalone-with-azure-active-directory-b2c.md +++ b/aspnetcore/security/blazor/webassembly/standalone-with-azure-active-directory-b2c.md @@ -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