AspNetCore.Docs/aspnetcore/blazor/class-libraries.md

111 lines
4.1 KiB
Markdown
Raw Normal View History

2019-02-02 01:49:02 +08:00
---
title: ASP.NET Core Razor components class libraries
2019-02-02 01:49:02 +08:00
author: guardrex
2019-04-16 04:39:32 +08:00
description: Discover how components can be included in Blazor apps from an external component library.
2019-02-02 01:49:02 +08:00
monikerRange: '>= aspnetcore-3.0'
ms.author: riande
ms.custom: mvc
2019-08-15 07:40:19 +08:00
ms.date: 08/13/2019
2019-04-16 04:39:32 +08:00
uid: blazor/class-libraries
2019-02-02 01:49:02 +08:00
---
# ASP.NET Core Razor components class libraries
2019-02-02 01:49:02 +08:00
By [Simon Timms](https://github.com/stimms)
2019-06-26 09:06:34 +08:00
Components can be shared in a [Razor class library (RCL)](xref:razor-pages/ui-class) across projects. A *Razor components class library* can be included from:
2019-02-02 01:49:02 +08:00
* Another project in the solution.
* A NuGet package.
* A referenced .NET library.
2019-06-26 09:06:34 +08:00
Just as components are regular .NET types, components provided by an RCL are normal .NET assemblies.
2019-02-02 01:49:02 +08:00
2019-06-26 09:06:34 +08:00
## Create an RCL
2019-02-02 01:49:02 +08:00
Follow the guidance in the <xref:blazor/get-started> article to configure your environment for Blazor.
# [Visual Studio](#tab/visual-studio)
1. Create a new project.
2019-08-15 07:40:19 +08:00
1. Select **Razor Class Library**. Select **Next**.
1. In the **Create a new Razor class library** dialog, select **Create**.
1. Provide a project name in the **Project name** field or accept the default project name. The examples in this topic use the project name `MyComponentLib1`. Select **Create**.
2019-06-26 09:06:34 +08:00
1. Add the RCL to a solution:
1. Right-click the solution. Select **Add** > **Existing Project**.
2019-06-26 09:06:34 +08:00
1. Navigate to the RCL's project file.
1. Select the RCL's project file (*.csproj*).
1. Add a reference the RCL from the app:
1. Right-click the app project. Select **Add** > **Reference**.
2019-06-26 09:06:34 +08:00
1. Select the RCL project. Select **OK**.
2019-08-09 00:50:33 +08:00
# [.NET Core CLI](#tab/netcore-cli)
2019-07-03 06:14:03 +08:00
1. Use the **Razor Class Library** template (`razorclasslib`) with the [dotnet new](/dotnet/core/tools/dotnet-new) command in a command shell. In the following example, an RCL is created named `MyComponentLib1`. The folder that holds `MyComponentLib1` is created automatically when the command is executed:
```console
dotnet new razorclasslib -o MyComponentLib1
```
2019-07-03 06:14:03 +08:00
1. To add the library to an existing project, use the [dotnet add reference](/dotnet/core/tools/dotnet-add-reference) command in a command shell. In the following example, the RCL is added to the app. Execute the following command from the app's project folder with the path to the library:
```console
dotnet add reference {PATH TO LIBRARY}
```
---
2019-02-02 01:49:02 +08:00
## Consume a library component
2019-04-19 10:13:57 +08:00
In order to consume components defined in a library in another project, use either of the following approaches:
* Use the full type name with the namespace.
* Use Razor's [\@using](xref:mvc/views/razor#using) directive. Individual components can be added by name.
2019-02-02 01:49:02 +08:00
2019-07-03 06:14:03 +08:00
In the following examples, `MyComponentLib1` is a component library containing a `SalesReport` component.
2019-04-19 10:13:57 +08:00
2019-07-03 06:14:03 +08:00
The `SalesReport` component can be referenced using its full type name with namespace:
2019-04-19 10:13:57 +08:00
```cshtml
<h1>Hello, world!</h1>
Welcome to your new app.
<MyComponentLib1.SalesReport />
2019-02-02 01:49:02 +08:00
```
2019-04-19 10:13:57 +08:00
The component can also be referenced if the library is brought into scope with an `@using` directive:
2019-02-02 01:49:02 +08:00
```cshtml
@using MyComponentLib1
2019-02-02 01:49:02 +08:00
2019-04-19 10:13:57 +08:00
<h1>Hello, world!</h1>
2019-02-02 01:49:02 +08:00
2019-04-19 10:13:57 +08:00
Welcome to your new app.
<SalesReport />
2019-02-02 01:49:02 +08:00
```
Include the `@using MyComponentLib1` directive in the top-level *_Import.razor* file to make the library's components available to an entire project. Add the directive to an *_Import.razor* file at any level to apply the namespace to a single page or set of pages within a folder.
2019-02-02 01:49:02 +08:00
## Build, pack, and ship to NuGet
2019-07-03 06:14:03 +08:00
Because component libraries are standard .NET libraries, packaging and shipping them to NuGet is no different from packaging and shipping any library to NuGet. Packaging is performed using the [dotnet pack](/dotnet/core/tools/dotnet-pack) command in a command shell:
2019-02-02 01:49:02 +08:00
```console
dotnet pack
```
2019-07-03 06:14:03 +08:00
Upload the package to NuGet using the [dotnet nuget publish](/dotnet/core/tools/dotnet-nuget-push) command in a command shell:
2019-02-02 01:49:02 +08:00
```console
dotnet nuget publish
```
2019-06-26 09:06:34 +08:00
## Create a Razor components class library with static assets
2019-06-26 09:06:34 +08:00
An RCL can include static assets. The static assets are available to any app that consumes the library. For more information, see <xref:razor-pages/ui-class#create-an-rcl-with-static-assets>.
2019-06-26 09:06:34 +08:00
## Additional resources
2019-06-26 09:06:34 +08:00
* <xref:razor-pages/ui-class>