diff --git a/aspnetcore/blazor/components.md b/aspnetcore/blazor/components.md index 911884e393..6442bda064 100644 --- a/aspnetcore/blazor/components.md +++ b/aspnetcore/blazor/components.md @@ -5,7 +5,7 @@ description: Learn how to create and use Razor Components, including how to bind monikerRange: '>= aspnetcore-3.0' ms.author: riande ms.custom: mvc -ms.date: 04/15/2019 +ms.date: 04/17/2019 uid: blazor/components --- # Create and use Razor Components @@ -521,6 +521,40 @@ The [sample app](https://github.com/aspnet/Docs/tree/master/aspnetcore/blazor/co The base class should derive from `ComponentBase`. +## Import components + +The namespace of a component authored with Razor is based on: + +* The project's `RootNamespace`. +* The path from the project root to the component. For example, `ComponentsSample/Pages/Index.razor` is in the namespace `ComponentsSample.Pages`. Components follow C# name binding rules. In the case of *Index.razor*, all components in the same folder, *Pages*, and the parent folder, *ComponentsSample*, are in scope. + +Components defined in a different namespace can be brought into scope using Razor's [\@using](xref:mvc/views/razor#using) directive. + +If another component, `NavMenu.razor`, exists in the folder `ComponentsSample/Shared/`, the component can be used in `Index.razor` with the following `@using` statement: + +```cshtml +@using ComponentsSample.Shared + +This is the Index page. + + +``` + +Components can also be referenced using their fully qualified names, which removes the need for the [\@using](xref:mvc/views/razor#using) directive: + +```cshtml +This is the Index page. + + +``` + +> [!NOTE] +> The `global::` qualification isn't supported. +> +> Importing components with aliased `using` statements (for example, `@using Foo = Bar`) isn't supported. +> +> Partially qualified names aren't supported. For example, adding `@using ComponentsSample` and referencing `NavMenu.razor` with `` isn't supported. + ## Razor support **Razor directives** @@ -535,8 +569,7 @@ Razor directives are shown in the following table. | [\@inject](xref:mvc/views/razor#section-4) | Enables service injection from the [service container](xref:fundamentals/dependency-injection). For more information, see [Dependency injection into views](xref:mvc/views/dependency-injection). | | `@layout` | Specifies a layout component. Layout components are used to avoid code duplication and inconsistency. | | [\@page](xref:razor-pages/index#razor-pages) | Specifies that the component should handle requests directly. The `@page` directive can be specified with a route and optional parameters. Unlike Razor Pages, the `@page` directive doesn't need to be the first directive at the top of the file. For more information, see [Routing](xref:blazor/routing). | -| [\@using](xref:mvc/views/razor#using) | Adds the C# `using` directive to the generated component class. | -| [\@addTagHelper](xref:mvc/views/razor#tag-helpers) | Use `@addTagHelper` to use a component in a different assembly than the app's assembly. | +| [\@using](xref:mvc/views/razor#using) | Adds the C# `using` directive to the generated component class. This also brings all the components defined in that namespace into scope. | **Conditional attributes**