Blazor
Há muitas abordagens para criar aplicativos Web. Para criar aplicativos Web altamente interativos e rápidos, geralmente você usa bastante JavaScript.
Outra abordagem é o uso da estrutura Blazor pela Microsoft, que permite que você use C# e .NET para lidar com todas as suas preocupações de desenvolvimento na Web.
O que é Blazor?
O Blazor é uma estrutura para criar páginas da Web com HTML, CSS e C#. Podemos definir o layout e o design do site usando HTML e CSS padrão. Os componentes interativos das páginas da Web podem ser gerenciados com código C#, que é executado em um servidor ou no navegador usando uma tecnologia padrão da Web chamada WebAssembly. O Blazor nos permite definir nossas páginas da Web e componentes usando a sintaxe Razor, uma combinação conveniente de HTML e C#. Você pode reutilizar facilmente componentes Blazor dentro de outras páginas e componentes. Essa funcionalidade significa que podemos criar e reutilizar partes do nosso aplicativo facilmente.
O que é o WebAssembly?
O WebAssembly é uma tecnologia padrão disponível em todos os navegadores modernos,padrão que permite que o código seja executado, semelhante ao JavaScript, em um navegador. Podemos usar ferramentas para preparar nosso código C# para uso no navegador como um aplicativo WebAssembly e essas ferramentas são incluídas no SDK do .NET.
Atualize instantaneamente seu aplicativo com a Recarga Dinâmica
Ao desenvolver um aplicativo, você deseja garantir que o fluxo de desenvolvedores seja rápido para que você possa ver como as alterações afetam seu aplicativo. Pode ser demorado fazer uma alteração, salvá-la, recompilar todos os recursos e reimplantar o aplicativo no navegador.
Você pode melhorar esse fluxo de trabalho usando a Recarga Dinâmica. Com a Recarga Dinâmica, você pode aplicar uma alteração ao aplicativo em execução sem precisar reiniciá-lo.
Componentes do Blazor
Quando você cria aplicativos usando o Blazor, seu aplicativo consiste em vários componentes, cada um com sua própria área de responsabilidade. Para criar componentes, use arquivos Razor com uma extensão .razor. Então, o que é Razor?
Razor é uma sintaxe de programação que combina a sintaxe HTML com o código C#. Veja um exemplo:
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
Neste exemplo, @product.Name é resolvido para a cadeia de caracteres "Blazor", que é renderizada dentro da marca div. A saída renderizada tem esta aparência:
<div>Blazor</div>
A parte superior do exemplo Razor consiste na marcação HTML que o componente renderizará quando executado. Você pode renderizar o valor das expressões C# usando o caractere @. O Razor continuará interpretando o código C# após o @ até identificar uma tag e, em seguida, continuará renderizando normalmente. Você pode ser explícito sobre quando a expressão C# começa e termina usando parens: @(...).
Tudo dentro @code {} contém código C# para definir membros da classe de componente gerada. Você pode pensar em um arquivo Razor como uma maneira conveniente de definir uma classe C# que define a lógica de renderização HTML. Use o bloco @code para definir membros C# para seu tipo de componente, como campos, propriedades e métodos.
Estilizando um componente Blazor
Os componentes Blazor renderizam HTML, para que você possa estilizar componentes Blazor usando folhas de estilo CSS normais. Alternativamente, os componentes do Blazor têm um recurso chamado isolamento CSS, que permite criar regras de estilo que se aplicam somente ao conteúdo desse componente ou página. Ao criar um arquivo com o mesmo nome que nosso componente e adicionar a extensão de nome de arquivo .css, o Blazor reconhece essa nomenclatura como os estilos que só devem ser aplicados ao conteúdo HTML no componente correspondente.
Os componentes do Blazor também podem definir o conteúdo a ser adicionado ao cabeçalho HTML da página usando uma tag especial HeadContent:
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Essa marca style e o conteúdo são renderizados dentro da marca head da página.
Componentes roteáveis
O arquivoHome.razor é um componente que pode ser navegado de um navegador da Web. Ele contém HTML, C# e referências a outros componentes Blazor. Podemos identificar esse arquivo como uma página devido à presença da @page "/" diretiva na primeira linha. Essa diretiva atribui a rota "/" ao componente e instrui o Blazor a responder com o conteúdo desse arquivo quando a página padrão no endereço "/" é solicitada.