Blazor
Há muitas abordagens para criar aplicativos Web. Para criar aplicativos Web altamente interativos e rápidos, você geralmente usa muito 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?
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 é WebAssembly?
O WebAssembly é uma tecnologia padrão disponível em todos os navegadores modernos 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.
Atualizar instantaneamente seu aplicativo com o Recarregamento Dinâmico
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 todo o recurso e reimplantar o aplicativo no navegador.
Você pode melhorar esse fluxo de trabalho usando Hot Reload. Com o Hot Reload, 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 muitos 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 é então renderizada dentro da tag 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 a @ até que identifique uma tag e, em seguida, retomará a renderização de HTML. 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 @code bloco para definir membros C# para seu tipo de componente, como campos, propriedades e métodos.
Estilizar um componente Blazor
Os componentes blazor renderizam HTML, para que você possa estilizar componentes blazor usando folhas de estiloS CSS normais. Como alternativa, os componentes blazor têm um recurso chamado isolamento CSS que permite criar regras de estilo que se aplicam apenas ao conteúdo desse componente. Ao criar um arquivo com o mesmo nome que nosso componente e adicionar a extensão de nome de arquivo .css, Blazor reconhece essa nomenclatura como os estilos que só devem ser aplicados ao conteúdo HTML no componente correspondente.
Os componentes blazor também podem definir o conteúdo a ser adicionado ao cabeçalho HTML da página usando uma marca especial HeadContent :
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Essa style tag e seus conteúdos são renderizados dentro da head tag da página.
Componentes roteáveis
O arquivo Home.razor é um componente que pode ser acessado por meio 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 Blazor a responder com o conteúdo desse arquivo quando a página padrão no endereço "/" é solicitada.