Blazor é um framework para construir interfaces web interativas de clientes usando .NET:
- Use C# em vez de JavaScript para criar uma interface rica e interativa.
- Compartilhe lógica de aplicativos do lado do servidor e do lado do cliente escrita em .NET.
- Renderize a interface como HTML e CSS para suportar diversos navegadores, incluindo navegadores móveis.
Blazor é um framework web projetado para rodar do lado do cliente em um navegador em um runtime .NET baseado em WebAssembly (Blazor WebAssembly) ou no lado do servidor em ASP.NET Core (servidor Blazor). Para qualquer modelo gerenciado, o modelo de aplicativo e de componentes é o mesmo.
Servidores Blazor
Use o modelo de hospedagem de servidor Blazor para executar aplicativos no servidor a partir ASP.NET aplicativos Core.Atualizações de interface, gerenciamento de eventos e chamadas JavaScript são feitas por meio deSignalRconexões com o processo。
O modelo de hospedagem de servidores Blazor oferece os seguintes benefícios:
- O tamanho do download é significativamente menor que o do app Blazor WebAssembly, e o app carrega muito mais rápido.
- Os aplicativos podem aproveitar ao máximo as capacidades do servidor, incluindo o uso de qualquer API compatível com .NET Core.
- O .NET Core no servidor é usado para rodar o app, então ferramentas .NET existentes, como depuração, funcionam como esperado.
- Clientes leves são apoiados. Por exemplo, o aplicativo servidor Blazor é adequado para navegadores que não suportam WebAssembly e para dispositivos com recursos limitados.
- A base de código .NET/C# do app, que inclui o código dos componentes do app, não funciona no cliente.
A hospedagem de servidores Blazor apresenta as seguintes desvantagens:
A latência geralmente é maior. Toda interação do usuário envolve um salto de rede.
Trabalhar offline não é suportado. Se a conexão do cliente falhar, o app para de funcionar.
Se você tem múltiplos usuários, há desafios na escalabilidade do aplicativo. O servidor deve gerenciar múltiplas conexões de clientes e lidar com o estado do cliente.
ASP.NET Servidores Core são obrigados a atender à aplicação. Cenários de implantação serverless não são viáveis (por exemplo, atender aplicações por meio de uma CDN).
Início do tutorial:
1. Primeiro, crie um novo projeto de Blazor App usando vs2019, conforme mostrado abaixo:
2. Crie um novo componente Razor com o seguinte código:
Precisamos do pacote SkiaSharp para gerar o captcha base64 e instalá-lo via nuget:
3. Inicie o projeto, visite:O login do hiperlink está visível.
O código html gerado é o seguinte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta nome="viewport" content="width=device-width, inicial-scale=1,0" />
<title>BlazorApp1</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<!--Blazor:{"sequence":0,"type":"server","prerenderId":"19210eabb9054fe79ea7cc3e6f501df5","descriptor": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="contador" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Contador
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Sobre</a>
</div>
<div class="content px-4">
<h3>Verificação</h3>
<p>
(Blazor) Um exemplo de como mostrar o código de verificação e verificá-lo.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Renovar</button>
<hr>
<div>Digite o número na imagem</div>
<form>
<input type="text" style="padding:5px" />
<button>Confere</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Uma exceção não tratada ocorreu. Veja as ferramentas de desenvolvimento de navegador para mais detalhes.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Tente clicar no botão, o evento de disparo do botão é comunicado via SignalR, que é baseado em websocket, polling, etc., conforme mostrado na figura abaixo:
Links de referência:
O login do hiperlink está visível.
|
Publicado em 07/04/2020 11:15:36
|
|
|
|
Senhorio|
Publicado em 07/04/2020 11:45:47
|
Publicado em 15/11/2022 10:51:42
|
