•
Exatas
Prévia do material em texto
Fundamentos do Blazor 1Fundamentos do BlazorAntes de começarAndré BaltieriOnde aprender mais sobre BlazorCapítulo 1 - Presente e FuturoPor que ainda usamos o ASP.NET hoje?Qual era o problema do ASP.NET?SSR vs SPAServer Side RenderingSingle Page ApplicationApresentando o BlazorBlazor ServerBlazor WebAssemblyOs problemas do BlazorComo fica o ASP.NET?Unificação dos projetosTemplates anterioresQual template escolher?Fundamentos do Blazor 2Capítulo 2 - Visão GeralEntendendo as segmentações do BlazorBlazor SSR e ServerBlazor WASMBlazor AutoA mágica do RenderMode AutoCapítulo 3 - ArquiteturasInstalação do .NETCriando um projeto com Blazor ServerwwwrootDataPagesShared_Imports.razorApp.razorProgram.csCriando um projeto com Blazor WasmwwwrootComponentsLayoutPages_App.razor_Imports.razorApp.razorProgram.csCriando um projeto com BlazorExecutando os demosCapítulo 4 - StartupCriando o projetoEntendendo os pacotesStartup.csApp.razorHead OutletRoutesblazor.web.jsRoutes.razor_Imports.razorAdicionando suporte a Blazor no Razor PagesAdicionando suporte a Razor Pages no BlazorBlazor e Razor Pages juntosCapítulo 5 - Páginas e ComponentsO que é uma página?Estrutura de uma páginaO que é um componente?Estrutura de uma componenteO que é um Layout?Fundamentos do Blazor 3Estrutura de uma layoutInteração entre elementos da páginaBinding e Two-way bindingSeparando o código da páginaSeparando os estilosEntendendo o CSS dinâmicoParâmetrosCapítulo 6 - Render ModesO que são Render ModesSSRComo é o processo de SEOComo usar SSR no BlazorSSR StreamingComo esta mágica acontece?Interactive ServerCriando projetos no Visual StudioInteractive WebAssemblyInspecionando o projetoExecutando o projetoAutoInspecionando o projetoExecutando o projetoCapítulo 7 - Rotas e NavegaçãoRotasLinksNavLinkMatchActiveClassNavigationManagerFocusOnNavigateRotas em diferentes projetosParâmetros de RotasParâmetros opcionaisRestrições de parâmetrosRestrições e parâmetros opcionaisCatch AllQuery StringsCapitulo 8 - FormuláriosOverviewEditFormValidação do FormulárioContext BindingForm SubmitComponentes nativos disponíveisConclusãoOnde aprender mais sobre BlazorFundamentos do Blazor 4Antes de começarAndré BaltieriMe dedico ao desenvolvimento de software desde 2003, sendo minha maior especialidade o Desenvolvimento Web.Durante esta jornada pude trabalhar presencialmente aqui no Brasil e Estados Unidos, atender remotamente times da Índia, Inglaterra e Holanda, receber 11x Microsoft MVP e realizar diversas consultorias em empresas e projetos de todos os tamanhos.Instagram | LinkedIn | GitHubOnde aprender mais sobre BlazorTemos uma carreira focada em ASP.NET e Blazor, com 4 cursos completos e mais de 12 horas de duração.Carreira 03. ASP.NET/Blazor DeveloperAprenda criar APIs e aplicações web utilizando ASP.NET e Blazorhttps://balta.io/carreiras/aspnet-blazor-developerRecomendamos seguir todas as nossas carreiras na ordem, assim você aprenderá desde C# até Blazor, com o mesmo instrutor, mesma didática e muita mão na massa.CarreirasComece sua carreira como desenvolvedor da forma correta!https://balta.io/carreirasCapítulo 1 - Presente e FuturoPor que ainda usamos o ASP.NET hoje?https://mvp.microsoft.com/pt-br/PublicProfile/5000060https://www.instagram.com/andrebaltieri/https://www.linkedin.com/in/andrebaltieri/https://github.com/andrebaltierihttp://asp.net/https://balta.io/carreiras/aspnet-blazor-developerhttps://balta.io/carreirasFundamentos do Blazor 5Sabemos que C# é a linguagem de programação, .NET é o Framework (Conjunto de bibliotecas que torna o desenvolvimento mais rápido) e que o próprio .NET é escrito em C#.O ASP.NET é o principal Framework para criação de Aplicações Web, APIs e WebSites da Microsoft, que faz uso do .NET como base (Ele é escrito em cima do .NET).Assim como o C# e o .NET, o ASP.NET tem mais de 20 anos de existência e evoluiu muito nesse meio tempo. Atualmente ele é um dos Frameworks mais rápidos do mercado, ultrapassando com folga seus principais concorrentes.Qual era o problema do ASP.NET?Sendo sincero, não era bem um problema, era mais um expansão que faltava. O ASP.NET sempre foi muito popular no Backend, para criação de APIs.Porém, com a popularização de Frameworks SPA (Single Page Applications) o ASP.NET acabou sendo deixado de lado em diversos cenários.Isto por que os navegadores executam apenas HTML, CSS e JS, tornando quase que obrigatório o uso do JavaScript.O ASP.NET consegue servir muito bem a parte do SSR (Server Side Rendering) ou renderização do lado do servidor, mas ele para por aí.Na verdade ele só faz isto! Toda e qualquer aplicação Web (Não API) que você criar com ASP.NET, vai ser renderizada do lado do servidor.Isto significa que se você quiser atualizar um simples contador na tela por exemplo, precisa enviar uma requisição para o servidor, que vai gerar um HTML, CSS e JS e enviar de volta para tela.Já nas aplicações SPA (Aplicações de página única), sua aplicação é renderizada uma vez e após isto, buscamos somente os dados no servidor (Requisição para uma API, normalmente JSON) e geramos o HTML necessário via Fundamentos do Blazor 6JavaScript.SSR vs SPATanto o SSR quanto o SPA desenvolvem um papel único no cenário Web, e ambos tem suas características.Server Side RenderingDo lado do SSR, podemos destacar diversos pontos fortes e fracos que já comentamos, mas em resumo eu elegeria dois principais:Carregamento mais rápido (Só o que precisa)Melhor otimização do SEO (Google e buscadores)Abaixo temos uma ilustração de como funcionam as requisições e respostas em uma aplicação que se beneficia do SSR.Podemos notar que é uma relação extremamente simples, que desfruta da base de toda aplicação Web, que é uma requisição e uma resposta.Single Page ApplicationDo lado do SPA, também podemos destacar diversos pontos fortes e fracos que já comentamos, mas em resumo eu elegeria três principais:Carregamento inicial mais demoradoMelhor interação com usuárioMais responsivaAbaixo temos uma ilustração de como funcionam as requisições e respostas em uma aplicação que se beneficia do SPA.Fundamentos do Blazor 7Como podemos ver, neste modelo, nós temos o carregamento inicial similar ao SSR, porém, posteriormente fazemos apenas requisições assíncronas, recebendo um JSON como retorno e gerando o HTML necessário.AJAX é a sigla para Asynchronous JavaScript and XML, é um termo que foi muito usado no passado, nos primórdios das requisições assíncronas. Hoje podemos chamar apenas de “requisição”, já que o XML nem é mais utilizado.Apresentando o BlazorHá alguns anos a Microsoft chegou com uma proposta legal e ousada, que inclusive eu comparei com Silverlight na época.Embora simples, a proposta do Blazor era trazer suporte aos itens que o SPA tem de legais como responsividade, interação com usuário e também unir isto ao SSR com um carregamento mais rápido.Mas estas de longe eram as propostas mais ousadas, a maior delas foi introduzir o C# no Frontend, não no lugar do JavaScript (Você ainda pode usar JS, inclusive interoperar com C#) mas sim como um complemento a ele.Então, ela fechou o ciclo, com ASP.NET no Backend e SSR e Blazor para SPA, dando de quebra a possibilidade de trabalhar com C# no Frontend.O Blazor ainda foi segmentando em duas partes, uma chamada de Blazor Server e outra de Blazor Wasm, ambas com propósitos diferentes.Blazor ServerA ideia principal do Blazor Server é rodar no servidor, mas diferente de como o ASP.NET faz com Razor Pages.Enquanto o ASP.NET renderiza toda a página novamente, o Blazor foi mais esperto. Ele mantém uma conexão aberta e atualiza só o componente que está sendo manipulado.http://asp.net/http://asp.net/http://asp.net/Fundamentos do Blazor 8Isto significa que temos a aplicação servida inicialmente pelo,servidor, de forma rápida e posteriormente, os componentes são atualizados através de um Socket (Conexão que fica aberta direta com servidor sendo muito mais rápida).Blazor WebAssemblyNa outra mão temos o Blazor WebAssembly, ou Blazor WASM, que faz um trabalho bem diferente do seu irmão.Web Assembly não é uma exclusividade da Microsoft, outras tecnologias como Rust se beneficiam dele, e ele basicamente permite a execução de códigos de máquina no navegador utilizando linguagens que não são necessariamente o JavaScript.FONTE: Microsoft LearnFundamentos do Blazor 9Isto não só implica em uma maior performance como em uma maior flexibilidade, dando a opção de reuso por exemplo, de regras de negócio escritas em C#.Em resumo, o Blazor Wasm é literalmente o .NET rodando dentro do navegador, não há nada (Exceto os arquivos estáticos) sendo servidos no servidor.Então após o carregamento inicial da aplicação, temos uma excelente performance e claro, o uso e abuso do nosso querido C#.Os problemas do BlazorMas como nem tudo são flores, tanto o Blazor Server quanto o Blazor Wasm tem seus defeitos. Enquanto o Blazor Wasm tem uma ótima performance, sua fraqueza é o tamanho do seu App, que precisa do .NET para ser executado e consequentemente fica muito maior do que uma aplicação convencional.No lado do Blazor Server, manter a conexão sempre aberta com o servidor pode ser custoso e renderizar novamente os componentes nem sempre é o jeito mais performático.Além disso, perdemos a parte do SEO, já que só o “esqueleto” da página é renderizado inicialmente, o que deixa o Google triste.Para finalizar, não conseguimos (Até o .NET 7) utilizar Blazor Server, WASM e SSR juntos, e esta é a grande novidade do .NET 8.Como fica o ASP.NET?FONTE: Microsoft LearnFundamentos do Blazor 10Mas se no .NET 8 podemos utilizar SSR, WASM e recursos do Blazor Server, por que ainda precisamos do ASP.NET?Nos últimos anos o ASP.NET sofreu diversas melhorias significativas, desde os Top-Level Statements (Não foi só para o ASP.NET) até a chegada dos Minimal APIs.Sendo assim, eu encaro o ASP.NET com mais foco em APIs a partir do .NET 8, sendo mais específico em Minimal APIs.Em caso de aplicações SSR (Websites) você ainda pode manter o Razor Pages, mas tem muita coisa que já pode ser feita com Blazor.Para o MVC o cenário é um pouco menos favorável, visto que a arquitetura era considerada complexa para iniciar um projeto, e consome mais recursos que os Minimal APIs.Então utilizar o MVC fica mais para projetos que realmente necessitem esta arquitetura. E antes de dizer que não tem como organizar bem as Minimal APIs, dá uma conferida neste repositório.https://github.com/balta-io/3001Unificação dos projetosIndo além, no .NET 8 temos a unificação dos templates também, sendo que para criar uma nova aplicação Blazor com suporte a SSR, WASM e Blazor Server, basta usar o comando dotnet new blazor .http://asp.net/http://asp.net/Fundamentos do Blazor 11Este novo projeto combina recursos do ASP.NET, Blazor Server e Blazor Wasm, nos permitindo criar Razor Components, Razor Pages, Blazor Pages, Blazor Components e até utilizar o Blazor WebAssembly no projeto.Templates anterioresAinda é plenamente possível utilizar templates anteriores como blazorserver , blazorwasm , razorpages e mvc . Nada foi removido, apenas adicionado.Qual template escolher?A opção mais flexível é o dotnet new blazor por possuir recursos tanto para SSR quanto SPA, dando ainda suporte ao WASM.Porém é sempre legal fazer uma análise para entender o que seu projeto de fato precisa e adicionar somente o necessário.De qualquer forma, não se preocupe, dá pra adicionar o Blazor a um projeto ASP.NET e adicionar ASP.NET a um projeto Blazor.Capítulo 2 - Visão GeralEntendendo as segmentações do BlazorNo capítulo anterior falamos sobre SPA, SSR, WASM e agora vamos entender com mais detalhes como o Blazor trata estes itens, vamos entender na prática a diferença entre uma aplicação WASM e um Server ou SSR.Blazor SSR e ServerQuando servimos uma aplicação Blazor do lado do servidor nós temos um comportamento parecido (Explicado na parte de Streaming) que é a renderização da página por completo.Este é um comportamento que acontece em basicamente todas as aplicações em um primeiro momento, e no Blazor SSR ou Server não é diferente.http://asp.net/http://asp.net/Fundamentos do Blazor 12Temos a requisição e carregamento da página, e como esperado, temos todo o conteúdo da página inserido no HTML, já que ele veio do servidor.O trecho que mais nos interessa (Além do cabeçalho) é o corpo da página, que no caso possui o seguinte HTML.Welcome to your new app.
Este conjunto (Cabeçalho e corpo) é que o facilita com que os mecanismos de busca (SEO - Search Engine Optimization) façam a indexação da nossa aplicação.O problema nestes cenários é que para uma simples atualização, precisamos renderizar a página toda novamente (Calma que o Blazor não faz isto por padrão).Vamos analisar o comportamento quando trocamos de página, por exemplo para o contador que vem no template padrão do Blazor.Fundamentos do Blazor 13Como podemos visualizar acima, somente um item chamado counter foi adicionado, o que significa que ele não baixou todo HTML e CSS novamente, apenas o “miolo” da página.Este comportamento pode mudar de acordo com o modo de renderização (Render Mode) que escolhemos para página ou componente. Vamos tratar deles mais tarde.De qualquer forma, surpreendentemente ainda assim temos um conteúdo do HTML atualizado, como mostrado na imagem abaixo.Fundamentos do Blazor 14Novamente nosso foco é o cabeçalho e o corpo, e para nossa surpresa, o corpo da página no HTML também foi atualizado.
Current count: 0
Este é um comportamento normal em cenários SPA, onde o HTML é gerado dinamicamente, e todo conteúdo gerado desta forma não aparece no “Visualizar código fonte da página”, ou seja, afeta o SEO.De qualquer forma, temos a opção de renderizar toda página novamente caso necessário, vai realmente do que você precisa naquele momento.Blazor WASMNa outra ponta temos o Blazor WASM ou Blazor WebAssembly, que como já comentamos é a possibilidade de rodar o .NET e C# direto no navegador.Fundamentos do Blazor 17Não há como discutir a performance do WASM em relação ao Server, visto que todo conteúdo é processado,localmente, na máquina do usuário.O que precisamos discutir aqui são suas desvantagens em relação ao outro modelo, que começam com o tamanho do seu aplicativo.Ao iniciar uma aplicação Blazor WASM, podemos notar a adição de um arquivo chamado dotnet.runtime , que conforme comentamos antes é o que faz o .NET rodar dentro do navegador.Além disso, podemos notar que o o conteúdo da página é igual ao que vimos anteriormente, no Blazor Server.Fundamentos do Blazor 18Porém, a maior diferença está por baixo dos panos, no HTML, onde temos o comportamento padrão de qualquer SPA.Neste modelo, temos um HTML básico, feito para ser renderizado o mais rápido possível, e posteriormente vamos trocando o “miolo” dele sem atualizar a página.Como podemos notar, o corpo da nossa página fica basicamente em branco, o que afeta o SEO, tendo como resultado apenas este HTML.
Não importa qual página acessarmos, nem quantos componentes renderizarmos na tela, no modelo WASM o HTML será sempre este.Blazor AutoFundamentos do Blazor 19Embora você possa escolher entre SSR e Server ou WASM, existe um novo modo no Blazor, chamado de automático.Neste modo, o Blazor se encarrega de usar WASM ou Server para seus componentes ou páginas. Isto mesmo, ele pode ser definido por componente ou página utilizando o atributo RenderMode .A mágica do RenderMode AutoQuando definimos uma página ou componente com renderização automática, o Blazor sabe que componentes WebAssembly são mais rápidos por rodarem localmente.Porém ele também sabe que o WASM demora mais para ser renderizado na primeira vez, devido a dependência do .NET.Então ele faz o seguinte, renderiza este componente pela primeira vez no lado do servidor e deixa uma tarefa em segundo plano sendo executada.Esta tarefa baixa o Runtime do .NET, que é a dependência mais pesada do Blazor WASM enquanto o usuário interage normalmente com o componente que foi servido.A próxima vez que um componente ou página for renderizado, ele verifica se o Runtime já foi baixado, e então utiliza toda performance do WASM.É uma saída muito inteligente, para manter performance e usabilidade nas aplicações de forma simples para nós (Só trocamos uma linha de código).Capítulo 3 - ArquiteturasNeste capítulo vamos entender quais as diferenças arquiteturais temos nos projetos Blazor e como podemos criar um novo projeto ou adicionar suporte ao Blazor em uma aplicação ASP.NET.Instalação do .NETEste livro se baseia na versão 8 do .NET, lançada em Novembro de 2023, e que pode ser baixada e instalada utilizando a URL abaixo:Download .NET 8.0 (Linux, macOS, and Windows).NET 8.0 downloads for Linux, macOS, and Windows. .NET is a free, cross-platform, open-source developer platform for building many different types of applications.https://dotnet.microsoft.com/en-us/download/dotnet/8.0Versões anteriores e futuras podem apresentar diferenças, então recomendamos seguir sempre a mesma versão para um melhor entendimento.Criando um projeto com Blazor Serverhttps://dotnet.microsoft.com/en-us/download/dotnet/8.0Fundamentos do Blazor 20O primeiro projeto que vamos analizar é o Blazor Server, que conforme comentamos anteriormente trabalha apenas no lado do servidor.Então não se engane com a velocidade e usabilidade, todo seu código neste projeto está sendo executado no servidor.Para isto, vamos executar o seguinte comando no terminal:dotnet new blazorserver -o BlazorServerBookSampleO -o significa output , ou saída, e nada mais é do que o nome da nossa aplicação. O .NET vai criar uma pasta com este nome e colocar os arquivos lá dentro.Como resultado, temos um projeto com a seguinte estrutura de pastas e arquivos.wwwrootPasta utilizada para armazenar arquivos estáticos como JS, CSS, Imagens, entre outros.DataFundamentos do Blazor 21Pasta destinada ao acesso a dados (Confira nossa carreira de acesso à dados)PagesPáginas da nossa aplicaçãoSharedComponentes e Layouts (Aprenda mais sobre Razor aqui)_Imports.razorArquivo de importação de namespacesApp.razorComponente inicial da nossa aplicaçãoProgram.csArquivo de execução do programa (Aplicação)Criando um projeto com Blazor WasmAo contrário do Blazor Server, o WASM é executado todo do lado do cliente (Navegador), então temos uma performance maior, mas não temos a segurança do servidor.Isto significa que você não deve armazenar configurações sensíveis como Connection Strings neste projeto.Em adicional, também devemos notar a necessidade de uma API para comunicação, visto que não teremos uma conexão direta com o banco no WASM.Para criar um novo projeto Blazor WASM vamos executar o seguinte comando:dotnet new blazorwasm -o BlazorWasmBookSampleComo podemos notar, a estrutura de uma aplicação WASM é diferente da Server, contendo menos pastas e arquivos e ainda sub-organizada em componentes.https://balta.io/carreiras/dotnet-data-accesshttps://balta.io/carreiras/aspnet-blazor-developerFundamentos do Blazor 22wwwrootPasta utilizada para armazenar arquivos estáticos como JS, CSS, Imagens, entre outros.ComponentsComponentes, Layouts e PáginasLayoutLayoutsPagesPáginas_Imports.razor_App.razor_Program.cs_Imports.razorArquivo de importação de namespacesApp.razorComponente inicial da nossa aplicaçãoProgram.csArquivo de execução do programa (Aplicação)Fundamentos do Blazor 23Embora alguns arquivos e pastas sejam similares, temos algo bem diferente no WASM, que é o arquivo index.html .Este arquivo fica dentro da pasta wwwroot, que como vimos, é utilizada para servir arquivos estáticos.O que acontece é que no Blazor Server as páginas são geradas no servidor, então, elas são dinâmicas, ou seja, a cada requisição geramos um HTML (Ou parte dele).No Blazor WASM, o resultado final da nossa aplicação é apenas HTML, CSS e JS, ou seja, apenas arquivos estáticos.Enquanto no Blazor Server você precisa de um servidor que suporte .NET para executar sua aplicação, no WASM isto não é necessário.Você pode hospedar sua aplicação Blazor WASM em um servidor extremamente simples, como GitHub Pages por exemplo.Criando um projeto com BlazorParece confuso criar um projeto com Blazor, já que acabamos de criar dois (Server e WASM), mas o fato é que no .NET 8 temos uma opção a mais.Lembra que comentamos sobre o modo “automático” do Blazor, pois é, isto mesmo que temos neste template, uma mescla entre o Server e WASM.Dito isto, ao invés de especificarmos blazorwasm ou blazorserver , podemos usar apenas blazor e ter suporte a ambos.dotnet new blazor -o BlazorBookSampleComo resultado deste comando, temos um projeto muito parecido com o gerado no Blazor WASM, mas com um detalhe importante.Fundamentos do Blazor 24Não temos o arquivo index.html na pasta wwwroot como anteriormente, já que para dar suporte ao Blazor Server, precisamos obrigatoriamente do .NET instalado no servidor.Executando os demosUma das grandes vantagens de utilizar o .NET é que muitos dos seus conceitos, como injeção de dependência, são utilizados em todos os projetos.Aliás, temos um curso completo só sobre injeção de dependência no balta.io, que vai te ajudar a entender conceitos como DI, DIP, IoC e Service Locator.Além destas similaridades no código, os projetos escritos com .NET também são executados da mesma forma, bastando utilizar o comando dotnet run para isto.cd NOME_DA_PASTAdotnet runEmbora possamos executar a aplicação com o comando dotnet run , tem outro comando que nos ajuda muito, o dotnet watch run .https://balta.io/cursos/dominando-injecao-de-dependenciaFundamentos do Blazor 25dotnet watch runQuando adicionamos o watch ao comando, que significa observar em inglês, ele fica olhando nosso código e sempre que alteramos,algo, ele reinicia a aplicação automaticamente.Uma mão na roda quando estamos trabalhando com itens visuais, como é o caso do Blazor e precisamos checar a tela a todo momento.Capítulo 4 - StartupAo decorrer deste livro vamos focar no Blazor (União de todos os Frameworks), já que ele tem tanto a parte WASM quanto a SSR.Desta forma, vamos inspecionar o que faz o Blazor funcionar, inclusive em conjunto com o próprio ASP.NET de forma simples.Criando o projetoNosso primeiro passo é criar um novo projeto com o Blazor, e como vimos anteriormente, faremos isto com o comando dotnet new seguido do nome do template, que no caso é blazor .dotnet new blazor -o BlazorBookO comando irá criar uma nova aplicação chamada BlazorBook com tudo o que precisamos para nosso projeto inicialmente.Entendendo os pacotesInvestigando melhor o conteúdo gerado, podemos analisar o BlazorBook.csproj , arquivo principal da aplicação que define entre outros itens a versão do .NET e tipo de projeto.
Tanto o Blazor quanto o ASP.NET estão contidos no pacote Microsoft.NET.Sdk.Web, como mostrado na primeira linha do arquivo.Em adicional, temos a atribuição do TargetFramework como net8.0 , algo necessário para nosso projeto, visto que essa união do Blazor e ASP.NET só está presente a partir desta versão.http://asp.net/http://asp.net/Fundamentos do Blazor 26Razor e Blazor, qual a diferença?Razor é o motor de renderização por trás do ASP.NET e Blazor, ele é o responsável por permitir a interpolação entre HTML e C#.Razor Pages é a arquitetura utilizada para criar páginas Web com C# e HTML usando o ASP.NET.Tanto o Razor Pages, MVC e Blazor, fazem uso do Razor para desenhar suas telas.Startup.csUma característica comum do .NET é compartilhar muita coisa entre os projetos, o que significa que sabendo como o Startup de uma aplicação funciona, você consegue evoluir em diversas frentes.No caso, sempre teremos um builder (Construtor) e um app (Instância da aplicação), e o que varia é apenas como criamos esta instância.No caso do Blazor, esta inicialização é exatamente a mesma do ASP.NET, dada pelo objeto WebApplication .var builder = WebApplication.CreateBuilder(args);Com o construtor instanciado, podemos adicionar os serviços que iremos utilizar, e aqui começa a magia da união do Blazor com o ASP.NET.builder.Services .AddRazorComponents() .AddInteractiveServerComponents();Como podemos notar, temos tanto a adição dos Razor Components ( AddRazorComponents ) quanto dos componentes interativos ( AddInteractiveServerComponents ).Enquanto os Razor Components são componentes mais simples, sempre renderizados no formato SSR, os componentes interativos agem de forma diferente.Embora eles sejam servidos via SSR assim como os Razor Components, eles tem a habilidade de serem interativos.Isto significa que cada interação com o componente ou página não precisa renderizar todo HTML novamente, ele busca apenas os dados e atualiza só o que foi alterado no componente.Por fim não podemos esquecer dos mapeamentos, eles serão responsáveis pelas rotas até as páginas e componentes que criarmos.app.MapRazorComponents
@item
}Caso queira aprender mais sobre Razor, temos um curso GRATUITO sobre ele no site.Uma visão geral sobre o ASP.NET Razor PagesDescubra o que é como funciona um dos Frameworks Web mais maduros e utilizados do mercado.https://balta.io/cursos/uma-visao-geral-do-aspnet-razor-pagesO que é uma página?https://balta.io/cursos/uma-visao-geral-do-aspnet-razor-pagesFundamentos do Blazor 32As páginas, componentes e layouts no Blazor são bem parecidos, com exceção de alguns itens específicos de cada um.No caso da página, podemos identificá-las pelo atributo @page já na primeira linha do arquivo, conforme podemos observar abaixo.@page "/"An unhandled error has occurred. Reload 🗙
Estrutura de uma layoutA primeira mudança que encontramos e que define um layout é o uso do atributo @inherits LayoutComponentBase , que define esta página sendo um layout.Depois disso, pouco importa o HTML contido na página, ele fica a seu critério desenhar a tela do jeito que mais te agrada.Porém, para o Layout saber onde as páginas serão renderizadas, ele precisa de um elemento especial chamado @Body .Durante a execução do código, o Razor pegará todo conteúdo da páginas (E consequentemente dos componentes dentro dela) e substituirá o @Body por eles.Outra sessão importante nos layouts é a div com identificador blazor-error-ui . Se você já teve oportunidade de trabalhar com Blazor Web Assembly, já deve ter notado esse código lá.An unhandled error has occurred. Reload 🗙
Fundamentos do Blazor 35Sempre que usamos componentes do Blazor WASM, seus erros são exibidos utilizando esta div acima, é muito importante manter ela.Interação entre elementos da páginaCriar componentes, páginas e layouts é algo relativamente simples, basta seguir as estruturas mencionadas anteriormente e pronto.Indo mais além, exibir informações na tela, vindas de um banco de dados ou qualquer outro lugar, também não é um grande desafio.A maior dificuldade está na interação com o usuário, em manter um estado, em esconder ou exibir elementos, em mudá-los.Binding e Two-way bindingA forma mais simples que temos de fazer interações (Exibir no caso), é através de uma variável, como mostrado abaixo.Contador: @currentCount
@code { private int currentCount = 0;}Neste caso, temos uma variável chamada currentCount que pode ser exibida em qualquer lugar da tela através do @currentCount .Este processo é chamado de Binding, ou vínculo. Em resumo, se temos uma variável, propriedade, método, podemos interagir com ele.Além disso, sempre que fizer uma alteração em uma variável, ela reflete nos elementos da tela, e sempre que alteramos um elemento na tela, ele também reflete na variável.@rendermode InteractiveServer@_text
@code { private string _text = "Olá mundo!";}Como resultado do código acima, temos o seguinte pedaço de tela (Página ou componente) que renderiza dois campos e um texto, vinculando os três.Fundamentos do Blazor 36Sempre que alteramos o texto do campo, ao perder o foco, o outro campo e o texto abaixo deles também é alterado.Essa magia é o resultado da junção do @bind-value com o Render Mode, sendo o primeiro para vincular um campo a uma variável ou propriedade e o segundo para dar interatividade a eles.A partir da versão 8 do .NET, se você utilizar apenas o @bind-value , notará que nada acontece quando mudamos o texto no campo.Isto ocorre por que mesmo os campos estando ligados (Binding), qualquer página ou componente é servido estático, ou seja, sem comportamento.O que o trecho @rendermode InteractiveServer faz é literalmente dar vida a isto tudo, ele permite que a tela fique conectada ao servidor.Desta forma, quando alteramos um campo, um evento é enviado para o servidor, que entende essa mensagem e manda uma atualização para tela.A página ou componente por sua vez se atualiza, sem a necessidade de recarregar o aplicativo ou página, ele só altera o que realmente precisa.Separando o código da páginaComo vimos nos tópicos anteriores, o código (Comportamento) das páginas e comportamentos fica no final do arquivo. Mas e se meu código crescer?Realmente, em algumas situações fica complicado gerenciar todo código na página. Para ser sincero fica até confuso ter elementos visuais e código (Comportamento) juntos.Neste caso, podemos criar um arquivo separado para o código, seguindo a convenção de manter o mesmo nome do arquivo, adicionando o sufixo .cs .Fundamentos do Blazor 37// Exemplo:-> Pages/Counter.razor-> Pages/Counter.razor.csDependendo da IDE ou editor que você utiliza, ele já entenderá que se trata de um conjunto de itens e fará o agrupamento.Agora temos dois arquivos, Counter.razor e Counter.razor.cs , sendo o primeiro para representação visual e o segundo a parte comportamental.Tudo o que precisamos fazer é garantir que nossa classe herde de ComponentBase e pronto, já podemos mover o código do componente para cá.using Microsoft.AspNetCore.Components;namespace BlazorBook.Components.Pages;public class CounterCode : ComponentBase{ protected int CurrentCount = 0; protected void IncrementCount() { CurrentCount++; }}Quando optamos por utilizar essa abordagem, precisamos explicitamente utilizar protected ou public como modificar para as propriedades e métodos.Exceto pela remoção do código da página, o resto do conteúdo continua o mesmo, com adição do @inherits CounterCode .@page "/counter"@inherits CounterCode@rendermode InteractiveServerCurrent count: @CurrentCount
Esta herança é necessária para termos acesso ao código, que agora ficou em uma classe e arquivo separados.Separando os estilosDa mesma forma que fizemos anteriormente com o código, podemos aplicar estilos somente a componentes, páginas e layouts que desejarmos.O processo é literalmente o mesmo, podemos criar um arquivo chamado Counter.razor.css e estilizar o que quisermos nele.Quando a aplicação for executada, ela criará um CSS dinâmico, que só será aplicado neste componente.Para exemplificar, vamos popular o Counter.razor.css com o seguinte conteúdo, que vai deixar os títulos da página ou componente em vermelho.h1 { color: #FF0000;}Ao executarmos a aplicação, podemos notar que o título “Hello, world!” na home se manteve na cor preta.Quando movemos para página Counter, notamos que o título dela foi alterado para vermelho, conforme configuramos no Counter.razor.css .Fundamentos do Blazor 39Isto significa que o CSS que criamos só afetou a página Counter, deixando as outras páginas intactas.Este é um recurso extremamente útil quando falamos em componentização. Podemos ter nossos estilos independentes com muito mais facilidade.Entendendo o CSS dinâmicoToda essa magia começa lá no arquivo App.razor , dentro do cabeçalho da página quando referenciamos os arquivos CSS.This component demonstrates showing data.
Loading...
Como esta mágica acontece?Sempre que o Blazor identifica um componente ou página com StreamRendering ele renderiza tudo o que pode, o que tem em mãos.No caso da página Weather , como ele não tem todas as informações, ele renderiza a página e fica aguardando pelos dados adicionais.Assim que estes dados chegam, ele atualiza a tela e isto é feito por que a tela se mantém conectada ao servidor através de um Socket .Ao inspecionarmos a execução da página, podemos,ver que após navegar para Weather , após o carregamento de todos os dados, temos um item disconnect .Isto significa que mesmo após a página ter sido exibida na tela, ainda havia uma conexão ativa entre ela e o servidor, que foi fechada apenas momentos depois.Interactive ServerEnquanto o SSR e Stream Rendering são excelentes para exibir informações, ainda temos a necessidade de interação.Sempre que precisamos dar vida aos componentes ou páginas, interagindo com botões, inputs, dentre outros itens, temos três opções, sendo a primeira o Interactive Server.Neste formato, adicionamos o atributo @rendermode InteractiveServer ao componente ou página.O comportamento é muito parecido com o do Stream Rendering, nosso componente irá renderizar mas ficará conectado ao servidor.Fundamentos do Blazor 48Desta forma, podemos processar nosso código no servidor, também utilizando Socket (SignalR) para manter a conexão aberta.O componente responde rapidamente e se atualiza. Isto acontece quase que instantaneamente pois a conexão via Socket e a otimização na transferência de dados ajudam bastante.Porém, assim como no Stream Rendering, como estamos modificando os elementos da tela após o HTML ser renderizado, o código da página não é alterado.Criando projetos no Visual StudioDurante a escrita deste eBook a versão mais recente do .NET 8 é a RC 2 (Release Candidate), que embora esteja muito próxima da final, ainda pode variar.Fundamentos do Blazor 49Desta forma, para entender os próximos modos de renderização, criaremos o projeto por dentro do Visual Studio Preview 17.0.4 (Ou superior).Acredito que na versão final teremos comandos do dotnet new para criação destes templates, dispensando uso do Visual Studio neste passo.Por enquanto, vamos selecionar a opção File > New Project e buscar pelo template Blazor Web App.Após selecionar o template, vamos nomear o projeto e selecionar uma localização para o mesmo, fique à vontade nesta etapa.Movendo adiante, temos a tela que configura o tipo de interação que o projeto terá, que fica na opção Interactivity Type.Fundamentos do Blazor 50Além desta opção temos o Interactivity Location, que podemos definir como Global (Para todas as páginas e componentes) ou Per Page/component (Específico por página ou componente).Neste momento vale ressaltar que o Identity também chegou ao Blazor, sendo possível configurar o tipo de autenticação como None ou Individual Accounts.Por fim temos os tipos de interação que queremos, por enquanto vamos ignorar o None e Server que já vimos anteriormente e focar no WebAssembly e Auto.Fundamentos do Blazor 51Nos próximos tópicos tomaremos como base projetos criados com Interactivity Type Web Assembly e Auto respectivamente.Interactive WebAssemblyMas se podemos rodar o .NET direto no navegador utilizando WebAssembly (WASM), por que utilizar o modo anterior?Sempre que rodamos nosso código no servidor, temos a segurança da execução em um ambiente externo.Por exemplo, não daria para deixar uma Connection String no WASM, visto que o código é executado no navegador, esta informação teria que ficar por lá.Por outro lado, ficar conectado ao servidor (Modelo Interactive Server) demanda mais infraestrutura e pode ser mais lento.Além de não depender do servidor, o WASM ainda tem o poder de usar mais a capacidade da máquina do cliente (Que provavelmente é mais rápida que o servidor).Inspecionando o projetoPara iniciar um projeto com Interactivity Type em WebAssembly, basta selecionar a opção conforme imagem abaixo.O primeiro ponto que podemos notar é que alterando o Interactivity Type para WebAssembly temos agora dois projetos sendo criados, um para o Server e outro para o Client.Fundamentos do Blazor 52Começando nossa análise pelo projeto do servidor ( BlazorApp1 ), podemos notar que no Program.cs temos a adição do AddInteractiveWebAssemblyComponents desta vez.Este item só pode ser adicionado em projetos com Interactivity Type atribuidos como WebAssembly ou Auto.Em adicional, como o WebAssembly roda apenas no lado do cliente (Navegador), precisamos de um projeto ( BlazorApp1.Client ) dedicado para ele.Continuando nossa análise, temos como resultado a adição do AddInteractiveWebAssemblyComponents e AddInteractiveWebAssemblyRenderMode no Program.cs .// ...builder .Services .AddRazorComponents() .AddInteractiveWebAssemblyComponents();// ...app.MapRazorComponents
Current count: @currentCount
@code { private int currentCount = 0; private void IncrementCount() { currentCount++; }}Desta vez, como podemos ver na segunda linha, utilizamos o atributo InteractiveWebAssembly ao invés do InteractiveServer como havíamos feito no passado.Executando o projetoAlgo que precisamos entender é que o projeto BlazorApp1.Client serve apenas como um local para armazenarmos nossas páginas e componentes que desejamos renderizar no formato WebAssembly.Desta forma, vamos sempre executar o projeto BlazorApp1 , que consequentemente carregará o projeto BlazorApp1.Client consigo.O mesmo vale para a publicação do projeto, onde faremos sempre o deploy do BlazorApp , que é nossa aplicação e não do BlazorApp1.Client .Como resultado da execução do projeto, temos o mesmo exemplo dos tópicos anteriores, porém, desta vez o componente Counter.razor está servido via WebAssembly (C# rodando no navegador).Fundamentos do Blazor 55Vale a pena ressaltar que a primeira vez que o componente é carregado, podemos experimentar uma leve lentidão, devido ao fato que o .NET estará sendo baixado no navegador, conforme explicamos anteriormente.AutoFinalizando nosso entendimento sobre Render Modes, temos o Auto, que é uma mescla entre o Server e o WebAssembly.Neste modo, as páginas ou componentes são servidas primariamente no modelo Server, visto que este é o modo mais rápido para exibir um componente.Dizemos isto pois no WASM precisamos baixar o .NET e isto pode levar algum tempo, dependendo da conexão do usuário com a internet.Após exibido o componente na tela, o Blazor iniciará automaticamente o download do .NET Runtime em segundo plano.Nas próximas vezes que o usuário tentar renderizar este componente, o Blazor checará se o .NET Runtime já está presente na máquina.Caso positivo, o componente então é renderizado utilizando WebAssembly, o que o torna mais performático após carregado.Em resumo, no modo Auto nós temos o melhor dos,dois mundos, com a agilidade na renderização inicial do componente e a performance posterior do WASM.Inspecionando o projetoPara iniciar um projeto com o Interactity Type em Auto, basta selecionar a opção conforme imagem abaixo.Fundamentos do Blazor 56Como você já deve imaginar, neste projeto temos a soma dos exemplos anteriores, suportando Server e WASM juntos.Sendo assim, novamente precisamos de dois projetos, um para o Server e outro para o WASM, e seguimos os mesmos padrões do exemplo anterior.Porém, desta vez podemos notar o uso tanto do AddInteractiveServerComponents quanto do AddInteractiveWebAssemblyComponents .// ...builder .Services .AddRazorComponents() .AddInteractiveServerComponents()Fundamentos do Blazor 57 .AddInteractiveWebAssemblyComponents();// ...app.MapRazorComponentsCurrent count: @currentCount
@code { private int currentCount = 0; private void IncrementCount() { currentCount++; }}Em resumo, temos basicamente o mesmo código para todos os modos de renderização, porém eles tem um comportamento bem diferente por baixo dos panos.Capítulo 7 - Rotas e NavegaçãoO Blazor trabalha de forma extremamente simples com rotas e navegação, e se você já aprendeu um pouco sobre isto no curso gratuito de Razor Pages, estará mais do que em casa aqui.Isto por que dado um atributo @page em um arquivo .razor , o mesmo se torna automaticamente uma rota.Inclusive, precisamos nos policiar para não termos rotas iguais, desta forma, recomendo que estruture bem as pastas e organize bem seu projeto.⚠ IMPORTANTEVocê não precisa seguir a estrutura de exemplo dos projetos Blazor, você pode criar as suas, inclusive recomendo que utilize a separação por funcionalidades ou áreas ao invés de ter uma única pasta para páginas e componentes.RotasIndo direto ao ponto, sempre que definimos um atributo @page temos uma rota, que deve ser no formato string e começar com “/” .@page "/counter"// https://localhost:xxxx/counterDesta forma, se criarmos um arquivo chamado About.razor na pasta Components/Pages com o seguinte conteúdo:https://balta.io/cursos/uma-visao-geral-do-aspnet-razor-pagesFundamentos do Blazor 59@page "/about"Teremos como resultado o seguinte conteúdo sendo exibido, sempre que navegarmos para URL https://localhost:xxxx/about .Da mesma forma, podemos alterar a URL para ter mais segmentos, e continuar com um resulta similar.@page "/about/this-book"Isto ocorre por que o uso de “/” e “-” na URL é plenamente permitido, então a renderização da página segue normalmente.Fundamentos do Blazor 60Por fim, pouco importa onde sua página está, se houver o atributo @page no começo do seu arquivo, ele será adicionado as rotas.Desta forma, temos um arquivo Manage.razor em uma subpasta, dentro de outra subpasta, que contém o atributo @page como mostrado abaixo.@page "/admin/account/manage"E como resultado, temos a página sendo renderizada normalmente, visto que não faz diferença em qual pasta ela está alocada.💡 DICAVocê não precisa seguir a mesma conveção das pastas no nome da URL. No exemplo acima, embora o arquivo Manage.razor esteja na pasta Admin/Account , sua URL não necessariamente precisa seguir este padrão, embora seja recomendado.LinksFundamentos do Blazor 61O Blazor possui duas formas de criar links para páginas, o tradicional href do HTML e o NavLink , componente exclusivo do Blazor.Em ambos os casos devemos referenciar o caminho (URL) até a nossa página, que no exemplo é a Counter.razor . Counter (Href)Da mesma forma, podemos utilizar o NavLink , que é o componente de navegação padrão do Blazor e nos fornece alguns recursos adicionais.Termo: @Term
@code { [Parameter] [SupplyParameterFromQuery] public string? Term { get; set; }}Fundamentos do Blazor 68Capitulo 8 - FormuláriosOverviewTalvez uma das funcionalidades mais desejadas em qualquer Framework seja a capacidade de manipular formulários com facilidade.Aplicar validações e submeter informações através destes componentes, é algo que realizamos com frequência, e o Blazor nos ajuda muito nesta parte.EditFormO Blazor possui diversos componentes para se trabalhar com formulários, desde simples Input Text até o próprio formulário em si.Neste caso, o componente que dá vida aos formulários é o EditForm , que adiciona funcionalidades como Binding e Validation ao elemento Form do HTML.Em suma, o EditForm é um componente relativamente simples, que precisa de apenas dois atributos para funcionar.Enquanto no atributo Model ligamos um objeto (Que representa os dados) em nosso formulário, no OnSubmit definimos qual função será executada quando o formulário for submetido.- CONTROLE SOCIAL
- A história da Educação dos surdos no Brasil e em todo o mundo é caracterizada por uma série de lutas e conquistas. Internacionalmente, podemos observar o quanto os surdos enfrentaram segregação, perse
- Libras: Que Língua é Essa?
- Crenças e Preconceitos sobre LIBRAS
- Prova - Curso de Libras 07 10 2023
- LIBRAS DERIVACAO DO PROFESSOR WAGNER
- revel_5_bilinguismo_e_educacao_bilingue - MEGALE, Antonieta Heyden
- O PAÍS DOS SURDOS
- AVALIAÇÃO INTÉRPRETE DE LÍNGUA BRASILEIRA DE SINAIS EM SALA DE AULA
- image
- AVALIAÇÃO INTRODUÇÃO A LÍNGUA DE SINAIS
- AVALIAÇÃO A IMPORTÂNCIA DO INTÉRPRETE DE LIBRAS
- 4. Que país tem o formato de uma bota?a) Butãob) Brasilc) Portugald) Itáliae) México Ver Resposta
- 3. Onde se localiza Machu Picchu?a) Colômbiab) Peruc) Chinad) Bolíviae) Ver Resposta
- Marque a profissão que está representada no sinal abaixo: Questão 14Escolha uma opção: a. Fax...
- A interpretação face a face é composta por duas atividades interdependentes e intimamente ligadas:_____________.Assinale a alternativa que complet...
- Questão 07 (QUADRIX-2019 - Adaptada) Assinale a alternativa que corresponde à sinalização apresentada na figura abaixo: Clique na sua resposta a...
- Questão 03 Clique na sua resposta abaixo Família. Olá. Obrigado. Conhecer. Prazer.
- Clique na sua resposta abaixo Larissa. Ligadura. Lanches Letícia. Levedura.
- Considerando a citação acima e os conteúdos do livro-base Libras: aspectos fundamentais, assinale a alternativa que apresenta corretamente por qual...
- Questão 07 Clique na sua resposta abaixo De número/plural. Instrumentais. Descritivos. De corpo. Especificadores.
- Conforme Ferreira-Brito (1995), por quantas configurações de mãos (CMs), a Língua Brasileira de Sinais é composta? Clique na sua resposta abaixo 5...
- Questão 01 (COPEVE-UFAL-2019) Os classificadores envolvem uma categoria polimórfica específica das línguas de sinais. Esse tipo de produção abrange...
- Questão 06 Clique na sua resposta abaixo Nenhum parâmetro idêntico entre os sinais. Ponto de articulação e expressões não manuais. Movimento e ...
- Os modos da teleologia em Cuvier, Darwin e Claude Bernard
- Geometria e experiência (1921)
