Componentes de Blazor

   Después de esta lección aprenderás a:

  • Comprender qué son los componentes en Blazor analizando código de ejemplo.
  • Reconocer los componentes más usados y su utilidad.

 

Cursos Institucionales.
El Aprendizaje Hecho Fácil. ¡Disfrútalo!

   Recomendamos


Estudia la lección anterior antes de pasar a la actual. Lograrás tener excelentes bases que se reflejarán en la calidad de tu programación.

Componentes Blazor


Introducción Recordando la lección anterior, hallamos que Blazor al igual que Angular y otros marcos de trabajo, basa el diseño de las interfaces y su funcionalidad en componentes.
Los componentes de Blazor forman parte de la interfaz del usuario, tales como páginas, cuadros de diálogo, formularios de captura de información o credenciales, etc.
Así que además de código HTML normal, los componentes también pueden usar otros componentes como parte de su lógica de representación.
En la lección más adelante de este curso, ‘Las librerías más usadas para diseñar con Blazor’ , podrás reconocer los componentes clasificados por categorías y acceder al código fuente para una rápida implementación.
La sintaxis para utilizar un componente en Razor es similar al uso de un control de usuario en una aplicación de ASP.NET Web Forms. Los componentes se especifican mediante una etiqueta de elemento que coincide con el nombre de tipo del componente como veremos en el ejemplo más adelante. A diferencia de ASP.NET Web Forms, los componentes de Blazor:
  • No usan un prefijo de elemento (por ejemplo, asp:).
  • No es necesario registrarlos en la página ni en config.
El modelo Razor Components Piense en los componentes de Razor como si fueran tipos de .NET, ya que son exactamente eso. Si se hace referencia al ensamblado que contiene el componente, el componente está disponible para su uso. Microsoft
Los componentes son Clases diseñadas en .Net.  Los parámetros de estas Clases son las propiedades de dichos componentes.  Podremos utilizar las expresiones Blazor Component o  Razor Component indistintamente cuando desarrollamos código.
   En este curso usaremos el término Componentes Razor.
   Herramientas de Componentes Blazor: No debemos confundir— aunque al final se unen en un solo concepto —las bibliotecas o librerías que conforman componentes listos para su uso como las que encontrarás en los sitios web descritos de la lección ‘Las librerías más usadas para diseñar con Blazor‘ que forma parte de este curso.

Los componentes con Blazor los comprenderemos mejor estudiando el lenguaje de marcado Razor. Para esto, debemos dividir el concepto en 3 bloques:

  1. Directivas. @page
  2. Marcado. HTML
  3. Código o Lógica. C#, @code
  4. <Nombre componente/>Y finalmente el llamado del componente desde la página o interfaz de usuario. He aquí un ejemplo:
//UN EJEMPLO CLÁSICO


NOMBRE DEL ARCHIVO/COMPONENTE ubicado en la carpeta del proyecto 'pages'
Pages/Contador.razor.


BLOQUE N° 1 : DIRECTIVAS
------------------------
    @page "/contador"


BLOQUE N° 2 : MARCADO
------------------------

<h1>Contador</h1>
<p>Llevando la cuenta: @ActualContador</p>
<button class="btn btn-primary" @onclick="Incrementador"> ¡Clic aquí! </button>


BLOQUE N° 3 : CÓDIGO O LÓGICA
------------------------------

@code {
    private int ActualContador = 0;

    [Parameter]
    public int IncrementoContador { get; set; } = 2;

    private void Incrementador()
    {
        ActualContador += IncrementoContador;
    }
} 

Explicación:

  1. Nombre del archivo: El archivo Contador.razor se halla almacenado en la carpeta Pages de nuestro proyecto:  Pages/Contador.razor y es realmente el que contiene la implementación. Con la directiva @Pages estaremos solicitando el componente respectivo Contador.razor  el cual despliega su contenido y funcionalidad en la página principal Index, más adelante.
  2. Bloque N° 1: Observa que las directivas se declaran anteponiendo el símbolo de marcado @. Esta realiza el llamado al componente "/contador"
  3. Bloque N° 2: Es simplemente código HTML.
    Hacemos uso de la clase class="btn btn-primary  que siempre hemos utilizado en el diseño de páginas. Generalmente este tipo de clases corresponden a bibliotecas de Boostrap previamente importadas como paquetes Nuget, biblioteca que es una de los framework más populares para el diseño de interfaces modernas y responsive.
  4.  Se invita al usuario a pulsar el el botón con el código/evento @onclick="Incrementador"y de esta manera llamamos el método  private void Incrementador()
  5.  Observa que hemos declarado una propiedad public int IncrementoContador
     con el decorador o atributo [Parameter] para indicar que el valor se puede recibir como parámetro al momento de insertar el componente en la interfaz o página a desplegar.
   Los componentes razor utilizan las directivas declaradas en el bloque o sección de directivas para aplicar funcionalidad como enrutamientoinyección de dependencias, un concepto explicado y aplicado en el nivel II, avanzado de este curso.
   ¿Y JavaScript? Observa que para realizar el incremento sin actualizar una página lo que comúnmente se utiliza y requiere es el uso del popular lenguaje de scripts JavaScript. ¡Pero con Blazor no!… utilizaremos C#. Esto hace que el aprendizaje de Blazor tenga una curva de aprendizaje plana en especial para quienes manejamos C#. ¡Estupendo!


5. Bloque N° 3:  Aquí pondremos nuestro código en C#, que contiene la lógica de la aplicación. 
En el ejemplo debemos usar un método y la declaración de una variable encapsulada private int ActualContador = 0; Además nuestros parámetros en Blazor son manejados por propiedades, en nuestro ejemplo, public int IncrementoContador { get; set; } = 2; que inicializa el contador para incrementos de 2 en 2.  

   Todos los Componentes de una interfaz UI, se definen en archivos tipo Razor.
   Un componente Blazor puede ser una página completa o también un componente independiente.
   En el bloque de la lógica— iniciado con @code — definimos parámetros y valores vinculados a datos de nuestro modelo. Utiliza el atributo [Parameters] para gestionar apropiadamente los parámetros personalizables de entrada.

Y por último tenemos la página o interzar gráfica a desplegar:

6. Página principal: Para nuestro ejemplo, tendremos una página principal HomeIndex. Es en esta donde llamaremos o agregaremos el componente Contador para que despliegue su funcionalidad.

DIRECTIVA QUE LLAMA AL RAIZ DE LA APP, Index, 
la cual se encuentra almacenada en la carpeta pages.
Pages / Index.razor
@page "/"

<h1>Estamos en la página Index (Home)</h1>

Bienvenidos a Blazor!

<SurveyPrompt Title="Ahora llamado al componente..." />

//Llamada al componente Blazor
//Correpsonde al archivo .Razor
<Contador /> 

Observa que se ha agregado el elemento Contador al final de la página Index. Así, desplegaremos el componente Contador…. sin actualizar la página!

   EN RESUMEN

  1. Un componente es un pequeño bloque o parte con funcionalidad personalizada y propia (Plantilla + estilo + propiedades).
  2. Blazor requiere mínimo 1 componente.
  3. Existe dos tipos de componentes: 
    -Enrutables y pueden ser asociados a  una ruta URL. Esto  gracias la diretiva @page. Se almacenan en la carpeta  >Páginas. Y los
    – Reutilizables (o compartidos): Son componentes que pueden ser compartidos y desplegados en otros componentes.  

APLICA YA! - Easy To MakeEasy interactivo. ¡Inténtalo!


Afina tus conocimientos con el siguiente repaso interactivo. Puedes repasar o regresas al soporte teórico las veces que necesites.