Blazor es una tecnología que usa el estándar de web assembly para correr C# en el browser. Blazor distribuye en componentes nuestra UI lo que nos permite un desarrollo fácil y ágil siguiendo la línea de algunos frameworks de JavaScript como React.js
Los proyectos en Blazor tienen por defecto una carpeta llamada Shared donde podemos crear componentes compartidos que se reutilizarán dentro de toda la aplicación.
Si vemos el ejemplo de SurveyPrompt a fondo podemos ver lo fácil que realiza la implementación de un componente compartido:
1<div class="alert alert-secondary mt-4" role="alert"> 2 <span class="oi oi-pencil mr-2" aria-hidden="true"></span> 3 <strong>@Title</strong> 4 5 <span class="text-nowrap"> 6 Please take our 7 <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2127996">brief survey</a> 8 </span> 9 and tell us what you think. 10</div> 11 12@code { 13 // Demonstrates how a parent component can supply parameters 14 [Parameter] 15 public string Title { get; set; } 16}
Creamos la plantilla de nuestro código con todo el HTML que queramos incluir y por otro lado podemos agregar propiedades con el decorador o atributo Parameter para indicar que el valor se puede recibir como parámetro al momento de incrustar o agregar el componente. En el siguiente ejemplo se puede observar como se agrega el componente SurveyPrompt y se envía el parámetro Title:
1@page "/" 2 3<h1>Hello, world!</h1> 4 5Welcome to your new app. 6 7<SurveyPrompt Title="How is Blazor working for you?" />
El template base de Blazor nos trae este demo pero podemos ir aún más allá y construir una librería de componentes compartidos que luego podemos utilizar no solo en este proyecto sino en otros, o incluso crear Nugets que contengan estos componentes.
Creamos un nuevo proyecto de Razor Class Library:
Dentro de esta librería podemos crear todos los componentes que deseemos compartir con diferentes proyectos Blazor, en este ejemplo he creado un componente MySharedComponent:
1<div class="my-component"> 2 This component is defined in the <strong>RazorSharedComponents</strong> package. 3 This component can be used in different Blazor projects 4 This component was call by <strong>@CallModule</strong> 5</div> 6 7@code { 8 // Demonstrates how a parent component can supply parameters 9 [Parameter] 10 public string CallModule { get; set; } 11}
En este punto debemos agregar la referencia de esta librería a nuestro proyecto:
Al momento de incrustar el componente captura el nombre del assembly que lo está llamando para reconocer desde que proyecto se está utilizando este Shared Component.
1@page "/" 2 3<h1>Hello, world!</h1> 4 5Welcome to your new app. 6 7<RazorSharedComponents.MySharedComponent CallModule="@System.Reflection.Assembly.GetExecutingAssembly().GetName().Name"> 8 9</RazorSharedComponents.MySharedComponent>
Y este es el resultado visual que obtengo cuando ejecuto mis 2 proyectos de blazor utilizando el mismo componente compartido:
Esto es una excelente práctica para disminuir las líneas de código y reutilizar, partes de nuestra aplicación.
¿Qué tipo de componentes podemos crear para compartir?, puede ser cualquier tipo pero yo recomendaría componentes que no incluyeran lógica de nuestro negocio, por ejemplo: modales, validadores genéricos, reporteadores, utilidades, menús, headers, footers, etc. Todos los componentes compartidos deben ajustarse a los parámetros que reciben y ser dinámicos para poderse reutilizar correctamente.
Puedes consultar ejemplo en el siguiente enlace: https://github.com/Mteheran/BlazorShareComponents