Componentes Razor: Como funciona para desenvolvedores

O que são componentes Razor?

Os componentes Razor são um framework de interface de usuário do ASP.NET Core que permite aos desenvolvedores criar páginas web usando uma combinação de C# e HTML, com a capacidade de escrever lógica do lado do servidor que pode ser executada no lado do cliente. Os componentes Razor fazem parte do framework Blazor , que é um framework de interface de usuário web do lado do cliente que executa código C# no navegador usando WebAssembly (Wasm) ou SignalR. Os componentes Razor fornecem uma arquitetura baseada em componentes para a construção de aplicações web modernas, onde a interface do usuário é dividida em componentes menores e independentes que podem ser combinados para criar uma página web completa.

Os componentes Razor usam uma linguagem de marcação chamada sintaxe Razor , que é uma combinação de C# e HTML que permite a integração perfeita de código do lado do servidor e do lado do cliente. Os componentes Razor são semelhantes a outras estruturas de interface do usuário baseadas em componentes, como React, Angular e Vue, mas com a principal diferença de serem escritos em C# e executados no servidor ou no lado do cliente, dependendo do modelo de hospedagem (WebAssembly ou SignalR).

Benefícios dos componentes de Razor

Os componentes Razor oferecem diversas vantagens para desenvolvedores web, incluindo:

Primeiros passos com o Razor Components

Para começar a usar os componentes Razor , você precisará ter o .NET Core 3.0 ou posterior instalado em seu sistema. Crie um novo projeto ASP.NET Core usando o modelo Blazor no Visual Studio ou na CLI do .NET Core .

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Neste exemplo, temos um componente Razor chamado "Counter" com um botão que incrementa a variável currentCount quando clicado. O bloco @code é usado para definir o código C# do componente.

Criar um componente Razor personalizado

No projeto, crie uma nova pasta chamada "Components" para armazenar seus componentes Razor .

Dentro da pasta "Components", adicione um novo arquivo de componente Razor com a extensão "Razor". Este arquivo conterá o código C# e HTML do seu componente.

Abra o arquivo do componente Razor e defina seu componente usando a sintaxe Razor . A sintaxe Razor permite combinar código C# e HTML em um único arquivo, facilitando a criação de páginas web dinâmicas. Por exemplo, você pode definir um componente Razor simples assim:

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

Agora você pode usar seu componente Razor em outras partes do seu aplicativo web, incluindo-o na sua marcação HTML usando o nome da tag do componente. Por exemplo, você pode usar o componente na sua página Razor principal desta forma:

<MyComponent />

Você também pode passar dados para o seu componente Razor usando parâmetros de componente. Os parâmetros de componentes permitem passar dados de um componente pai para um componente filho, possibilitando a comunicação entre os componentes. Por exemplo, você pode definir um parâmetro em seu componente Razor assim:

@code {
    [Parameter]
    public string Message { get; set; }
}

Em seguida, utilize o parâmetro component na sua classe de componente Razor desta forma:

<p>@Message</p>

E passe dados para o componente a partir de um componente pai desta forma:

<MyComponent Message="Hello from parent component!" />

Os componentes Razor também podem conter lógica do lado do servidor que pode ser executada no lado do cliente. Por exemplo, você pode escrever lógica de processamento, fazer solicitações HTTP, lidar com eventos do usuário e executar outras operações do lado do servidor diretamente de seus componentes Razor usando código C#. Isso permite criar páginas web dinâmicas e interativas sem escrever nenhum código JavaScript .

Criando componentes de Razor reutilizáveis

Uma das vantagens dos componentes Razor é a capacidade de criar componentes de interface do usuário reutilizáveis ​​que podem ser usados ​​em várias páginas ou aplicativos. Para criar um componente reutilizável, você pode criar um novo arquivo "Razor" na pasta "Shared" do seu projeto.

