Varias aplicaciones Blazor WebAssembly de ASP.NET Core hospedadas
Nota
Esta no es la versión más reciente de este artículo. Para la versión más reciente de este artículo, consulte la versión .NET 7.
En este artículo se explica cómo configurar una aplicación Blazor WebAssembly hospedada para hospedar varias aplicaciones Blazor WebAssembly.
Configuración
Seleccione la versión de este artículo que coincida con los requisitos de hospedaje, ya sea de puertos o dominios (por ejemplo, :5001
/:5002
o firstapp.com
/secondapp.com
) o de subrutas de ruta (por ejemplo, /FirstApp
y /SecondApp
).
Con la selección de hospedaje actual, en este artículo se trata el hospedaje de puertos o dominios (por ejemplo, :5001
/:5002
o firstapp.com
/secondapp.com
).
En los siguientes ejemplos:
- El nombre del proyecto de la aplicación Blazor WebAssembly hospedada es
MultipleBlazorApps
en una carpeta denominadaMultipleBlazorApps
. - Los tres proyectos de la solución antes de agregar una segunda aplicación cliente son
MultipleBlazorApps.Client
en la carpetaClient
,MultipleBlazorApps.Server
en la carpetaServer
yMultipleBlazorApps.Shared
en la carpetaShared
. - La aplicación cliente inicial (primera) es el proyecto de cliente predeterminado de la solución creada a partir de la plantilla de proyecto Blazor WebAssembly.
- Se agrega una segunda aplicación cliente a la solución,
MultipleBlazorApps.SecondClient
en una carpeta llamadaSecondClient
. - Opcionalmente, el proyecto de servidor (
MultipleBlazorApps.Server
) puede servir páginas o vistas como aplicación Razor Pages o MVC. - Se puede acceder a la primera aplicación cliente en un explorador en el puerto 5001 o con un host de
firstapp.com
. Se puede acceder a la segunda aplicación cliente en un explorador en el puerto 5002 o con un host desecondapp.com
.
Con la selección actual, en este artículo se describe el hospedaje de subrutas de ruta (por ejemplo, /FirstApp
y /SecondApp
).
En los siguientes ejemplos:
- El nombre del proyecto de la aplicación Blazor WebAssembly hospedada es
MultipleBlazorApps
en una carpeta denominadaMultipleBlazorApps
. - Los tres proyectos de la solución antes de agregar una segunda aplicación cliente son
MultipleBlazorApps.Client
en la carpetaClient
,MultipleBlazorApps.Server
en la carpetaServer
yMultipleBlazorApps.Shared
en la carpetaShared
. - La aplicación cliente inicial (primera) es el proyecto de cliente predeterminado de la solución creada a partir de la plantilla de proyecto Blazor WebAssembly.
- Se agrega una segunda aplicación cliente a la solución,
MultipleBlazorApps.SecondClient
en una carpeta llamadaSecondClient
. - Opcionalmente, el proyecto de servidor (
MultipleBlazorApps.Server
) puede servir páginas o vistas como una aplicación Razor Pages o MVC formal. - Ambas aplicaciones cliente usan el puerto predeterminado definido por el archivo
MultipleBlazorApps.Server
del proyectoProperties/launchSettings.json
en su valorapplicationUrl
. A la primera aplicación cliente se accede desde el explorador, en la subruta/FirstApp
. A la segunda aplicación cliente se accede desde el explorador, en la subruta/SecondApp
.
Los ejemplos que se muestran en este artículo requieren más configuración para:
- Acceder a las aplicaciones en los dominios host de ejemplo,
firstapp.com
ysecondapp.com
. - Certificados que permitan a las aplicaciones cliente habilitar la seguridad TLS (HTTPS).
- Configuración de las siguientes características en la aplicación de servidor como una aplicación Razor Pages:
- Integración de componentes Razor en páginas o vistas.
- Representación previa de componentes Razor.
Las configuraciones anteriores no se incluyen en el ámbito de este artículo. Para obtener más información, consulte los siguientes recursos:
- Artículos sobre hospedaje e implementación
- Aplicación de HTTPS en ASP.NET Core
- Integración y representación previa de componentes de Razor de ASP.NET Core
Use una solución de Blazor WebAssemblyhospedada o cree una nueva solución hospedada de Blazor WebAssembly desde la plantilla de proyecto Blazor WebAssembly pasando la opción -ho|--hosted
si está usando .NET CLI o seleccionando la casilla ASP.NET Core hospedado en Visual Studio cuando el proyecto se haya creado en el IDE.
Use una carpeta para la solución denominada MultipleBlazorApps
y asigne al proyecto el nombre MultipleBlazorApps
.
Cree una carpeta en la solución denominada SecondClient
. En la nueva carpeta, agregue una segunda aplicación cliente Blazor WebAssembly denominada MultipleBlazorApps.SecondClient
. Agregue el proyecto como una aplicación Blazor WebAssembly independiente. Para crear una aplicación Blazor WebAssembly independiente, no pase la opción -ho|--hosted
si usa la CLI de .NET o no use la casilla ASP.NET Core hospedado si emplea Visual Studio.
Realice los siguientes cambios en el proyecto MultipleBlazorApps.SecondClient
:
- Copie el componente
FetchData
(Pages/FetchData.razor
) de la carpetaClient/Pages
en la carpetaSecondClient/Pages
. Este paso es obligatorio, ya que una aplicación Blazor WebAssemblyindependiente no llama al controlador del proyecto Server para los datos meteorológicos, usa un archivo de datos estático. Al copiar el componenteFetchData
en el proyecto agregado, la segunda aplicación cliente también realiza una llamada API web a la API del servidor para los datos meteorológicos. - Elimine la carpeta
SecondClient/wwwroot/sample-data
, ya que el archivoweather.json
de la carpeta no se usa.
En la tabla siguiente se describen los nombres de las carpetas y los proyectos de la solución una vez agregadas la carpeta SecondClient
y el proyecto MultipleBlazorApps.SecondClient
.
Carpeta física | Nombre de proyecto | Descripción |
---|---|---|
Client |
MultipleBlazorApps.Client |
Aplicación cliente Blazor WebAssembly |
SecondClient |
MultipleBlazorApps.SecondClient |
Aplicación cliente Blazor WebAssembly |
Server |
MultipleBlazorApps.Server |
Aplicación de servidor de ASP.NET Core |
Shared |
MultipleBlazorApps.Shared |
Proyecto de recursos compartidos |
El proyecto MultipleBlazorApps.Server
sirve a las dos aplicaciones cliente Blazor WebAssembly y proporciona datos meteorológicos a los componentes FetchData
de las aplicaciones cliente a través de un controlador MVC. Opcionalmente, el proyecto MultipleBlazorApps.Server
también sirve páginas o vistas, como una aplicación Razor Pages o MVC tradicional. Los pasos para habilitar el servicio de páginas o vistas se indican más adelante en este artículo.
Nota
En la demostración de este artículo se usan los nombres de ruta de acceso de los recursos web estáticos de FirstApp
para el proyecto MultipleBlazorApps.Client
y SecondApp
para el proyecto MultipleBlazorApps.SecondClient
. Los nombres "FirstApp
" y "SecondApp
" son simplemente de demostración. Para distinguir las aplicaciones cliente se aceptan otros nombres, como App1
/App2
, Client1
/Client2
, 1
/2
o cualquier esquema de nomenclatura similar.
Para las aplicaciones cliente, se usan "FirstApp
" y "SecondApp
" internamente para enrutar solicitudes por puertos o dominios y atender las respuestas para los recursos estáticos, además, no se ven en la barra de direcciones del explorador.
Nota
En la demostración de este artículo se usan los nombres de ruta de acceso de los recursos web estáticos de FirstApp
para el proyecto MultipleBlazorApps.Client
y SecondApp
para el proyecto MultipleBlazorApps.SecondClient
. Los nombres "FirstApp
" y "SecondApp
" son simplemente de demostración. Para distinguir las aplicaciones cliente se aceptan otros nombres, como App1
/App2
, Client1
/Client2
, 1
/2
o cualquier esquema de nomenclatura similar.
"FirstApp
" y "SecondApp
" también aparecen en la barra de direcciones del explorador, ya que las solicitudes se enrutan a las dos aplicaciones cliente con estos nombres. Se admiten otros segmentos de ruta URL válidos; los segmentos de ruta no necesitan coincidir estrictamente con los nombres que se usan para enrutar los recursos web estáticos internamente. "FirstApp
" y "SecondApp
" simplemente se usan para el enrutamiento de los recursos estáticos internos y el enrutamiento de solicitudes de aplicación en los ejemplos de este artículo.
En el primer archivo de proyecto de la aplicación cliente (MultipleBlazorApps.Client.csproj
), agregue una propiedad <StaticWebAssetBasePath>
a un objeto <PropertyGroup>
con un valor de FirstApp
para establecer la ruta de acceso base de los recursos estáticos del proyecto:
<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
En el archivo de proyecto de la aplicación MultipleBlazorApps.SecondClient
(MultipleBlazorApps.SecondClient.csproj
):
Agregue una propiedad
<StaticWebAssetBasePath>
a<PropertyGroup>
con un valor deSecondApp
:<StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
Agregue una referencia de proyecto
MultipleBlazorApps.Shared
a un objeto<ItemGroup>
:<ItemGroup> <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" /> </ItemGroup>
En el archivo de proyecto de la aplicación de servidor (Server/MultipleBlazorApps.Server.csproj
), cree una referencia de proyecto para la aplicación cliente MultipleBlazorApps.SecondClient
agregada en un objeto <ItemGroup>
:
<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />
En el archivo Properties/launchSettings.json
de la aplicación de servidor, configure el elemento applicationUrl
del perfil de Kestrel (MultipleBlazorApps.Server
) para acceder a las aplicaciones cliente en los puertos 5001 y 5002. Si configura el entorno local para usar los dominios de ejemplo, las direcciones URL para applicationUrl
pueden usar firstapp.com
y secondapp.com
no los puertos.
Nota
El uso de puertos en esta demostración permite el acceso a los proyectos de cliente en un explorador local sin necesidad de configurar un entorno de hospedaje local para que los exploradores web puedan acceder a las aplicaciones cliente a través de las configuraciones de host, firstapp.com
y secondapp.com
. En escenarios de producción, una configuración habitual consiste en usar subdominios para distinguir las aplicaciones cliente.
Por ejemplo:
- Los puertos se quitan de la configuración de esta demostración.
- Los hosts se cambian para usar subdominios, como
www.contoso.com
para los visitantes del sitio yadmin.contoso.com
para los administradores. - Se pueden incluir hosts adicionales para aplicaciones cliente adicionales y se requiere al menos un host más si la aplicación de servidor también es una aplicación Razor Pages o MVC que sirve páginas o vistas.
Si tiene previsto servir páginas o vistas desde la aplicación de servidor, use el siguiente valor de configuración applicationUrl
en el archivo Properties/launchSettings.json
, que permite el acceso siguiente:
- La aplicación Razor Pages o MVC (proyecto
MultipleBlazorApps.Server
) responde a las solicitudes en el puerto 5000. - Las respuestas a las solicitudes del primer cliente (proyecto
MultipleBlazorApps.Client
) están en el puerto 5001. - Las respuestas a las solicitudes del segundo cliente (proyecto
MultipleBlazorApps.SecondClient
) están en el puerto 5002.
"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",
Si no tiene previsto que la aplicación de servidor sirva páginas o vistas y solo sirva las aplicaciones cliente Blazor WebAssembly, use la siguiente configuración, que permite el acceso siguiente:
- La primera aplicación cliente responde en el puerto 5001.
- La segunda aplicación cliente responde en el puerto 5002.
"applicationUrl": "https://localhost:5001;https://localhost:5002",
En el archivo Program.cs
de la aplicación de servidor, quite el código siguiente que aparece después de la llamada a UseHttpsRedirection:
Si tiene previsto servir páginas o vistas desde la aplicación de servidor, elimine las siguientes líneas de código:
- app.UseBlazorFrameworkFiles();
- app.MapFallbackToFile("index.html");
Si planea que la aplicación de servidor solo sirva las aplicaciones cliente Blazor WebAssembly, elimine el código siguiente:
- app.UseBlazorFrameworkFiles(); ... - app.UseRouting(); - app.MapRazorPages(); - app.MapControllers(); - app.MapFallbackToFile("index.html");
Deje el middleware de archivos estáticos en su lugar:
app.UseStaticFiles();
Agregue middleware que asigna solicitudes a las aplicaciones cliente. En el ejemplo siguiente se configura el middleware que se ejecutará cuando el puerto de solicitud sea 5001 para la primera aplicación cliente o 5002 para la segunda, o el host de solicitud sea
firstapp.com
para la primera aplicación cliente osecondapp.com
, para la segunda.Nota
El uso de los hosts (
firstapp.com
/secondapp.com
) en un sistema local con un explorador local requiere una configuración adicional que está fuera del ámbito de este artículo. Para realizar las pruebas locales de este escenario, se recomienda usar puertos. Las aplicaciones de producción típicas están configuradas para usar subdominios, comowww.contoso.com
para los visitantes del sitio yadmin.contoso.com
para los administradores. Con la configuración correcta de DNS y servidor, que está fuera del ámbito de este artículo y depende de las tecnologías usadas, la aplicación responde a las solicitudes en cualquier host con nombre en el código siguiente.Donde quitó la línea
app.UseBlazorFrameworkFiles();
deProgram.cs
, coloque el código siguiente:app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || ctx.Request.Host.Equals("firstapp.com"), first => { first.Use((ctx, nxt) => { ctx.Request.Path = "/FirstApp" + ctx.Request.Path; return nxt(); }); first.UseBlazorFrameworkFiles("/FirstApp"); first.UseStaticFiles(); first.UseStaticFiles("/FirstApp"); first.UseRouting(); first.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", "FirstApp/index.html"); }); }); app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || ctx.Request.Host.Equals("secondapp.com"), second => { second.Use((ctx, nxt) => { ctx.Request.Path = "/SecondApp" + ctx.Request.Path; return nxt(); }); second.UseBlazorFrameworkFiles("/SecondApp"); second.UseStaticFiles(); second.UseStaticFiles("/SecondApp"); second.UseRouting(); second.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", "SecondApp/index.html"); }); });
Advertencia
Las API que se basan en el encabezado host, como HttpRequest.Host y RequireHost, están sujetas a una posible suplantación de identidad por parte de los clientes.
Para evitar la suplantación de identidad de host y puerto, use uno de los métodos siguientes:
- Use HttpContext.Connection (ConnectionInfo.LocalPort) donde se comprueban los puertos.
- Emplee el filtrado de hosts.
Agregue middleware que asigna solicitudes a las aplicaciones cliente. En el ejemplo siguiente se configura el middleware que se ejecutará cuando la subruta de solicitud sea
/FirstApp
para la primera aplicación cliente o/SecondApp
, para la segunda.Donde quitó la línea
app.UseBlazorFrameworkFiles();
deProgram.cs
, coloque el código siguiente:app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", StringComparison.OrdinalIgnoreCase), first => { first.UseBlazorFrameworkFiles("/FirstApp"); first.UseStaticFiles(); first.UseStaticFiles("/FirstApp"); first.UseRouting(); first.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", "FirstApp/index.html"); }); }); app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", StringComparison.OrdinalIgnoreCase), second => { second.UseBlazorFrameworkFiles("/SecondApp"); second.UseStaticFiles(); second.UseStaticFiles("/SecondApp"); second.UseRouting(); second.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", "SecondApp/index.html"); }); });
Establezca la ruta de acceso base en cada aplicación cliente:
En el primer archivo
index.html
de la aplicación cliente (Client/wwwroot/index.html
), actualice el valor de etiqueta<base>
para que refleje la subruta. Se requiere la barra diagonal:<base href="/FirstApp/" />
En el segundo archivo
index.html
de la aplicación cliente (SecondClient/wwwroot/index.html
), actualice el valor de etiqueta<base>
para reflejar la subruta. Se requiere la barra diagonal:<base href="/SecondApp/" />
Para más información sobre UseStaticFiles, vea Archivos estáticos Blazor en ASP.NET Core.
Para obtener más información sobre UseBlazorFrameworkFiles
y MapFallbackToFile
, consulte los siguientes recursos:
- Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (recurso de referencia)
- Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (recurso de referencia)
Nota
Los vínculos de la documentación al origen de referencia de .NET cargan normalmente la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta de una versión específica, usa la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, vea Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Las solicitudes de las aplicaciones cliente a /WeatherForecast
en la API de servidor son para /FirstApp/WeatherForecast
o /SecondApp/WeatherForecast
en función de la aplicación cliente que realice la solicitud. Por lo tanto, las rutas del controlador que devuelven datos meteorológicos de la API de servidor requieren una modificación para incluir los segmentos de la ruta de acceso.
En el controlador de la previsión meteorológica de la aplicación de servidor (Controllers/WeatherForecastController.cs
), reemplace la ruta existente ([Route("[controller]")]
) a WeatherForecastController
por las siguientes rutas, que tienen en cuenta las rutas de acceso de solicitud de los clientes:
[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]
Si tiene previsto servir páginas desde la aplicación de servidor, agregue una página Index
Razor a la carpeta Pages
de la aplicación de servidor:
Pages/Index.cshtml
:
@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
ViewData["Title"] = "Home";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
</head>
<body>
<div class="main">
<div class="content px-4">
<div>
<h1>Welcome</h1>
<p>Hello from Razor Pages!</p>
</div>
</div>
</div>
</body>
</html>
Pages/Index.cshtml.cs
:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MultipleBlazorApps.Server.Pages;
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MultipleBlazorApps.Server.Pages
{
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
}
Nota
La página Index
anterior es un ejemplo mínimo con fines exclusivos de demostración. Si la aplicación requiere recursos de Razor Pages adicionales, como un diseño, estilos, scripts e importaciones, obténgalos de una aplicación creada a partir de la plantilla de proyecto de Razor Pages. Para más información, consulte Introducción a Razor Pages en ASP.NET Core.
Si tiene previsto servir vistas de MVC desde la aplicación de servidor, agregue una vista Index
y un controlador Home
:
Views/Home/Index.cshtml
:
@{
ViewData["Title"] = "Home";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
</head>
<body>
<div class="main">
<div class="content px-4">
<div>
<h1>Welcome</h1>
<p>Hello from MVC!</p>
</div>
</div>
</div>
</body>
</html>
Controllers/HomeController.cs
:
using Microsoft.AspNetCore.Mvc;
namespace MultipleBlazorApps.Server.Controllers;
public class HomeController : Controller
{
public IActionResult Index() => View();
}
Nota
La vista Index
anterior es un ejemplo mínimo con fines exclusivos de demostración. Si la aplicación requiere recursos de MVC adicionales, como un diseño, estilos, scripts e importaciones, obténgalos de una aplicación creada a partir de la plantilla de proyecto de MVC. Para más información, consulte Introducción a MVC de ASP.NET Core.
Para más información sobre el uso de los componentes Razor de cualquiera de las aplicaciones cliente en páginas o vistas de la aplicación de servidor, consulte Representación previa e integración de componentes Razor de ASP.NET Core.
Ejecución la aplicación
Ejecute el proyecto MultipleBlazorApps.Server
:
- Acceda a la aplicación cliente inicial en
https://localhost:5001
. - Acceda a la aplicación cliente agregada en
https://localhost:5002
. - Si la aplicación de servidor está configurada para servir páginas o vistas, acceda a la página o vista de
Index
enhttps://localhost:5000
.
- Acceda a la aplicación cliente inicial en
https://localhost:{DEFAULT PORT}/FirstApp
. - Acceda a la aplicación cliente agregada en
https://localhost:{DEFAULT PORT}/SecondApp
. - Si la aplicación de servidor está configurada para servir páginas o vistas, acceda a la página o vista de
Index
enhttps://localhost:{DEFAULT PORT}
.
En las direcciones URL del ejemplo anterior, el marcador de posición {DEFAULT PORT}
es el puerto predeterminado definido por el archivo MultipleBlazorApps.Server
del proyecto Properties/launchSettings.json
en su valor applicationUrl
.
Importante
Al ejecutar la aplicación con el comando dotnet watch
(o dotnet run
) (CLI de .NET), confirme que el shell de comandos está abierto en la carpeta Server
de la solución.
Al usar el botón Inicio de Visual Studio para ejecutar la aplicación, confirme que el proyecto MultipleBlazorApps.Server
se haya establecido como proyecto de inicio (resaltado en el Explorador de soluciones).
Recursos estáticos
Cuando un recurso se encuentre en la carpeta wwwroot
de una aplicación cliente, proporcione la ruta de acceso de solicitud de recursos estáticos en los componentes:
<img alt="..." src="{PATH AND FILE NAME}" />
El marcador de posición {PATH AND FILE NAME}
es la ruta de acceso y el nombre de archivo en wwwroot
.
Por ejemplo, el origen de una imagen de Jeep (jeep-yj.png
) en la carpeta vehicle
de wwwroot
:
<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />
Razor Compatibilidad con la biblioteca de clases (RCL)
Agregue la Razor biblioteca de clases (RCL) a la solución como un nuevo proyecto:
- Haga clic con el botón derecho en la solución en el Explorador de soluciones y seleccione Agregar>Nuevo proyecto.
- Use la plantilla de proyecto de Biblioteca de clases Razor para crear el proyecto. En los ejemplos de esta sección se usa el nombre de proyecto
ComponentLibrary
, que también es el nombre del ensamblado de RCL. No selecciones la casilla Páginas de soporte técnico y vistas.
Para cada aplicación cliente Blazor WebAssembly hospedada, cree una referencia de proyecto para el proyecto de RCL haciendo clic con el botón derecho en cada proyecto cliente en el Explorador de soluciones y seleccionando Agregar>Referencia de proyecto.
Use componentes de la RCL en las aplicaciones cliente con cualquiera de los métodos siguientes:
Coloque una directiva
@using
en la parte superior del componente en el espacio de nombres de la RCL y agregue la sintaxis de Razor del componente. El ejemplo siguiente es para una RCL con el nombre de ensambladoComponentLibrary
:@using ComponentLibrary ... <Component1 />
Proporcione el espacio de nombres de la RCL junto con la sintaxis de Razor del componente. Este método no requiere una directiva
@using
en la parte superior del archivo de componente. El ejemplo siguiente es para una RCL con el nombre de ensambladoComponentLibrary
:<ComponentLibrary.Component1 />
Nota
También se puede colocar una directiva @using
en el archivo _Import.razor
de cada aplicación cliente, lo que hace que el espacio de nombres de la RCL esté disponible globalmente para los componentes de ese proyecto.
Cuando hay otro recurso estático en la carpeta wwwroot
de una RCL, haga referencia a él en una aplicación cliente según la guía de Interfaz de usuario de Razor reutilizable en bibliotecas de clases con ASP.NET Core:
<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />
El marcador de posición {PACKAGE ID}
es el identificador de paquete de la RCL. 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 ejemplo siguiente se muestra el marcado de una imagen de Jeep (jeep-yj.png
) en la carpeta vehicle
de wwwroot
de la carpeta RCL. El ejemplo siguiente es para una RCL con el nombre de ensamblado ComponentLibrary
:
<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />