Compartir a través de

Estructura del proyecto de Blazor de ASP.NET Core

  • Artículo

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la directiva de compatibilidad de .NET y .NET Core. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión de .NET 9 de este artículo.

En este artículo se describen los archivos y las carpetas que componen una aplicación Blazor generada a partir de una plantilla de proyecto Blazor.

Blazor Web App

Plantilla de proyecto de Blazor Web App: blazor

La plantilla de proyecto de Blazor Web App proporciona un único punto de partida para usar componentes Razor (.razor) para compilar cualquier estilo de interfaz de usuario web, tanto en el lado servidor representado como en el lado cliente. Combina los puntos fuertes de los modelos de hospedaje existentes Blazor Server y Blazor WebAssembly con la representación del lado servidor, la representación de transmisiones, la navegación mejorada y el control de formularios, y la capacidad de agregar interactividad mediante Blazor Server o Blazor WebAssembly por componente.

Si se selecciona tanto la representación del lado cliente (CSR) como la representación interactiva del lado servidor (SSR interactiva) en la creación de la aplicación, la plantilla de proyecto usará el modo de representación automática interactiva. El modo de representación automática interactiva utiliza inicialmente la SSR interactiva, mientras el lote de aplicaciones .NET y el runtime se descargan en el explorador. Una vez activado el runtime de WebAssembly de .NET, la representación cambia a CSR.

La plantilla de Blazor Web App habilita la representación interactiva y estática del lado servidor con un solo proyecto. Si también habilita la representación interactiva de WebAssembly, el proyecto incluye un proyecto de cliente adicional (.Client) para los componentes basados en WebAssembly. La salida compilada del proyecto de cliente se descarga en el explorador y se ejecuta en el cliente. Los componentes que usen los modos interactivos de representación automática o WebAssembly deben encontrarse en el proyecto .Client.

La estructura de carpetas de componentes del proyecto .Client difiere de la estructura principal de carpetas del proyecto de Blazor Web App porque el proyecto principal es un proyecto estándar ASP.NET Core. El proyecto principal debe tener en cuenta otros recursos para proyectos ASP.NET Core que no están relacionados con Blazor. Puedes usar la estructura de carpetas de componentes que desees en el proyecto .Client. Si lo deseas, refleje el diseño de la carpeta de componentes del proyecto principal en el proyecto .Client. Ten en cuenta que los espacios de nombres podrían requerir ajustes para tales recursos como los archivos de diseño al mover componentes a carpetas diferentes de las que se usen en la plantilla de proyecto.

Encontrarás más información sobre los componentes y los modos de representación en los artículos Componentes Razor ASP.NET Core y Modos de representación Blazor ASP.NET Core.

En función del modo de representación interactivo seleccionado en la creación de la aplicación, la carpeta Layout se encuentra en el proyecto de servidor de la carpeta Components o en la raíz del proyecto .Client. La carpeta contiene los siguientes componentes de diseño y hojas de estilo:

  • El componente MainLayout (MainLayout.razor) es el componente de diseño de la aplicación.
  • MainLayout.razor.css es la hoja de estilos del diseño principal de la aplicación.
  • El componente NavMenu (NavMenu.razor) implementa la navegación de barra lateral. El componente incluye componentes NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica al usuario cuál es el componente que se está mostrando actualmente.
  • NavMenu.razor.css es la hoja de estilos del menú de navegación de la aplicación.

El componente Routes (Routes.razor) está en el proyecto de servidor o en el proyecto .Client, y configura el enrutamiento mediante el componente Router. En el caso de los componentes interactivos del lado cliente, el componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

La carpeta Components del proyecto de servidor contiene los componentes Razor del lado del servidor de la aplicación. Los componentes compartidos a menudo se colocan en la raíz de la carpeta Components, mientras que los componentes de diseño y página normalmente se colocan en carpetas dentro de la carpeta Components.

La carpeta Components/Pages del proyecto de servidor contiene los componentes Razor enrutables del lado servidor de la aplicación. La ruta de cada página se especifica usando la directiva @page.

El componente App (App.razor) es el componente raíz de la aplicación con marcado HTML <head>, el componente Routes y la etiqueta Blazor<script>. El componente raíz es el primer componente que carga la aplicación.

