Creación de una interfaz de usuario con componentes de Blazor

Completado

Los componentes de Blazor permiten definir páginas web o partes de HTML que incluyen contenido dinámico mediante código .NET. En Blazor, puede formular contenido dinámico mediante C#, en lugar de usar JavaScript.

Imagine que trabaja para una empresa de entrega de pizzas para crear un sitio web nuevo moderno. Empieza por una página de bienvenida que se convertirá en la página de aterrizaje para la mayoría de los usuarios del sitio. Quiere mostrar ofertas especiales y pizzas populares en esa página.

En esta unidad, aprenderá a crear componentes en Blazor y a escribir código que represente contenido dinámico en esos componentes.

Información sobre los componentes de Blazor

Blazor es un marco que los desarrolladores pueden usar para crear una interfaz de usuario (UI) interactiva enriquecida escribiendo código C#. Con Blazor, puede usar el mismo lenguaje para todo el código, tanto en el lado servidor como en el lado cliente, y representarlo para su visualización en muchos exploradores diferentes, incluidos los exploradores en dispositivos móviles.

Nota:

Hay dos modelos de hospedaje para el código en las aplicaciones Blazor:

• Blazor Server: en este modelo, la aplicación se ejecuta en el servidor web dentro de una aplicación de ASP.NET Core. Las actualizaciones de la interfaz de usuario, los eventos y las llamadas de JavaScript en el lado cliente se envían a través de una conexión SignalR entre el cliente y el servidor. En este módulo, analizaremos y codificaremos este modelo.
• Blazor WebAssembly: en este modelo, la aplicación Blazor, sus dependencias y el entorno de ejecución de .NET se descargan y ejecutan en el explorador.

En Blazor, se crea la interfaz de usuario a partir de partes independientes de código denominadas componentes. Cada componente puede contener una combinación de código HTML y C#. Los componentes se escriben mediante sintaxis Razor, en el que el código se marca con la directiva @code. Se pueden usar otras directivas para acceder a variables, enlazar a valores y lograr otras tareas de representación. Cuando se compila la aplicación, el HTML y el código se compilan en una clase de componente. Los diseños se escriben como archivos con una extensión .razor.

Nota:

La sintaxis Razor se usa para insertar código .NET en páginas web. Puede usarla en aplicaciones MVC de ASP.NET, donde los archivos tienen una extensión .cshtml. La sintaxis Razor se usa en Blazor para escribir componentes. En su lugar, estos componentes tienen la extensión .razor y no hay ninguna separación estricta entre controladores y vistas.

Este es un ejemplo sencillo de un componente de Blazor:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

En este ejemplo, el código establece el valor de una variable de cadena, denominada welcomeMessage. Esa variable se representa dentro de las etiquetas <p> del HTML. Examinaremos ejemplos más complejos más adelante en esta unidad.

Creación de componentes de Blazor

Al crear una aplicación Blazor mediante la plantilla blazorserver en la interfaz de la línea de comandos (CLI) de dotnet, se incluyen varios componentes de forma predeterminada:

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

Los componentes predeterminados incluyen la página principal Index.razor y el componente de demostración Counter.razor. Ambos componentes se colocan en la carpeta Páginas. Puede modificar estas vistas para que se ajusten a sus necesidades o eliminarlas y reemplazarlas por nuevos componentes.

Para agregar un nuevo componente a una aplicación web existente, use este comando:

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• La opción -n especifica el nombre del componente que se va a agregar. En este ejemplo se agrega un nuevo archivo denominado PizzaBrowser.razor.
• La opción -o especifica la carpeta que contendrá el nuevo componente.
• La opción -f obliga a que la aplicación se cree con la versión .NET 6 del marco.

Importante

El nombre de un componente de Blazor debe comenzar por un carácter en mayúsculas.

Una vez creado el componente, puede abrirlo para editarlo con Visual Studio Code:

code Pages/PizzaBrowser

Escritura de código en un componente de Blazor

Al compilar una interfaz de usuario en Blazor, se mezclan marcados HTML y CSS estáticos con código C#, a menudo en el mismo archivo. Para diferenciar estos tipos de código, use la sintaxis Razor. La sintaxis Razor incluye directivas, precedidas por el símbolo @, que delimitan el código C#, parámetros de enrutamiento, datos enlazados, clases importadas y otras características.

Veamos este componente de ejemplo de nuevo:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

Puede reconocer el marcado HTML con las etiquetas <h1> y <p>. Este marcado es el marco estático de la página, en el que el código insertará contenido dinámico. El marcado de Razor consta de:

• La directiva @page: esta directiva proporciona una plantilla de ruta a Blazor. En tiempo de ejecución, Blazor busca una página para representarla emparejando esta plantilla con la dirección URL solicitada por el usuario. En este caso, puede coincidir con una dirección URL con el formato http://yourdomain.com/index.
• La directiva @code: esta directiva declara que el texto del bloque siguiente es código C#. Puede colocar tantos bloques de código como necesite en un componente. Puede definir miembros de clase de componente en estos bloques de código y establecer sus valores mediante cálculo, operaciones de búsqueda de datos u otros orígenes. En este caso, el código define un único miembro de componente denominado welcomeMessage y establece su valor de cadena.
• Directivas de acceso de miembros: Si quiere incluir el valor de un miembro en la lógica de representación, use el símbolo @ seguido de una expresión C#, como el nombre del miembro. En este caso, la directiva @welcomeMessage se usa para representar el valor del miembro welcomeMessage en las etiquetas <p>.