O que é o Blazor Framework (Tutorial de como funciona para desenvolvedores)

O que é WebAssembly?

Blazor WebAssembly é um framework de Aplicativo de Página Única (SPA, do inglês Single-Page App) para criar aplicativos web interativos do lado do cliente com .NET. O Blazor WebAssembly utiliza padrões web abertos que permitem o desenvolvimento sem plugins ou recompilação de código para outras linguagens. O Blazor WebAssembly funciona em todos os navegadores web modernos.

A execução de código .NET em navegadores da web é possível graças ao WebAssembly. WebAssembly é um formato de bytecode compacto, otimizado para downloads rápidos e velocidades máximas de execução. WebAssembly é um padrão web aberto e é suportado nos navegadores web sem a necessidade de plugins.

O código WebAssembly pode acessar todas as funcionalidades do navegador por meio do JavaScript. Conhecido como Interoperabilidade JavaScript , é frequentemente abreviado para Interoperabilidade JavaScript ou Interoperabilidade JS. O código .NET executado via WebAssembly é executado no ambiente isolado (sandbox) do JavaScript do navegador, com as proteções que esse ambiente oferece contra ações maliciosas na máquina do cliente.

Crie aplicativos nativos

Com o Blazor Hybrid, podemos criar aplicativos nativos para clientes usando componentes de interface do usuário da Web Blazor existentes. Os componentes Blazor podem ser compartilhados entre dispositivos móveis, desktops e a web, aproveitando o acesso total aos recursos nativos do cliente. Podemos usar o Blazor Hybrid para criar aplicativos multiplataforma com a interface de usuário de aplicativos multiplataforma .NET (MAUI) ou para modernizar aplicativos existentes do Windows Presentation Foundation (WPF) e do Windows Forms.

Em um aplicativo híbrido Blazor , os componentes Razor são executados nativamente no dispositivo. Os componentes são renderizados em um controle Web View incorporado por meio de um canal de interoperabilidade local. Os componentes não são executados no navegador e o WebAssembly não está envolvido. Os componentes Razor carregam e executam código rapidamente, e têm acesso total aos recursos nativos do dispositivo por meio da plataforma .NET .

Vamos criar um aplicativo de demonstração para entender melhor como funcionam os aplicativos Blazor .

Criar uma aplicação Blazor Server

Para criar nosso primeiro aplicativo Blazor , precisamos criar um novo projeto no Visual Studio.

• Abra o Visual Studio.
• Clique no botão Criar novo projeto.
• Selecione o modelo de aplicativo Blazor Server.
• Clique no botão Próximo.
• Dê um nome à sua aplicação.
• Clique no botão Próximo.
• Selecione uma estrutura de destino.
• Clique no botão Criar Projeto.

Um novo projeto será criado conforme mostrado abaixo.

Foram criados diversos arquivos para fornecer um aplicativo Blazor simples e pronto para ser executado.

• Program.cs é o ponto de entrada do aplicativo que inicia o servidor e onde você configura os serviços e o middleware do aplicativo.
• App.razor é o componente raiz do aplicativo.
• O diretório Pages contém algumas páginas web de exemplo para o aplicativo.
• O arquivo launchSettings.json dentro do diretório Properties define diferentes configurações de perfil para o ambiente de desenvolvimento local. Um número de porta é atribuído automaticamente na criação do projeto e salvo neste arquivo.

Execute este aplicativo modelo.

Executando o aplicativo Blazor

Existem três componentes Blazor criados automaticamente no modelo.

Componente inicial

Clique em "Contador" no menu lateral. Você verá que clicar no botão incrementa o contador sem alterar ou recarregar a página. Incrementar um contador dinamicamente em uma aplicação web normalmente requer JavaScript, mas com Blazor, podemos fazer isso usando C#. É por isso que os desenvolvedores de ASP.NET gostam tanto do Blazor . Isso ajuda os desenvolvedores .NET a criar aplicativos da web de forma rápida e fácil.

Componente do contador