Un archivo _Imports.razor de cada uno de los servidores y proyectos .Client incluye directivas comunes Razor para componentes Razor de cualquiera de los proyectos, como directivas @using para espacios de nombres.

La carpeta Properties del proyecto de servidor contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

Nota:

El perfil http precede al perfil https en el archivo launchSettings.json. Cuando se ejecuta una aplicación con la CLI de .NET, la aplicación se ejecuta en un punto de conexión HTTP porque el primer perfil encontrado es http. El orden de perfil facilita la transición de la adopción de HTTPS para usuarios de Linux y macOS. Si prefieres iniciar la aplicación con la CLI de .NET sin tener que pasar la opción -lp https o --launch-profile https al comando dotnet watch (o dotnet run), simplemente coloque el perfil https encima del perfil http en el archivo.

La carpeta wwwroot del proyecto de servidor es la carpeta raíz web del proyecto de servidor que contiene los recursos estáticos públicos de la aplicación.

El archivo Program.cs del proyecto de servidor es el punto de entrada del proyecto de servidor que configura el host de la aplicación web de ASP.NET Core y contiene la lógica de inicio de la aplicación, incluidos los registros de servicio y la configuración, los registros y la canalización de procesamiento de solicitudes:

Los archivos de configuración de la aplicación (appsettings.Development.json, appsettings.json) en el servidor o proyecto .Client proporcionan valores de configuración. En el proyecto de servidor, los archivos de configuración se encuentran en la raíz del proyecto. En el proyecto .Client, los archivos de configuración se consumen desde la carpeta raíz web, wwwroot.

En el proyecto .Client:

  • La carpeta Pages contiene los componentes Razor enrutables del lado cliente. La ruta de cada página se especifica usando la directiva @page.

  • La carpeta wwwroot es la carpeta raíz web del proyecto de servidor para el proyecto .Client que contiene los recursos estáticos públicos de la aplicación.

  • El archivo Program.cs es el punto de entrada del proyecto del lado cliente que configura el host de WebAssembly y contiene la lógica de inicio de la aplicación, incluidos los registros de servicio y la configuración, los registros y la canalización de procesamiento de solicitudes.

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor Web App cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Blazor Server

Plantillas de proyecto de Blazor Server: blazorserver, blazorserver-empty

Las plantillas de Blazor Server crean los archivos iniciales y la estructura de directorios de una aplicación de Blazor Server:

  • Si se usa la plantilla de blazorserver, la aplicación se rellena con lo siguiente:
    • Código de demostración para un componente FetchData que carga datos de un servicio de previsión meteorológica (WeatherForecastService) y la interacción del usuario con un componente Counter.
    • Kit de herramientas de front-end de Bootstrap.
  • Si se usa la plantilla de blazorserver-empty, la aplicación se crea sin código de demostración ni Bootstrap.

Estructura de proyecto:

  • Carpeta Data: contiene la clase WeatherForecast y la implementación de WeatherForecastService que proporciona datos meteorológicos de ejemplo al componente FetchData de la aplicación.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor) y la página de Razor raíz de una aplicación Blazor Server. La ruta de cada página se especifica usando la directiva @page. En la plantilla se incluye lo siguiente:

    • _Host.cshtml: página raíz de la aplicación implementada como página Razor:
      • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
      • La página Host especifica dónde se va a representar el componente App raíz (App.razor).
    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente Error (Error.razor): se representa cuando se produce una excepción no controlada en la aplicación.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes y hojas de estilos compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • MainLayout.razor.css: hoja de estilos del diseño principal de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • NavMenu.razor.css: hoja de estilos del menú de navegación de la aplicación.
    • Componente SurveyPrompt (SurveyPrompt.razor): componente de encuesta Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos de la aplicación.

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • appsettings.json y archivos de configuración de la aplicación de entorno: Proporciona los valores de configuración de la aplicación.

  • Program.cs: punto de entrada de la aplicación que configura el host de ASP.NET Core y contiene la lógica de inicio de la aplicación, incluidos los registros de servicio y la configuración de canalización de procesamiento de solicitudes:

    • Especifica los servicios de inserción de dependencias de la aplicación. Los servicios se agregan llamando a AddServerSideBlazor, y el elemento WeatherForecastService se agrega al contenedor de servicios para que lo use el componente FetchData de ejemplo.
    • configura la canalización de administración de solicitudes de la aplicación:
      • Se llama a MapBlazorHub para configurar un punto de conexión para la conexión en tiempo real con el explorador. La conexión se crea con SignalR, que es un marco para agregar funcionalidad web a las aplicaciones en tiempo real.
      • Se llama a MapFallbackToPage("/_Host") para configurar la página raíz de la aplicación (Pages/_Host.cshtml) y habilitar la navegación.

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor Server cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Plantilla de proyecto de Blazor Server: blazorserver