Por exemplo, digamos que queremos criar um componente que exiba uma lista de livros. Podemos criar um novo arquivo BookList.razor na pasta "Shared", como por exemplo:

Podemos definir o componente Razor assim:

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

Neste exemplo, temos um componente chamado BookList que recebe uma lista de objetos "Book" como parâmetro Razor . O loop @foreach é usado para iterar pela lista e exibir o título e o autor de cada livro.

Na próxima seção, exploraremos como usar o IronPDF com componentes Razor para criar arquivos PDF a partir de aplicativos da web.

Utilizando o IronPDF com componentes Razor

IronPDF é uma biblioteca C# que permite aos desenvolvedores criar arquivos PDF a partir de HTML, CSS e JavaScript. Ele é construído sobre o Chromium, o navegador de código aberto que alimenta o Google Chrome. Com o IronPDF, os desenvolvedores podem converter facilmente componentes Razor em HTML e criar arquivos PDF a partir deles.

O IronPDF se destaca na conversão de HTML para PDF , garantindo que o layout e o estilo permaneçam intactos. Isso é particularmente útil para gerar PDFs a partir de conteúdo da web, como relatórios, faturas e documentação. Arquivos HTML, URLs e strings HTML podem ser facilmente convertidos em arquivos PDF.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

		' 1. Convert HTML String to PDF
		Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
		Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
		pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

		' 2. Convert HTML File to PDF
		Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
		Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
		pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

Instalando o IronPDF

Para usar o IronPDF com componentes Razor , primeiro precisamos instalar o pacote NuGet do IronPDF . Para fazer isso, siga estes passos:

1. Abra seu projeto no Visual Studio.
2. Clique com o botão direito do mouse no projeto e selecione "Gerenciar Pacotes NuGet ".
3. Procure por "IronPDF" e selecione o " pacote IronPDF ".
4. Clique em "Instalar" para instalar o pacote.

Após instalar o pacote NuGet IronPDF , podemos utilizá-lo em nossa aplicação de componentes Razor .

Após a instalação do pacote, você pode criar um novo arquivo PDF a partir de um componente Razor usando a classe IronPdf.ChromePdfRenderer.

Para criar um arquivo PDF em componentes Razor do ASP.NET Core , você pode passar a string de sintaxe HTML, o arquivo HTML ou a URL para o método IronPdf.ChromePdfRenderer. Por exemplo, digamos que queremos criar um arquivo PDF com o incremento de um contador.

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

Neste exemplo, criamos uma nova instância do ChromePdfRenderer. Em seguida, criamos uma nova instância da classe PdfDocument e passamos uma string para o método RenderHtmlAsPdf. Finalmente, salvamos o arquivo PDF resultante no disco usando o método PdfDocument.SaveAs.

Neste exemplo, modificamos nosso componente de contador. Modificamos a função onClick de um botão de contador que, ao ser clicado, criará um PDF contendo a contagem do contador.

Conclusão

Neste artigo, exploramos como usar componentes Razor com o IronPDF para criar arquivos PDF a partir de aplicações web. Já abordamos os conceitos básicos dos componentes Razor , como instalar e usar o IronPDF e fornecemos exemplos de código para ajudar você a começar.

Razor Components e IronPDF são ferramentas poderosas que podem ser usadas para criar aplicações web robustas e ricas em recursos. Ao combinar essas tecnologias, os desenvolvedores podem criar aplicativos da web que sejam altamente funcionais e visualmente atraentes.

O IronPDF também pode ser usado para converter páginas Razor e URLs em PDFs, bem como para ler, criar e manipular documentos PDF. O IronPDF permite ainda um controle mais detalhado do PDF, como adicionar cabeçalhos, rodapés, números de página, assinaturas digitais, senhas e recursos avançados de manipulação de PDF a documentos PDF existentes ou recém-criados. É gratuito para desenvolvimento, mas requer uma licença de avaliação gratuita ou uma licença comercial para produção.