Podemos ver o código do componente Contador no arquivo Counter.razor localizado dentro da pasta Pages da nossa solução.

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

Uma solicitação para /counter no navegador, conforme especificado pela diretiva @page no topo, faz com que o componente Counter renderize seu conteúdo.

Cada vez que o botão "Clique aqui" for selecionado:

• O evento onclick foi executado.
• O método IncrementCount foi chamado.
• O currentCount foi incrementado.
• O componente é renderizado para mostrar a contagem atualizada.

Cada um dos arquivos .razor define um componente de interface do usuário que pode ser reutilizado.

Abra o arquivo Index.razor no Visual Studio. O arquivo Index.razor já existe porque foi criado quando você criou o projeto. Está localizado na pasta Pages dentro do diretório BlazorApp que foi criado anteriormente.

Gerar PDF a partir de URL

Primeiramente, precisamos instalar uma biblioteca de terceiros para gerar arquivos PDF. A biblioteca que utilizaremos é o IronPDF - Geração de PDF for .NET . É fácil de usar, inclui muitos recursos e é gratuito para desenvolvimento. Você pode aprender mais sobre como usar o IronPDF em seu aplicativo Blazor lendo a documentação do IronPDF para Blazor .

Instale o pacote NuGet IronPDF.

Também podemos instalar o pacote NuGet IronPDF no aplicativo Blazor WebAssembly de forma semelhante a um aplicativo ASP.NET Core normal.

Abra o console do Gerenciador de Pacotes NuGet e digite o seguinte comando:

Install-Package IronPdf

A biblioteca será instalada conforme mostrado abaixo.

Remova todo o código existente do arquivo FetchData.razor e adicione o seguinte exemplo de código:

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="GeneratePDF">Generate PDF</button>

@code {
    private string URL { get; set; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

Acima está o código Blazor do lado do cliente para gerar arquivos PDF. Define um botão e uma caixa de entrada. O campo de entrada está vinculado à variável URL.

Agora, vamos escrever o código do lado do servidor para nosso aplicativo.

Abra o arquivo WeatherForecastService.cs e substitua todo o código existente pelo seguinte trecho de código:

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

$vbLabelText   $csharpLabel

Vamos executar nossa aplicação para ver o resultado.

Cole um URL na caixa de entrada e clique em Gerar PDF. O arquivo PDF será gerado e poderá ser visualizado na pasta do aplicativo.

Abra o arquivo PDF conforme mostrado abaixo.

Geramos um PDF a partir da URL com apenas três linhas de código. Este é o poder do IronPDF.

O IronPDF é fornecido pela Iron Software e faz parte do pacote de produtos Iron Suite da Iron Software . Você pode economizar dinheiro e comprar cinco produtos pelo preço de dois , adquirindo o pacote completo Iron Suite .

Resumo

Blazor é uma estrutura para construir interfaces de usuário web interativas do lado do cliente com o .NET Framework da Microsoft .

• Crie interfaces de usuário interativas e ricas usando C# em vez de JavaScript.
• Compartilhar a lógica do aplicativo do lado do servidor e do lado do cliente escrita em .NET.
• Renderizar a interface do usuário em HTML e CSS para ampla compatibilidade com navegadores, incluindo navegadores móveis.
• Integre-se com plataformas de hospedagem modernas, como o Docker.
• Crie aplicativos híbridos para desktop e dispositivos móveis com .NET e Blazor.

Utilizar o .NET para desenvolvimento web do lado do cliente oferece as seguintes vantagens:

• Escreva o código em C# em vez de JavaScript.
• Aproveite o ecossistema existente de .NET .NET
• Compartilhar a lógica do aplicativo entre o servidor e o cliente. Aproveite o desempenho, a confiabilidade e a segurança do .NET. Mantenha-se produtivo no Windows, Linux ou macOS com um ambiente de desenvolvimento, como o Visual Studio ou o Visual Studio Code.
• Construir sobre um conjunto comum de linguagens, estruturas e ferramentas que sejam estáveis, ricas em recursos e fáceis de usar.