Estructura del proyecto de Blazor de ASP.NET Core

En este artículo se describen los archivos y las carpetas que componen una aplicación Blazor generada a partir de una de las plantillas de proyecto del marco Blazor. Para obtener información sobre el procedimiento para usar las herramientas con el fin de crear una aplicación Blazor a partir de una plantilla de proyecto de Blazor, consulte Herramientas para ASP.NET Core Blazor. Para obtener más información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly y Blazor Server, consulte Modelos de hospedaje Blazor en ASP.NET Core.

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 o páginas enrutables (.razor) que componen la aplicación Blazor. 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.

• Properties/launchSettings.json: Contiene la configuración del entorno de desarrollo.

• 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.

• wwwroot; La carpeta raíz web de la aplicación que contiene los recursos estáticos públicos de la aplicación, incluidos appsettings.json y los archivos de configuración de la aplicación de entorno para los valores 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>()).

Blazor Server

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 las páginas o componentes enrutables (.razor) que conforman la aplicación Blazor y la página raíz de Razor 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.

• Properties/launchSettings.json: Contiene la configuración del entorno de desarrollo.

• 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.

• wwwroot: carpeta Web Root de la aplicación que contiene los recursos estáticos públicos 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.

Tipos de referencia que aceptan valores NULL (NRT) y análisis estático de estado NULL del compilador de .NET

Las plantillas de proyecto Blazor adoptan el uso de tipos de referencia que aceptan valores NULL (NRT) y el análisis estático de estado NULL del compilador de .NET. Estas características se publicaron con C# 8 y están habilitadas de forma predeterminada para las aplicaciones generadas con ASP.NET Core 6.0 (C# 10) o versiones posteriores.

Las advertencias de análisis estático de estado NULL del compilador de .NET se pueden omitir o servir como guía para actualizar un ejemplo de documentación o una aplicación de ejemplo localmente. El análisis estático de estado NULL se puede deshabilitar estableciendo Nullable en disable en el archivo de proyecto de la aplicación, algo que solo se recomienda para ejemplos de documentación y aplicaciones de ejemplo si las advertencias del compilador distraen durante el aprendizaje sobre .NET. No se recomienda deshabilitar la comprobación de estado NULL en proyectos de producción.

Para obtener más información sobre las NRT, la propiedad Nullable de MSBuild y las aplicaciones de actualización (incluidas las instrucciones #pragma), consulte los siguientes recursos en la documentación de C#:

• Tipos de referencia que aceptan valores null
• Tipos de referencia que aceptan valores NULL (referencia de C#)
• Aprenda técnicas para resolver advertencias que aceptan valores NULL
• Actualización de un código base con tipos de referencia que admiten un valor NULL para mejorar las advertencias sobre diagnósticos nulos
• Atributos para el análisis estático de estado NULL

Recursos adicionales

• Herramientas para ASP.NET Core Blazor
• Modelos de hospedaje Blazor en ASP.NET Core

En este artículo se describen los archivos y las carpetas que componen una aplicación Blazor generada a partir de una de las plantillas de proyecto del marco Blazor. Para obtener información sobre el procedimiento para usar las herramientas con el fin de crear una aplicación Blazor a partir de una plantilla de proyecto de Blazor, consulte Herramientas para ASP.NET Core Blazor. Para obtener más información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly y Blazor Server, consulte Modelos de hospedaje Blazor en ASP.NET Core.

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 o páginas enrutables (.razor) que componen la aplicación Blazor. 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.

• Properties/launchSettings.json: Contiene la configuración del entorno de desarrollo.

• 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.

• wwwroot; La carpeta raíz web de la aplicación que contiene los recursos estáticos públicos de la aplicación, incluidos appsettings.json y los archivos de configuración de la aplicación de entorno para los valores 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>()).

Blazor Server

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 las páginas o componentes enrutables (.razor) que conforman la aplicación Blazor y la página raíz de Razor 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.

• Properties/launchSettings.json: Contiene la configuración del entorno de desarrollo.

• 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.

• wwwroot: carpeta Web Root de la aplicación que contiene los recursos estáticos públicos 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.

Recursos adicionales

• Herramientas para ASP.NET Core Blazor
• Modelos de hospedaje Blazor en ASP.NET Core

En este artículo se describen los archivos y las carpetas que componen una aplicación Blazor generada a partir de una de las plantillas de proyecto del marco Blazor. Para obtener información sobre el procedimiento para usar las herramientas con el fin de crear una aplicación Blazor a partir de una plantilla de proyecto de Blazor, consulte Herramientas para ASP.NET Core Blazor. Para obtener más información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly y Blazor Server, consulte Modelos de hospedaje Blazor en ASP.NET Core.

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 o páginas enrutables (.razor) que componen la aplicación Blazor. 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.

• Properties/launchSettings.json: Contiene la configuración del entorno de desarrollo.

• 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.

• wwwroot; La carpeta raíz web de la aplicación que contiene los recursos estáticos públicos de la aplicación, incluidos appsettings.json y los archivos de configuración de la aplicación de entorno para los valores 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>()).

Blazor Server

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 las páginas o componentes enrutables (.razor) que conforman la aplicación Blazor y la página raíz de Razor 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.

• Properties/launchSettings.json: Contiene la configuración del entorno de desarrollo.

• 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.

• wwwroot: carpeta Web Root de la aplicación que contiene los recursos estáticos públicos 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.

Recursos adicionales

• Herramientas para ASP.NET Core Blazor
• Modelos de hospedaje Blazor en ASP.NET Core