La plantilla de Blazor Server crea los archivos iniciales y la estructura de directorios de una aplicación Blazor Server. La aplicación se rellena con código de demostración para un componente FetchData que carga datos de un servicio registrado, WeatherForecastService, y la interacción del usuario con un componente Counter.

  • Carpeta Data: contiene la clase WeatherForecast y la implementación de WeatherForecastService que proporciona datos meteorológicos de ejemplo al componente FetchData de la aplicación.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor) y la página de Razor raíz de una aplicación Blazor Server. La ruta de cada página se especifica usando la directiva @page. En la plantilla se incluye lo siguiente:

    • _Host.cshtml: página raíz de la aplicación implementada como página Razor:
      • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
      • La página Host especifica dónde se va a representar el componente App raíz (App.razor).
    • _Layout.cshtml: la página de diseño de la página raíz _Host.cshtml de la aplicación.
    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente Error (Error.razor): se representa cuando se produce una excepción no controlada en la aplicación.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes y hojas de estilos compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • MainLayout.razor.css: hoja de estilos del diseño principal de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • NavMenu.razor.css: hoja de estilos del menú de navegación de la aplicación.
    • Componente SurveyPrompt (SurveyPrompt.razor): componente de encuesta Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos de la aplicación.

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • appsettings.json y archivos de configuración de la aplicación de entorno: Proporciona los valores de configuración de la aplicación.

  • Program.cs: punto de entrada de la aplicación que configura el host de ASP.NET Core y contiene la lógica de inicio de la aplicación, incluidos los registros de servicio y la configuración de canalización de procesamiento de solicitudes:

    • Especifica los servicios de inserción de dependencias de la aplicación. Los servicios se agregan llamando a AddServerSideBlazor, y el elemento WeatherForecastService se agrega al contenedor de servicios para que lo use el componente FetchData de ejemplo.
    • configura la canalización de administración de solicitudes de la aplicación:
      • Se llama a MapBlazorHub para configurar un punto de conexión para la conexión en tiempo real con el explorador. La conexión se crea con SignalR, que es un marco para agregar funcionalidad web a las aplicaciones en tiempo real.
      • Se llama a MapFallbackToPage("/_Host") para configurar la página raíz de la aplicación (Pages/_Host.cshtml) y habilitar la navegación.

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor Server cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Plantilla de proyecto de Blazor Server: blazorserver

La plantilla de Blazor Server crea los archivos iniciales y la estructura de directorios de una aplicación Blazor Server. La aplicación se rellena con código de demostración para un componente FetchData que carga datos de un servicio registrado, WeatherForecastService, y la interacción del usuario con un componente Counter.

  • Carpeta Data: contiene la clase WeatherForecast y la implementación de WeatherForecastService que proporciona datos meteorológicos de ejemplo al componente FetchData de la aplicación.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor) y la página de Razor raíz de una aplicación Blazor Server. La ruta de cada página se especifica usando la directiva @page. En la plantilla se incluye lo siguiente:

    • _Host.cshtml: página raíz de la aplicación implementada como página Razor:
      • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
      • La página Host especifica dónde se va a representar el componente App raíz (App.razor).
    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente Error (Error.razor): se representa cuando se produce una excepción no controlada en la aplicación.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes y hojas de estilos compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • MainLayout.razor.css: hoja de estilos del diseño principal de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • NavMenu.razor.css: hoja de estilos del menú de navegación de la aplicación.
    • Componente SurveyPrompt (SurveyPrompt.razor): componente de encuesta Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos de la aplicación.

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • appsettings.json y archivos de configuración de la aplicación de entorno: Proporciona los valores de configuración de la aplicación.

  • Program.cs; El punto de entrada de la aplicación que configura el host de ASP.NET Core.

  • Startup.cs; contiene la lógica de inicio de la aplicación. La clase Startup define dos métodos:

    • ConfigureServices: configura los servicios de inserción de dependencias de la aplicación. Los servicios se agregan llamando a AddServerSideBlazor, y el elemento WeatherForecastService se agrega al contenedor de servicios para que lo use el componente FetchData de ejemplo.
    • Configure: configura la canalización de administración de solicitudes de la aplicación:
      • Se llama a MapBlazorHub para configurar un punto de conexión para la conexión en tiempo real con el explorador. La conexión se crea con SignalR, que es un marco para agregar funcionalidad web a las aplicaciones en tiempo real.
      • Se llama a MapFallbackToPage("/_Host") para configurar la página raíz de la aplicación (Pages/_Host.cshtml) y habilitar la navegación.

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor Server cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Plantilla de proyecto de Blazor Server: blazorserver

