Consumo de componentes Razor de ASP.NET Core de bibliotecas de clases Razor

Los componentes se pueden compartir entre proyectos en una biblioteca de clases de Razor (RCL). Incluya componentes y recursos estáticos en una aplicación de:

• Otro proyecto de la solución.
• Una biblioteca de .NET a la que se hace referencia.
• Un paquete NuGet.

Del mismo modo que los componentes son tipos normales de .NET, los componentes proporcionados por una RCL son ensamblados .NET normales.

Creación de una RCL

Consumo de un componente Razor de una RCL

Para consumir los componentes de una RCL de otro proyecto, use cualquiera de los métodos siguientes:

• Use el nombre completo del tipo de componente, que incluye el espacio de nombres de la RCL.
• Los componentes individuales se pueden agregar por nombre sin el espacio de nombres de la RCL si la directiva @using de Razor declara el espacio de nombres de la RCL. Siga uno de estos procedimientos:
  • Agregue la directiva @using a los componentes individuales.
  • Incluya la directiva @using en el archivo de nivel superior _Imports.razor a fin de que los componentes de la biblioteca estén disponibles para un proyecto completo. Agregue la directiva a un archivo _Imports.razor en cualquier nivel para aplicar el espacio de nombres a un solo componente o a un conjunto de componentes dentro de una carpeta. Cuando se usa un archivo _Imports.razor, los componentes individuales no requieren una directiva @using para el espacio de nombres de la RCL.

En los ejemplos siguientes, ComponentLibrary es una RCL que contiene el componente Component1. El componente Component1 es un componente de ejemplo que se agrega automáticamente a una RCL creada a partir de la plantilla de proyecto de RCL que no se crea para admitir páginas y vistas.

Component1.razor en la RCL ComponentLibrary:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

En la aplicación que consume la RCL, haga referencia al componente Component1 mediante su espacio de nombres, como se muestra en el ejemplo siguiente.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

También puede agregar una directiva @using y usar el componente sin su espacio de nombres. La siguiente directiva @using también puede aparecer en cualquier archivo _Imports.razor en el archivo actual o situado por encima del mismo.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

En el caso de los componentes de biblioteca que usan el aislamiento de CSS, los estilos de componente se ponen automáticamente a disposición de la aplicación de consumo. No es necesario vincular las hojas de estilo de cada componente de la biblioteca en la aplicación que la usa. En los ejemplos anteriores, la hoja de estilos de Component1 (Component1.razor.css) se incluye automáticamente.

Component1.razor.css en la RCL ComponentLibrary:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

La imagen de fondo también se incluye desde la plantilla de proyecto de RCL y reside en la carpeta wwwroot de la RCL.

wwwroot/background.png en la RCL ComponentLibrary:

Para proporcionar estilos de componentes de biblioteca adicionales desde las hojas de estilo de la carpeta wwwroot de la biblioteca, vincule las hojas de estilo mediante el componente Link del marco.

La siguiente imagen de fondo se usa en el ejemplo siguiente. Si implementa el ejemplo que se muestra en esta sección, haga clic con el botón derecho en la imagen para guardarla localmente.

wwwroot/extra-background.png en la RCL ComponentLibrary:

Agregue una nueva hoja de estilos a la RCL con una clase extra-style.

wwwroot/additionalStyles.css en la RCL ComponentLibrary:

.extra-style {
    border: 2px dashed blue;
    padding: 1em;
    margin: 1em 0;
    background-image: url('extra-background.png');
}

Agregue un componente a la RCL que use la clase extra-style.

ExtraStyles.razor en la RCL ComponentLibrary:

<Link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />

<div class="extra-style">
    <p>
        This component is defined in the <strong>ComponentLibrary</strong> package.
    </p>
</div>

Agregue una página a la aplicación que use el componente ExtraStyles de la RCL.

Pages/ConsumeComponent3.razor:

@page "/consume-component-3"
@using ComponentLibrary

<h1>Consume component (<code>additionalStyles.css</code> example)</h1>

<ExtraStyles />

Cuando se usa el componente Link en un componente secundario, el recurso vinculado también está disponible para cualquier otro componente secundario del componente primario si se representa el elemento secundario con el componente Link.

Una alternativa al uso del componente Link es crear un vínculo a la hoja de estilos de la biblioteca en el marcado <head> de la aplicación.

Archivo wwwroot/index.html (Blazor WebAssembly) o archivo Pages/_Layout.cshtml (Blazor Server):

+ <link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />

La distinción entre el uso del componente Link en un componente secundario y la colocación de una etiqueta HTML <link> en wwwroot/index.html o Pages/_Host.cshtml es que la etiqueta HTML representada de un componente del marco de trabajo:

• Se puede modificar según el estado de la aplicación. No se puede modificar una etiqueta HTML <link> codificada de forma rígida según el estado de la aplicación.
• Se quita del elemento HTML <head> cuando ya no se representa el componente primario.

Creación de una RCL con recursos estáticos en la carpeta wwwroot

Los recursos estáticos de una RCL están disponibles para cualquier aplicación que use la biblioteca.

Coloque los recursos estáticos en la carpeta wwwroot de la RCL y haga referencia a estos con la siguiente ruta de acceso en la aplicación: _content/{PACKAGE ID}/{PATH AND FILE NAME}. El marcador de posición {PACKAGE ID} es el id. de paquete de la biblioteca. El id. de paquete tiene como valor predeterminado el nombre de ensamblado del proyecto si <PackageId> no se especifica en el archivo del proyecto. El marcador de posición {PATH AND FILE NAME} es la ruta de acceso y el nombre de archivo en wwwroot.

En el siguiente ejemplo se muestra el uso de recursos estáticos de RCL con una RCL llamada ComponentLibrary y una aplicación Blazor que use la RCL. La aplicación tiene una referencia de proyecto para la RCL ComponentLibrary.

La siguiente imagen de Jeep® se usa en el ejemplo de esta sección. Si implementa el ejemplo que se muestra en esta sección, haga clic con el botón derecho en la imagen para guardarla localmente.

wwwroot/jeep-yj.png en la RCL ComponentLibrary:

Agregue el siguiente componente JeepYJ a la RCL.

JeepYJ.razor en la RCL ComponentLibrary:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Agregue el siguiente componente Jeep a la aplicación que use la RCL ComponentLibrary. El componente Jeep usa:

• La imagen de Jeep YJ® de la carpeta wwwroot de la RCL ComponentLibrary.
• El componente JeepYJ de la RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Componente Jeep representado:

Para obtener más información, vea Interfaz de usuario reutilizable de Razor en bibliotecas de clases con ASP.NET Core.

Creación de una RCL con archivos JavaScript colocados con componentes

La colocación de archivos de JavaScript (JS) para páginas, vistas y componentes Razor es una manera cómoda de organizar los scripts en una aplicación.

Coloque los archivos de JS mediante las siguientes convenciones de extensión de nombre de archivo:

• Páginas de aplicaciones Razor Pages y vistas de aplicaciones MVC: .cshtml.js. Ejemplos:
  • Pages/Contact.cshtml.js para la página Contact de una aplicación Razor Pages en Pages/Contact.cshtml.
  • Views/Home/Contact.cshtml.js para la vista Contact de una aplicación MVC en Views/Home/Contact.cshtml.
• Componentes Razor de aplicaciones Blazor: .razor.js. Ejemplo: Pages/Index.razor.js para el componente Index en Pages/Index.razor.

Los archivos de JS colocados son accesibles de forma pública mediante la ruta al archivo del proyecto:

• Páginas, vistas y componentes de un archivo de scripts colocados en la aplicación:

  {PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

  • El marcador de posición {PATH} es la ruta a la página, vista o componente.
  • El marcador de posición {PAGE, VIEW, OR COMPONENT} es la página, vista o componente.
  • El marcador de posición {EXTENSION} coincide con la extensión de la página, vista o componente, ya sea razor o cshtml, seguido de .js.

  En el ejemplo siguiente de una aplicación Razor Pages, el script se coloca en la carpeta Pages con la página Contact (Pages/Contact.cshtml):

  @section Scripts {
    <script src="~/Pages/Contact.cshtml.js"></script>
  }
  

• Para los scripts proporcionados por una biblioteca de clases de Razor (RCL):

  _content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

  • El marcador de posición {PACKAGE ID} es el identificador de paquete de la RCL (o el nombre de la biblioteca para una biblioteca de clases a la que hace referencia la aplicación).
  • El marcador de posición {PATH} es la ruta a la página, vista o componente. Si un componente Razor se encuentra en la raíz de la RCL, no se incluye el segmento de ruta.
  • El marcador de posición {PAGE, VIEW, OR COMPONENT} es la página, vista o componente.
  • El marcador de posición {EXTENSION} coincide con la extensión de la página, vista o componente, ya sea razor o cshtml, seguido de .js.

  En el ejemplo siguiente de aplicación Blazor:

  • El identificador de paquete de la RCL es AppJS.
  • Los scripts de un módulo se cargan para el componente Index (Index.razor).
  • El componente Index está en la carpeta Pages de la RCL.

  var module = await JS.InvokeAsync<IJSObjectReference>("import", 
      "_content/AppJS/Pages/Index.razor.js");
  

Proporcionar componentes y recursos estáticos a varias aplicaciones de Blazor hospedadas

Para obtener más información, vea Hospedaje e implementación de ASP.NET Core Blazor WebAssembly.

Analizador de compatibilidad con el explorador de Blazor WebAssembly

Las aplicaciones Blazor WebAssembly tienen como destino el área expuesta de la API de .NET completa, pero no todas las API de .NET son compatibles con WebAssembly, debido a las restricciones de espacio aislado del explorador. Las API no compatibles inician la excepción PlatformNotSupportedException cuando se ejecutan en WebAssembly. Un analizador de compatibilidad de plataforma advierte al desarrollador cuando la aplicación usa API que no son compatibles con las plataformas de destino de la aplicación. En el caso de las aplicaciones Blazor WebAssembly, esto significa comprobar que las API se admiten en los exploradores. La anotación de API de .NET Framework para el analizador de compatibilidad es un proceso constante, por lo que no todas las API de .NET Framework están anotadas actualmente.

Los proyectos de RCL y Blazor WebAssembly habilitan automáticamente las comprobaciones de compatibilidad del explorador agregando browser como plataforma compatible con el elemento SupportedPlatform de MSBuild. Los desarrolladores de bibliotecas pueden agregar manualmente el elemento SupportedPlatform al archivo de proyecto de una biblioteca para habilitar la característica:

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

Al crear una biblioteca, especifique browser en UnsupportedOSPlatformAttribute para indicar que los exploradores no admiten una API determinada:

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

Para más información, vea Anotación de API como no compatibles en plataformas específicas (repositorio de GitHub dotnet/designs).

Aislamiento de JavaScript en módulos de JavaScript

Blazor permite el aislamiento de JavaScript en módulos de JavaScript estándar. El aislamiento de JavaScript reporta las siguientes ventajas:

• El código JavaScript importado no contamina el espacio de nombres global.
• No es necesario que los consumidores de la biblioteca y los componentes importen manualmente el código JavaScript relacionado.

Para obtener más información, vea Llamada a funciones de JavaScript con métodos de .NET en Blazor de ASP.NET Core.

Compilación, empaquetado y envío de bibliotecas a NuGet

Dado que las bibliotecas de clases Razor que contienen componentes Razor son bibliotecas estándar de .NET, se empaquetan y se envían a NuGet de la misma manera que cualquier otra biblioteca. El empaquetado se realiza mediante el comando dotnet pack en un shell de comandos:

dotnet pack

Cargue el paquete en NuGet usando el comando dotnet nuget push en un shell de comandos.

Marcas comerciales

Jeep y Jeep YJ son marcas registradas de FCA US LLC (Stellantis NV).

Recursos adicionales

• Interfaz de usuario reutilizable de Razor en bibliotecas de clases con ASP.NET Core
• Adición de un archivo de configuración del recortador de lenguaje intermedio (IL) XML a una biblioteca
• Compatibilidad de aislamiento de CSS con bibliotecas de clases Razor

Los componentes se pueden compartir entre proyectos en una biblioteca de clases de Razor (RCL). Incluya componentes y recursos estáticos en una aplicación de:

• Otro proyecto de la solución.
• Una biblioteca de .NET a la que se hace referencia.
• Un paquete NuGet.

Del mismo modo que los componentes son tipos normales de .NET, los componentes proporcionados por una RCL son ensamblados .NET normales.

Creación de una RCL

@using Microsoft.AspNetCore.Components.Web

Consumo de un componente Razor de una RCL

Para consumir los componentes de una RCL de otro proyecto, use cualquiera de los métodos siguientes:

• Use el nombre completo del tipo de componente, que incluye el espacio de nombres de la RCL.
• Los componentes individuales se pueden agregar por nombre sin el espacio de nombres de la RCL si la directiva @using de Razor declara el espacio de nombres de la RCL. Siga uno de estos procedimientos:
  • Agregue la directiva @using a los componentes individuales.
  • Incluya la directiva @using en el archivo de nivel superior _Imports.razor a fin de que los componentes de la biblioteca estén disponibles para un proyecto completo. Agregue la directiva a un archivo _Imports.razor en cualquier nivel para aplicar el espacio de nombres a un solo componente o a un conjunto de componentes dentro de una carpeta. Cuando se usa un archivo _Imports.razor, los componentes individuales no requieren una directiva @using para el espacio de nombres de la RCL.

En los ejemplos siguientes, ComponentLibrary es una RCL que contiene el componente Component1. El componente Component1 es un componente de ejemplo que se agrega automáticamente a una RCL creada a partir de la plantilla de proyecto de RCL que no se crea para admitir páginas y vistas.

Component1.razor en la RCL ComponentLibrary:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

En la aplicación que consume la RCL, haga referencia al componente Component1 mediante su espacio de nombres, como se muestra en el ejemplo siguiente.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

También puede agregar una directiva @using y usar el componente sin su espacio de nombres. La siguiente directiva @using también puede aparecer en cualquier archivo _Imports.razor en el archivo actual o situado por encima del mismo.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

En el caso de los componentes de biblioteca que usan el aislamiento de CSS, los estilos de componente se ponen automáticamente a disposición de la aplicación de consumo. No es necesario vincular las hojas de estilo de cada componente de la biblioteca en la aplicación que la usa. En los ejemplos anteriores, la hoja de estilos de Component1 (Component1.razor.css) se incluye automáticamente.

Component1.razor.css en la RCL ComponentLibrary:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

La imagen de fondo también se incluye desde la plantilla de proyecto de RCL y reside en la carpeta wwwroot de la RCL.

wwwroot/background.png en la RCL ComponentLibrary:

Creación de una RCL con recursos estáticos

Los recursos estáticos de una RCL están disponibles para cualquier aplicación que use la biblioteca.

Coloque los recursos estáticos en la carpeta wwwroot de la RCL y haga referencia a estos con la siguiente ruta de acceso en la aplicación: _content/{PACKAGE ID}/{PATH AND FILE NAME}. El marcador de posición {PACKAGE ID} es el id. de paquete de la biblioteca. El id. de paquete tiene como valor predeterminado el nombre de ensamblado del proyecto si <PackageId> no se especifica en el archivo del proyecto. El marcador de posición {PATH AND FILE NAME} es la ruta de acceso y el nombre de archivo en wwwroot.

En el siguiente ejemplo se muestra el uso de recursos estáticos de RCL con una RCL llamada ComponentLibrary y una aplicación Blazor que use la RCL. La aplicación tiene una referencia de proyecto para la RCL ComponentLibrary.

La siguiente imagen de Jeep® se usa en el ejemplo de esta sección. Si implementa el ejemplo que se muestra en esta sección, haga clic con el botón derecho en la imagen para guardarla localmente.

wwwroot/jeep-yj.png en la RCL ComponentLibrary:

Agregue el siguiente componente JeepYJ a la RCL.

JeepYJ.razor en la RCL ComponentLibrary:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Agregue el siguiente componente Jeep a la aplicación que use la RCL ComponentLibrary. El componente Jeep usa:

• La imagen de Jeep YJ® de la carpeta wwwroot de la RCL ComponentLibrary.
• El componente JeepYJ de la RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Componente Jeep representado:

Para obtener más información, vea Interfaz de usuario reutilizable de Razor en bibliotecas de clases con ASP.NET Core.

<a name="supply-components-and-static-assets-to-multiple-hosted-blazor-apps">Proporcionar componentes y recursos estáticos a varias aplicaciones de Blazor hospedadas

Para obtener más información, vea Hospedaje e implementación de ASP.NET Core Blazor WebAssembly.

Analizador de compatibilidad con el explorador de Blazor WebAssembly

Las aplicaciones Blazor WebAssembly tienen como destino el área expuesta de la API de .NET completa, pero no todas las API de .NET son compatibles con WebAssembly, debido a las restricciones de espacio aislado del explorador. Las API no compatibles inician la excepción PlatformNotSupportedException cuando se ejecutan en WebAssembly. Un analizador de compatibilidad de plataforma advierte al desarrollador cuando la aplicación usa API que no son compatibles con las plataformas de destino de la aplicación. En el caso de las aplicaciones Blazor WebAssembly, esto significa comprobar que las API se admiten en los exploradores. La anotación de API de .NET Framework para el analizador de compatibilidad es un proceso constante, por lo que no todas las API de .NET Framework están anotadas actualmente.

Los proyectos de RCL y Blazor WebAssembly habilitan automáticamente las comprobaciones de compatibilidad del explorador agregando browser como plataforma compatible con el elemento SupportedPlatform de MSBuild. Los desarrolladores de bibliotecas pueden agregar manualmente el elemento SupportedPlatform al archivo de proyecto de una biblioteca para habilitar la característica:

<ItemGroup>
  <SupportedPlatform Include=&quot;browser&quot; />
</ItemGroup>

Al crear una biblioteca, especifique browser en UnsupportedOSPlatformAttribute para indicar que los exploradores no admiten una API determinada:

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

Para más información, vea Anotación de API como no compatibles en plataformas específicas (repositorio de GitHub dotnet/designs).

Aislamiento de JavaScript en módulos de JavaScript

Blazor permite el aislamiento de JavaScript en módulos de JavaScript estándar. El aislamiento de JavaScript reporta las siguientes ventajas:

• El código JavaScript importado no contamina el espacio de nombres global.
• No es necesario que los consumidores de la biblioteca y los componentes importen manualmente el código JavaScript relacionado.

Para obtener más información, vea Llamada a funciones de JavaScript con métodos de .NET en Blazor de ASP.NET Core.

Compilación, empaquetado y envío de bibliotecas a NuGet

Dado que las bibliotecas de clases Razor que contienen componentes Razor son bibliotecas estándar de .NET, se empaquetan y se envían a NuGet de la misma manera que cualquier otra biblioteca. El empaquetado se realiza mediante el comando dotnet pack en un shell de comandos:

dotnet pack

Cargue el paquete en NuGet usando el comando dotnet nuget push en un shell de comandos.

Marcas comerciales

Jeep y Jeep YJ son marcas registradas de FCA US LLC (Stellantis NV).

Recursos adicionales

• Interfaz de usuario reutilizable de Razor en bibliotecas de clases con ASP.NET Core
• Adición de un archivo de configuración del recortador de lenguaje intermedio (IL) XML a una biblioteca
• Compatibilidad de aislamiento de CSS con bibliotecas de clases Razor

Los componentes se pueden compartir entre proyectos en una biblioteca de clases de Razor (RCL). Incluya componentes y recursos estáticos en una aplicación de:

• Otro proyecto de la solución.
• Una biblioteca de .NET a la que se hace referencia.
• Un paquete NuGet.

Del mismo modo que los componentes son tipos normales de .NET, los componentes proporcionados por una RCL son ensamblados .NET normales.

Creación de una RCL

@using Microsoft.AspNetCore.Components.Web

@using Microsoft.AspNetCore.Components.Web

@using Microsoft.AspNetCore.Components.Web

Consumo de un componente Razor de una RCL

Para consumir los componentes de una RCL de otro proyecto, use cualquiera de los métodos siguientes:

• Use el nombre completo del tipo de componente, que incluye el espacio de nombres de la RCL.
• Los componentes individuales se pueden agregar por nombre sin el espacio de nombres de la RCL si la directiva @using de Razor declara el espacio de nombres de la RCL. Siga uno de estos procedimientos:
  • Agregue la directiva @using a los componentes individuales.
  • Incluya la directiva @using en el archivo de nivel superior _Imports.razor a fin de que los componentes de la biblioteca estén disponibles para un proyecto completo. Agregue la directiva a un archivo _Imports.razor en cualquier nivel para aplicar el espacio de nombres a un solo componente o a un conjunto de componentes dentro de una carpeta. Cuando se usa un archivo _Imports.razor, los componentes individuales no requieren una directiva @using para el espacio de nombres de la RCL.

En los ejemplos siguientes, ComponentLibrary es una RCL que contiene el componente Component1. El componente Component1 es un componente de ejemplo que se agrega automáticamente a una RCL creada a partir de la plantilla de proyecto de RCL que no se crea para admitir páginas y vistas.

Component1.razor en la RCL ComponentLibrary:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

En la aplicación que consume la RCL, haga referencia al componente Component1 mediante su espacio de nombres, como se muestra en el ejemplo siguiente.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

También puede agregar una directiva @using y usar el componente sin su espacio de nombres. La siguiente directiva @using también puede aparecer en cualquier archivo _Imports.razor en el archivo actual o situado por encima del mismo.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

El componente de ejemplo Component1 de la RCL usa la imagen de fondo y la hoja de estilos siguientes. No es necesario agregar estos recursos estáticos a una nueva RCL creada a partir de la plantilla de proyecto de RCL, ya que la plantilla de proyecto los agrega automáticamente.

wwwroot/background.png en la RCL ComponentLibrary:

wwwroot/styles.css en la RCL ComponentLibrary:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Para proporcionar la clase CSS my-component de Component1, cree un vínculo a la hoja de estilos de la biblioteca en el marcado <head> de la aplicación.

Archivo wwwroot/index.html (Blazor WebAssembly) o archivo Pages/_Host.cshtml (Blazor Server):

+ <link href="_content/ComponentLibrary/styles.css" rel="stylesheet" />

Creación de una RCL con recursos estáticos

Los recursos estáticos de una RCL están disponibles para cualquier aplicación que use la biblioteca.

Coloque los recursos estáticos en la carpeta wwwroot de la RCL y haga referencia a estos con la siguiente ruta de acceso en la aplicación: _content/{PACKAGE ID}/{PATH AND FILE NAME}. El marcador de posición {PACKAGE ID} es el id. de paquete de la biblioteca. El id. de paquete tiene como valor predeterminado el nombre de ensamblado del proyecto si <PackageId> no se especifica en el archivo del proyecto. El marcador de posición {PATH AND FILE NAME} es la ruta de acceso y el nombre de archivo en wwwroot.

En el siguiente ejemplo se muestra el uso de recursos estáticos de RCL con una RCL llamada ComponentLibrary y una aplicación Blazor que use la RCL. La aplicación tiene una referencia de proyecto para la RCL ComponentLibrary.

La siguiente imagen de Jeep® se usa en el ejemplo de esta sección. Si implementa el ejemplo que se muestra en esta sección, haga clic con el botón derecho en la imagen para guardarla localmente.

wwwroot/jeep-yj.png en la RCL ComponentLibrary:

Agregue el siguiente componente JeepYJ a la RCL.

JeepYJ.razor en la RCL ComponentLibrary:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Agregue el siguiente componente Jeep a la aplicación que use la RCL ComponentLibrary. El componente Jeep usa:

• La imagen de Jeep YJ® de la carpeta wwwroot de la RCL ComponentLibrary.
• El componente JeepYJ de la RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Componente Jeep representado:

Para obtener más información, vea Interfaz de usuario reutilizable de Razor en bibliotecas de clases con ASP.NET Core.

Proporcionar componentes y recursos estáticos a varias aplicaciones de Blazor hospedadas

Para obtener más información, vea Hospedaje e implementación de ASP.NET Core Blazor WebAssembly.

Compilación, empaquetado y envío de bibliotecas a NuGet

Dado que las bibliotecas de clases Razor que contienen componentes Razor son bibliotecas estándar de .NET, se empaquetan y se envían a NuGet de la misma manera que cualquier otra biblioteca. El empaquetado se realiza mediante el comando dotnet pack en un shell de comandos:

dotnet pack

Cargue el paquete en NuGet usando el comando dotnet nuget push en un shell de comandos.

Marcas comerciales

Jeep y Jeep YJ son marcas registradas de FCA US LLC (Stellantis NV).

Recursos adicionales

• Interfaz de usuario reutilizable de Razor en bibliotecas de clases con ASP.NET Core
• Agregar un archivo de configuración del enlazador de lenguaje intermedio (IL) XML a una biblioteca