Eventos personalizados en Blazor - Tutorial de Blazor

En ocasiones, cuando creamos componentes personalizados, podemos querer que cuando ese componente se instancie, se le puedan añadir atributos adicionales que nosotros no conocemos y que también queremos que se representen en nuestro componente, lo que se llaman atributos arbitrarios. Vamos a verlo con un ejemplo. Estamos aquí en el proyecto StoriesLibrary y quiero comenzar a hacer mi sistema de administración de historias para crear y editar historias ya creadas. Lo primero que se me ha ocurrido hacer es crear un componente personalizado, un input, pero con opciones adicionales. Por ejemplo, mi idea es que este input tenga un máximo de caracteres, y mediante eventos personalizados que veremos más adelante, podremos indicar al usuario cuánto le queda para llegar a ese máximo. Para ello, he creado aquí dentro de Components, este EnhancedInput. Vamos a ver primero su código CS. Aquí lo tenemos, la partial class, y fíjate, tenemos aquí un atributo Parameter, pero con una opción adicional. Le estamos diciendo CaptureUnmatchedValues es igual a true. Es decir, vamos a hacer que en este diccionario que está aquí abajo, que es un string object, se capturen todos los atributos que no coincidan con ningún parámetro que tenga nuestro componente. En nuestro caso, no tenemos ningún parámetro, por lo cual, en este diccionario se van a introducir todos los atributos que, cuando instanciemos el componente, nosotros le pongamos. Y ahora vamos a ver el código Razor. Fíjate que solo estamos pintando un input, y aquí la directiva @attributes. Le estamos diciendo: «Ey, expande todos los atributos de este valor, de la referencia, a nuestro diccionario, que contiene los atributos desconocidos». Y ya está, solo esta es la parte de código HTML y Razor de nuestro componente. Ahora, vamos a ver cómo funciona. Vamos aquí a Pages y he creado una carpeta llamada Stories. Aquí dentro tenemos Add.razor. ¿Qué tenemos aquí? Pues, su ruta, añadir historia y, fíjate, un componente que se llama AddOrEdit. Mode="AddOrEdit.FormMode.Add", ya está. ¿Qué es este AddOrEdit? Este AddOrEdit es un componente que he creado, que nos va a servir tanto para añadir historias, como para editarlas, puesto que la interfaz es básicamente la misma. Aquí tenemos el componente, vamos a empezar con el código CS. Aquí tenemos la clase parcial y tenemos el enum FormMode. Este FormMode, ¿qué tiene? Add o Edit, es decir, o adición o edición de la historia. Y aquí el parámetro de Mode para decirle cuál es, si una o la otra. Y dentro de nuestro código Razor, tenemos un formulario. Básicamente, para añadir una historia. Fíjate que tenemos el label, label for="txtTtitle", y aquí, en lugar de input normal, tenemos el EnhancedInput. Este EnhancedInput tiene dos atributos, que yo le he puesto aquí, el identificador para que se asocie con el for del label y la clase que es form-control. Aquí tenemos también el texto de la historia, que es un textarea normal, el botón, y fíjate en el botón cómo hacemos uso del parámetro de Mode para decirle: «Ey, ¿cuál es el texto?» Pues, si el modo es Add, le llamamos «Añadir historia», y si es Editar, le llamamos «Editar historia». Bien, vamos a verlo en funcionamiento. Shift F6, ha compilado, y F5 para ejecutar. Aquí lo tenemos, y vamos a ir a la ruta donde está nuestro componente Add. /stories/add. Vamos aquí al Title, sacamos las dev tools, F12, volvemos al Title, botón derecho, Inspeccionar. Y como ves, aquí en este input, yo prefiero copiarlo al portapapeles y pegarlo en un bloc de notas, porque esta parte no es muy accesible. Fíjate, input id="txtTitle" y class="form-control". Esta pintando los dos atributos que de forma arbitraria nosotros le hemos puesto a nuestro EnhancedInput. Cualquier atributo, no solo el ID o la class, se representará aquí.