La plantilla de Blazor Server crea los archivos iniciales y la estructura de directorios de una aplicación Blazor Server. La aplicación se rellena con código de demostración para un componente FetchData que carga datos de un servicio registrado, WeatherForecastService, y la interacción del usuario con un componente Counter.

  • Carpeta Data: contiene la clase WeatherForecast y la implementación de WeatherForecastService que proporciona datos meteorológicos de ejemplo al componente FetchData de la aplicación.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor) y la página de Razor raíz de una aplicación Blazor Server. La ruta de cada página se especifica usando la directiva @page. En la plantilla se incluye lo siguiente:

    • _Host.cshtml: página raíz de la aplicación implementada como página Razor:
      • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
      • La página Host especifica dónde se va a representar el componente App raíz (App.razor).
    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente Error (Error.razor): se representa cuando se produce una excepción no controlada en la aplicación.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • Componente SurveyPrompt (SurveyPrompt.razor): componente de encuesta Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos de la aplicación.

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • appsettings.json y archivos de configuración de la aplicación de entorno: Proporciona los valores de configuración de la aplicación.

  • Program.cs; El punto de entrada de la aplicación que configura el host de ASP.NET Core.

  • Startup.cs; contiene la lógica de inicio de la aplicación. La clase Startup define dos métodos:

    • ConfigureServices: configura los servicios de inserción de dependencias de la aplicación. Los servicios se agregan llamando a AddServerSideBlazor, y el elemento WeatherForecastService se agrega al contenedor de servicios para que lo use el componente FetchData de ejemplo.
    • Configure: configura la canalización de administración de solicitudes de la aplicación:
      • Se llama a MapBlazorHub para configurar un punto de conexión para la conexión en tiempo real con el explorador. La conexión se crea con SignalR, que es un marco para agregar funcionalidad web a las aplicaciones en tiempo real.
      • Se llama a MapFallbackToPage("/_Host") para configurar la página raíz de la aplicación (Pages/_Host.cshtml) y habilitar la navegación.

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor Server cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Independiente Blazor WebAssembly

Plantilla de proyecto Blazor WebAssembly independiente: blazorwasm

La plantilla Blazor WebAssembly crea los archivos iniciales y la estructura de directorios de una aplicación Blazor WebAssembly independiente:

  • Si se usa la plantilla de blazorwasm, la aplicación se rellena con lo siguiente:
    • Código de demostración para un componente Weather que carga datos de un recurso estático (weather.json) y la interacción del usuario con un componente Counter.
    • Kit de herramientas de front-end de Bootstrap.
  • La plantilla blazorwasm también se puede generar sin páginas de ejemplo y estilos.

