Blazor

Hay muchos enfoques para desarrollar aplicaciones web. Para crear aplicaciones web muy interactivas y rápidas, normalmente se usa una gran cantidad de JavaScript.

Otro enfoque es el uso del marco blazor de Microsoft, que permite usar C# y .NET para controlar todos los problemas de desarrollo web.

¿Qué es Blazor?

Blazor es un marco para crear páginas web con HTML, CSS y C#. Podemos definir la distribución y el diseño del sitio web mediante HTML y CSS estándar. Los componentes interactivos de las páginas web se pueden administrar con código de C# que se ejecuta en un servidor o en el explorador mediante una tecnología estándar web denominada WebAssembly. Blazor nos permite definir nuestras páginas web y componentes mediante la sintaxis de Razor, una combinación cómoda de HTML y C#. Puede reutilizar fácilmente los componentes de Blazor dentro de otras páginas y componentes. Esta funcionalidad significa que podemos compilar y reutilizar partes de nuestra aplicación fácilmente.

¿Qué es WebAssembly?

WebAssembly es una tecnología estándar disponible en cada explorador moderno que permite ejecutar código, similar a JavaScript, en un explorador. Podemos usar herramientas para preparar el código de C# para usarlo en el explorador como una aplicación WebAssembly y estas herramientas se incluyen con el SDK de .NET.

Actualización instantánea de la aplicación con Recarga activa

Al desarrollar una aplicación, quiere asegurarse de que el flujo de desarrollador es rápido para que pueda ver cómo afectan los cambios a la aplicación. Puede llevar mucho tiempo para realizar un cambio, guardarlo, recompilar todos los recursos y volver a implementar la aplicación en el explorador.

Puede mejorar este flujo de trabajo utilizando Hot Reload. Con Recarga activa, puede aplicar un cambio a la aplicación en ejecución sin tener que reiniciarla.

Componentes de Blazor

Al crear aplicaciones con Blazor, la aplicación consta de muchos componentes, cada uno con su propio área de responsabilidad. Para crear componentes, use archivos de Razor con una extensión .razor . Entonces, ¿qué es Razor?

Razor es una sintaxis de programación que combina la sintaxis HTML con código de C#. Este es un ejemplo:

<div>@product.Name</div>

@code {
  Product product = new Product{ Name = "Blazor" }
}

En este ejemplo, @product.Name se resuelve en la cadena "Blazor", que luego se representa dentro de la etiqueta div. La salida representada tiene este aspecto:

<div>Blazor</div>

La parte superior del ejemplo de Razor consta de marcado HTML que el componente representará cuando se ejecute. Puede representar el valor de las expresiones de C# mediante el @ carácter . Razor seguirá interpretando el código de C# después de @ hasta que identifique una etiqueta y, a continuación, reanudará la representación html. Puede ser explícito sobre cuándo comienza la expresión de C# y termina mediante parens: @(...).

Todo lo que @code {} contiene contiene código de C# para definir miembros de la clase de componente generada. Puede pensar en un archivo de Razor como una manera cómoda de definir una clase de C# que define la lógica de representación HTML. Use el @code bloque para definir miembros de C# para el tipo de componente, como campos, propiedades y métodos.

Aplicar estilo a un componente Blazor

Los componentes de Blazor representan HTML, por lo que puede aplicar estilo a los componentes de Blazor mediante hojas de estilos CSS normales. Como alternativa, los componentes de Blazor tienen una característica denominada aislamiento CSS que permite crear reglas de estilo que solo se aplican al contenido de ese componente. Al crear un archivo con el mismo nombre que nuestro componente y agregar la extensión de nombre de archivo .css, Blazor reconoce este nombre como los estilos que SOLO se deben aplicar al contenido HTML en el componente correspondiente.

Los componentes de Blazor también pueden definir el contenido que se agregará al encabezado HTML de la página mediante una etiqueta especial HeadContent :

<HeadContent>
    <style>
        ...my styles here
    </style>
</HeadContent>

Esta style etiqueta y contenido se representan dentro de la head etiqueta de la página.

Componentes enrutables

El archivo Home.razor es un componente al que se puede navegar desde un explorador web. Contiene HTML, C# y referencias a otros componentes de Blazor. Podemos identificar este archivo como una página debido a la presencia de la @page "/" directiva en la primera línea. Esta directiva asigna la ruta "/" al componente e indica a Blazor que responda con el contenido de este archivo cuando se solicite la página predeterminada en la dirección "/".