Blazor

Esse blog é dedicado a explorar as funcionalidades do Blazor. Abaixo segue a lista de artigos em uma ordem sugerida de leitura.

  1. Introdução
  2. Criando um Projeto com o Visual Studio 2019
  3. Criando um Projeto com o VSCode
  4. Iniciando e Configurando
  5. Rotas
  6. Injeção de Dependência
  7. Componentes Blazor
  8. Parâmetros nos Componentes
  9. ChildContent
  10. DataBinding
  11. Eventos
  12. JavaScript Interop
  13. SetFocus
  14. LocalStorage
  15. HttpClient
  16. Navegação
  17. Layouts
  18. _Imports.razor
  19. EventCallback
  20. Referências de Componentes
  21. Lifecycle Methods
  22. Diretivas
  23. Atributos Condicionais
  24. MarkupString
  25. code-behind
  26. Importando Componentes
  27. Templated Components
  28. Componentes Genéricos
  29. Templates Razor
  30. Cascading values and parameters
  31. Criando um Componente de Tabs
  32. Introdução aos Forms
  33. DataAnnotations no Blazor
  34. Validação de Forms
  35. Mensagens de Erro de Validação
  36. ValidationMessage no EditForm
  37. Inputs do EditForm
  38. Usando Enum como DropDownList
  39. Loading de Inicialização
  40. CultureInfo
  41. awesome-blazor
  42. OneWay e TwoWay DataBinding
  43. Bind OnInput
  44. JavaScript Interop síncrono
  45. Recuperando Linguagem do Browser
  46. BlazorStrap

Parâmetros nos Componentes Blazor

Vou dedicar esse artigo aos Parâmetros dos Componentes Blazor. Se você ainda não conhece como os Componentes funcionam no Blazor, sugiro que leia esse artigo aqui.

Declarando um Parâmetro

Podemos passar parâmetros para um componente Blazor, como uma forma de se comunicar com ele. Isso é possível declarando parâmetros no componente.

Podemos ter quantos parâmetros forem necessários. Em nossa aplicação de exemplo, vamos editar o componente Counter, para incluir o parâmetro Quantidade.

Veja na Figura 1 que um Parâmetro nada mais é do que uma propriedade C#, decorada com o atributo [Parameter].

Figura 1: Declarando Parâmetro no componente

Nesse exemplo estamos usando o parâmetro Quantidade no incremento do contador. Sendo assim, o contador será incrementado na quantidade passada como parâmetro.

Ainda podemos utilizar o componente sem passar nenhum parâmetro, e se isso acontecer, o _currentCounter será incrementado em 1, que é o valor padrão da propriedade Quantidade.

Passagem de Parâmetro

A passagem de parâmetro é feita através de atributos da tag HTML que representa o componente. Ou seja, todo componente é potencialmente uma tag HTML em nossa aplicação, e todo parâmetro de um componente é um atributo dessa tag.

Veja na Figura 2 como passamos um valor para o parâmetro Quantidade do componente Counter. Esse código é do Componente Index, onde estamos usando o Counter.

Figura 2: Passando parâmetro para o componente

Nesse exemplo estamos passando o valor 5 para o parâmetro Quantidade. Se você executar a aplicação verá que na página Index, o Contador será incrementado de 5 em 5. E se você for na página Counter, ele continua incrementando de 1 em 1.

Figura 3: Exemplo de Componente executando com Passagem de Parâmetro

Combinando Parâmetros e Rotas

Como já vimos no artigo sobre Rotas, podemos passar parâmetros através das rotas também. E nada impede que o mesmo parâmetro possa ser alimentado pelo atributo HTML ou pela Rota.

Veja na Figura 4 que basta declararmos o parâmetro na Rota, que ele poderá ser alimentado das duas formas.

Figura 4: Combinando Parâmetro de Rota com Parâmetro HTML

Concluindo

Existe uma forma mais avançada de passagem de parâmetros no Blazor, chamada de ChildContent, que veremos num próximo artigo.

Grande Abraço e até o próximo!