Estructura de proyecto:

  • Carpeta Layout: contiene los siguientes componentes de diseño y hojas de estilos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • MainLayout.razor.css: hoja de estilos del diseño principal de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • NavMenu.razor.css: hoja de estilos del menú de navegación de la aplicación.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor). La ruta de cada página se especifica usando la directiva @page. La plantilla incluye los siguientes componentes:

    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente Index (Index.razor): implementa la página Home.
    • Componente Weather (Weather.razor): implementa la página Tiempo.

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

    Nota:

    El perfil http precede al perfil https en el archivo launchSettings.json. Cuando se ejecuta una aplicación con la CLI de .NET, la aplicación se ejecuta en un punto de conexión HTTP porque el primer perfil encontrado es http. El orden de perfil facilita la transición de la adopción de HTTPS para usuarios de Linux y macOS. Si prefiere iniciar la aplicación con la CLI de .NET sin tener que pasar la opción -lp https o --launch-profile https al comando dotnet watch (o dotnet run), simplemente coloque el perfil https encima del perfil http en el archivo.

  • Carpeta wwwroot: carpeta Raíz web de la aplicación que contiene los recursos estáticos públicos de la aplicación, como appsettings.json y los archivos de configuración de la aplicación meteorológica con las opciones de configuración y datos meteorológicos de ejemplo (sample-data/weather.json). La página web index.html es la página raíz de la aplicación implementada como página HTML:

    • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
    • La página especifica dónde se va a representar el componente App raíz. El componente se representa en la ubicación del elemento DOM div con un elemento id de app (<div id="app">Loading...</div>).

  • Program.cs; El punto de entrada de la aplicación que configura el host de WebAssembly:

    • El componente App es el componente raíz de la aplicación. El componente App se especifica como el elemento DOM div con un elemento id de app (<div id="app">Loading...</div> en wwwroot/index.html) en la colección de componentes raíz (builder.RootComponents.Add<App>("#app")).
    • Los servicios se agregan y configuran (por ejemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor WebAssembly cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Blazor WebAssembly

Plantillas de proyecto de Blazor WebAssembly: blazorwasm, blazorwasm-empty

Las plantillas de Blazor WebAssembly crean los archivos iniciales y la estructura de directorios de una aplicación de Blazor WebAssembly:

  • Si se usa la plantilla de blazorwasm, la aplicación se rellena con lo siguiente:
    • Código de demostración para un componente FetchData que carga datos de un recurso estático (weather.json) y la interacción del usuario con un componente Counter.
    • Kit de herramientas de front-end de Bootstrap.
  • Si se usa la plantilla de blazorwasm-empty, la aplicación se crea sin código de demostración ni Bootstrap.

Estructura de proyecto:

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor). La ruta de cada página se especifica usando la directiva @page. La plantilla incluye los siguientes componentes:

    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes y hojas de estilos compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • MainLayout.razor.css: hoja de estilos del diseño principal de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • NavMenu.razor.css: hoja de estilos del menú de navegación de la aplicación.
    • Componente SurveyPrompt (SurveyPrompt.razor) (ASP.NET Core en .NET 7 o versiones anteriores): componente de encuestas de Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos públicos de la aplicación, como appsettings.json y los archivos de configuración de la aplicación meteorológica con las opciones de configuración. La página web index.html es la página raíz de la aplicación implementada como página HTML:

    • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
    • La página especifica dónde se va a representar el componente App raíz. El componente se representa en la ubicación del elemento DOM div con un elemento id de app (<div id="app">Loading...</div>).

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • Program.cs; El punto de entrada de la aplicación que configura el host de WebAssembly:

    • El componente App es el componente raíz de la aplicación. El componente App se especifica como el elemento DOM div con un elemento id de app (<div id="app">Loading...</div> en wwwroot/index.html) en la colección de componentes raíz (builder.RootComponents.Add<App>("#app")).
    • Los servicios se agregan y configuran (por ejemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor WebAssembly cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Una solución de Blazor WebAssembly hospedada incluye los siguientes proyectos de ASP.NET Core:

  • "Client": la aplicación Blazor WebAssembly.
  • "Server": una aplicación que atiende los datos meteorológicos y de la aplicación Blazor WebAssembly a los clientes.
  • "Shared": un proyecto que mantiene clases, métodos y recursos comunes.

La solución se genera a partir de la plantilla de proyecto de Blazor WebAssembly en Visual Studio con la casilla ASP.NET Core hospedado activada o con la opción -ho|--hosted mediante el comando dotnet new blazorwasm de la CLI de .NET. Para más información, vea Herramientas para ASP.NET Core Blazor.

La estructura del proyecto de la aplicación del lado cliente en una solución de BlazorWebassembly hospedada (proyecto "Client") es la misma que la estructura del proyecto para una aplicación Blazor WebAssembly independiente. Archivos adicionales en una solución de Blazor WebAssembly hospedada:

  • El proyecto "Server" incluye un controlador de previsión meteorológica en Controllers/WeatherForecastController.cs que devuelve datos meteorológicos al componente FetchData del proyecto "Client".
  • El proyecto "Shared" incluye una clase de previsión meteorológica en WeatherForecast.cs que representa los datos meteorológicos de los proyectos "Client" y "Server".

Blazor WebAssembly

Plantilla de proyecto de Blazor WebAssembly: blazorwasm

La plantilla de Blazor WebAssembly crea los archivos iniciales y la estructura de directorios de una aplicación Blazor WebAssembly. La aplicación se rellena con código de demostración para un componente FetchData que carga datos de un recurso estático, weather.json, y la interacción del usuario con un componente Counter.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor). La ruta de cada página se especifica usando la directiva @page. La plantilla incluye los siguientes componentes:

    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes y hojas de estilos compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • MainLayout.razor.css: hoja de estilos del diseño principal de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • NavMenu.razor.css: hoja de estilos del menú de navegación de la aplicación.
    • Componente SurveyPrompt (SurveyPrompt.razor): componente de encuesta Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos públicos de la aplicación, como appsettings.json y los archivos de configuración de la aplicación meteorológica con las opciones de configuración. La página web index.html es la página raíz de la aplicación implementada como página HTML:

    • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
    • La página especifica dónde se va a representar el componente App raíz. El componente se representa en la ubicación del elemento DOM div con un elemento id de app (<div id="app">Loading...</div>).

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • Program.cs; El punto de entrada de la aplicación que configura el host de WebAssembly:

    • El componente App es el componente raíz de la aplicación. El componente App se especifica como el elemento DOM div con un elemento id de app (<div id="app">Loading...</div> en wwwroot/index.html) en la colección de componentes raíz (builder.RootComponents.Add<App>("#app")).
    • Los servicios se agregan y configuran (por ejemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor WebAssembly cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Una solución de Blazor WebAssembly hospedada incluye los siguientes proyectos de ASP.NET Core:

  • "Client": la aplicación Blazor WebAssembly.
  • "Server": una aplicación que atiende los datos meteorológicos y de la aplicación Blazor WebAssembly a los clientes.
  • "Shared": un proyecto que mantiene clases, métodos y recursos comunes.

La solución se genera a partir de la plantilla de proyecto de Blazor WebAssembly en Visual Studio con la casilla ASP.NET Core hospedado activada o con la opción -ho|--hosted mediante el comando dotnet new blazorwasm de la CLI de .NET. Para más información, vea Herramientas para ASP.NET Core Blazor.

La estructura del proyecto de la aplicación del lado cliente en una solución de BlazorWebassembly hospedada (proyecto "Client") es la misma que la estructura del proyecto para una aplicación Blazor WebAssembly independiente. Archivos adicionales en una solución de Blazor WebAssembly hospedada:

  • El proyecto "Server" incluye un controlador de previsión meteorológica en Controllers/WeatherForecastController.cs que devuelve datos meteorológicos al componente FetchData del proyecto "Client".
  • El proyecto "Shared" incluye una clase de previsión meteorológica en WeatherForecast.cs que representa los datos meteorológicos de los proyectos "Client" y "Server".

Blazor WebAssembly

Plantilla de proyecto de Blazor WebAssembly: blazorwasm

La plantilla de Blazor WebAssembly crea los archivos iniciales y la estructura de directorios de una aplicación Blazor WebAssembly. La aplicación se rellena con código de demostración para un componente FetchData que carga datos de un recurso estático, weather.json, y la interacción del usuario con un componente Counter.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor). La ruta de cada página se especifica usando la directiva @page. La plantilla incluye los siguientes componentes:

    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes y hojas de estilos compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • MainLayout.razor.css: hoja de estilos del diseño principal de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • NavMenu.razor.css: hoja de estilos del menú de navegación de la aplicación.
    • Componente SurveyPrompt (SurveyPrompt.razor): componente de encuesta Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos públicos de la aplicación, como appsettings.json y los archivos de configuración de la aplicación meteorológica con las opciones de configuración. La página web index.html es la página raíz de la aplicación implementada como página HTML:

    • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
    • La página especifica dónde se va a representar el componente App raíz. El componente se representa en la ubicación del elemento DOM div con un elemento id de app (<div id="app">Loading...</div>).

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • Program.cs; El punto de entrada de la aplicación que configura el host de WebAssembly:

    • El componente App es el componente raíz de la aplicación. El componente App se especifica como el elemento DOM div con un elemento id de app (<div id="app">Loading...</div> en wwwroot/index.html) en la colección de componentes raíz (builder.RootComponents.Add<App>("#app")).
    • Los servicios se agregan y configuran (por ejemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor WebAssembly cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Una solución de Blazor WebAssembly hospedada incluye los siguientes proyectos de ASP.NET Core:

  • "Client": la aplicación Blazor WebAssembly.
  • "Server": una aplicación que atiende los datos meteorológicos y de la aplicación Blazor WebAssembly a los clientes.
  • "Shared": un proyecto que mantiene clases, métodos y recursos comunes.

La solución se genera a partir de la plantilla de proyecto de Blazor WebAssembly en Visual Studio con la casilla ASP.NET Core hospedado activada o con la opción -ho|--hosted mediante el comando dotnet new blazorwasm de la CLI de .NET. Para más información, vea Herramientas para ASP.NET Core Blazor.

La estructura del proyecto de la aplicación del lado cliente en una solución de BlazorWebassembly hospedada (proyecto "Client") es la misma que la estructura del proyecto para una aplicación Blazor WebAssembly independiente. Archivos adicionales en una solución de Blazor WebAssembly hospedada:

  • El proyecto "Server" incluye un controlador de previsión meteorológica en Controllers/WeatherForecastController.cs que devuelve datos meteorológicos al componente FetchData del proyecto "Client".
  • El proyecto "Shared" incluye una clase de previsión meteorológica en WeatherForecast.cs que representa los datos meteorológicos de los proyectos "Client" y "Server".

Blazor WebAssembly

Plantilla de proyecto de Blazor WebAssembly: blazorwasm

La plantilla de Blazor WebAssembly crea los archivos iniciales y la estructura de directorios de una aplicación Blazor WebAssembly. La aplicación se rellena con código de demostración para un componente FetchData que carga datos de un recurso estático, weather.json, y la interacción del usuario con un componente Counter.

  • Carpeta Pages: contiene los componentes Razor enrutables de la aplicación de Blazor (.razor). La ruta de cada página se especifica usando la directiva @page. La plantilla incluye los siguientes componentes:

    • Componente Counter (Counter.razor): implementa la página Counter.
    • Componente FetchData (FetchData.razor): implementa la página Fetch data (Recuperar datos).
    • Componente Index (Index.razor): implementa la página Home.

  • Carpeta Properties: contiene la configuración del entorno de desarrollo del archivo launchSettings.json.

  • Carpeta Shared: contiene los siguientes componentes compartidos:

    • Componente MainLayout (MainLayout.razor): El componente de diseño de la aplicación.
    • Componente NavMenu (NavMenu.razor): implementa la navegación de barra lateral. Incluye el componente NavLink (NavLink), que representa los vínculos de navegación a otros componentes Razor. El componente NavLink indica automáticamente un estado seleccionado cuando su componente se carga, lo que ayuda al usuario a saber qué componente se está mostrando actualmente.
    • Componente SurveyPrompt (SurveyPrompt.razor): componente de encuesta Blazor.

  • Carpeta wwwroot: carpeta Web Root (raíz web) de la aplicación que contiene los recursos estáticos públicos de la aplicación, como appsettings.json y los archivos de configuración de la aplicación meteorológica con las opciones de configuración. La página web index.html es la página raíz de la aplicación implementada como página HTML:

    • Cuando se solicita inicialmente cualquier página de la aplicación, esta página se representa y se devuelve en la respuesta.
    • La página especifica dónde se va a representar el componente App raíz. El componente se representa en la ubicación del elemento DOM app (<app>Loading...</app>).

  • _Imports.razor: Engloba las directivas de Razor comunes que se van a incluir en los componentes de la aplicación (.razor), como las directivas @using de los espacios de nombres.

  • App.razor: componente raíz de la aplicación que configura el enrutamiento del lado cliente mediante el componente Router. El componente Router intercepta la navegación del explorador y representa la página que coincide con la dirección solicitada.

  • Program.cs; El punto de entrada de la aplicación que configura el host de WebAssembly:

    • El componente App es el componente raíz de la aplicación. El componente App se especifica como el elemento DOM app (<app>Loading...</app> en wwwroot/index.html) de la colección de componentes raíz (builder.RootComponents.Add<App>("app")).
    • Los servicios se agregan y configuran (por ejemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Pueden aparecer archivos y carpetas adicionales en una aplicación generada a partir de una plantilla de proyecto de Blazor WebAssembly cuando se configuran opciones adicionales. Por ejemplo, la generación de una aplicación con ASP.NET Core Identity incluye recursos adicionales para las características de autenticación y autorización.

Una solución de Blazor WebAssembly hospedada incluye los siguientes proyectos de ASP.NET Core:

  • "Client": la aplicación Blazor WebAssembly.
  • "Server": una aplicación que atiende los datos meteorológicos y de la aplicación Blazor WebAssembly a los clientes.
  • "Shared": un proyecto que mantiene clases, métodos y recursos comunes.

La solución se genera a partir de la plantilla de proyecto de Blazor WebAssembly en Visual Studio con la casilla ASP.NET Core hospedado activada o con la opción -ho|--hosted mediante el comando dotnet new blazorwasm de la CLI de .NET. Para más información, vea Herramientas para ASP.NET Core Blazor.

La estructura del proyecto de la aplicación del lado cliente en una solución de BlazorWebassembly hospedada (proyecto "Client") es la misma que la estructura del proyecto para una aplicación Blazor WebAssembly independiente. Archivos adicionales en una solución de Blazor WebAssembly hospedada:

  • El proyecto "Server" incluye un controlador de previsión meteorológica en Controllers/WeatherForecastController.cs que devuelve datos meteorológicos al componente FetchData del proyecto "Client".
  • El proyecto "Shared" incluye una clase de previsión meteorológica en WeatherForecast.cs que representa los datos meteorológicos de los proyectos "Client" y "Server".

Ubicación del script Blazor

El script Blazor se sirve desde un recurso incrustado en el marco de trabajo compartido de ASP.NET Core.

En una Blazor Web App, el script Blazor se encuentra en el archivo Components/App.razor:

<script src="_framework/blazor.web.js"></script>

En una aplicación de Blazor Server, el script Blazor se encuentra en el archivo Pages/_Host.cshtml:

<script src="_framework/blazor.server.js"></script>

En una aplicación de Blazor Server, el script Blazor se encuentra en el archivo Pages/_Host.cshtml:

<script src="_framework/blazor.server.js"></script>

En una aplicación de Blazor Server, el script Blazor se encuentra en el archivo Pages/_Layout.cshtml:

<script src="_framework/blazor.server.js"></script>

En una aplicación de Blazor Server, el script Blazor se encuentra en el archivo Pages/_Host.cshtml:

<script src="_framework/blazor.server.js"></script>

En una aplicación de Blazor WebAssembly, el contenido del script Blazor se encuentra en el archivo wwwroot/index.html:

<script src="_framework/blazor.webassembly.js"></script>

Ubicación del contenido de <head> y <body>

En una Blazor Web App, el contenido de <head> y <body> se encuentra en el archivo Components/App.razor.

En una aplicación de Blazor Server, el contenido de <head> y <body> se encuentra en el archivo Pages/_Host.cshtml.

En una aplicación de Blazor Server, el contenido de <head> y <body> se encuentra en el archivo Pages/_Layout.cshtml.

En una aplicación de Blazor Server, el contenido de <head> y <body> se encuentra en el archivo Pages/_Host.cshtml.

En una aplicación de Blazor WebAssembly, el contenido de <head> se encuentra en el archivo <body>.

Aplicación Blazor Server/Blazor WebAssembly dual

Para crear una aplicación que se pueda ejecutar como una aplicación Blazor Server o una aplicación Blazor WebAssembly, un enfoque consiste en colocar toda la lógica y los componentes de la aplicación en una biblioteca de clases de Razor (RCL) y hacer referencia a la RCL desde proyectos Blazor Server y Blazor WebAssembly independientes. En el caso de los servicios comunes cuyas implementaciones difieren en función del modelo de hospedaje, defina las interfaces de servicio en la RCL e implemente los servicios en los proyectos Blazor Server y Blazor WebAssembly.

Recursos adicionales