Este tutorial apresenta o MudBlazor e o IronPDF no contexto do .NET 8 para a criação de aplicações web. MudBlazor é uma biblioteca de componentes para projetos Blazor . Ele fornece uma variedade de componentes de interface do usuário para a criação de aplicativos Blazor do lado do cliente e do servidor. IronPDF é uma biblioteca que permite a criação, manipulação e leitura de documentos PDF em aplicações .NET .

Vamos abordar como instalar o MudBlazor, usar seus componentes para desenvolvimento web e integrar o IronPDF para funcionalidades de PDF. Este guia destina-se a iniciantes em Blazor e .NET , mas também será útil para desenvolvedores de nível intermediário que desejam aprender sobre MudBlazor e IronPDF.

Ao final deste tutorial, você saberá como configurar um aplicativo Blazor Server, integrar componentes MudBlazor e usar o IronPDF para trabalhar com arquivos PDF. O foco é no conhecimento prático para a criação de aplicações web modernas com o Visual Studio. Vamos começar configurando nosso ambiente e criando um novo projeto no .NET 8.

Primeiros passos com o MudBlazor

Configurando o MudBlazor em projetos .NET

Para usar o MudBlazor em seu projeto cliente ou projeto servidor, primeiro certifique-se de ter o .NET Framework instalado. Em seguida, crie um novo projeto Blazor na pasta de layout do cliente ou na pasta de layout do servidor, dependendo do seu modelo de hospedagem. Utilize a linha de comando ou o Visual Studio para isso. No Visual Studio, escolha o modelo de aplicativo Blazor .

Em seguida, adicione o MudBlazor ao seu projeto. Abra o terminal ou o Console do Gerenciador de Pacotes e execute o comando:

Install-Package MudBlazor

Este comando adiciona o MudBlazor ao seu projeto.

Depois de instalar o MudBlazor, vá para _Imports.razor. Adicione o seguinte:

@using MudBlazor

@using MudBlazor

Isso torna os componentes do MudBlazor disponíveis em seu projeto.

No wwwroot/index.html (ou Host.cshtml para projetos de servidor), adicione o CSS e JS do MudBlazor ao mesmo arquivo, garantindo que o modo de renderização interativa com as configurações de modelo padrão seja suportado. Inclua a seguinte linha:

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Além disso, adicione:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Esta etapa garante que os estilos e funcionalidades do MudBlazor funcionem corretamente no seu aplicativo.

Exemplo de código básico: Criando um botão simples no MudBlazor

Para demonstrar o MudBlazor em ação, vamos adicionar um botão simples a um componente. Abra um arquivo de componente Razor, como Index.razor. Adicione o seguinte código de botão do MudBlazor:

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

Este código inicia a criação de um botão que diz "Clique aqui". Ao ser clicado, ele registra uma mensagem no console, demonstrando a renderização do lado do servidor. As propriedades Variant e Color personalizam a aparência do botão.

Características do MudBlazor

Diálogos em MudBlazor

O componente de diálogo do MudBlazor simplifica a criação e o gerenciamento de diálogos. Primeiro, injete o IDialogService em seu componente:

@inject IDialogService DialogService

@inject IDialogService DialogService

Em seguida, utilize o seguinte método para abrir uma caixa de diálogo:

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

MyDialog é um componente Razor representando o conteúdo do diálogo. Você pode passar parâmetros com DialogParameters.

Grade de dados

O MudBlazor oferece um componente de grade de dados para exibir coleções. Suporta classificação, paginação e filtragem. Para usá-lo, vincule uma coleção à propriedade Items:

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

Formulários de entrada

Para entrada de formulários, o MudBlazor fornece vários componentes. Aqui está um exemplo usando MudTextField:

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

Abas

Para organizar o conteúdo com abas, use MudTabs. Defina cada aba com MudTabPanel:

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

Ícones

O MudBlazor integra-se com o Material Icons. Para usar um ícone, adicione um componente MudIcon:

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

Este código exibe um ícone de alarme. Os ícones aprimoram as interfaces do usuário, fornecendo pistas visuais.

Integração do IronPDF e do MudBlazor

IronPDF é uma biblioteca para C# que simplifica o processo de criação, edição e leitura de arquivos PDF em aplicações .NET . Destaca-se por exigir uma configuração mínima e por ser bastante simples em termos de conversão de HTML para PDF . Isso pode ser especialmente útil quando você deseja gerar relatórios ou faturas dinamicamente.

A melhor característica do IronPDF é sua capacidade de converter HTML em PDF , preservando o layout e o estilo originais. É ótimo para gerar PDFs a partir de conteúdo da web, como relatórios, faturas e documentação. Arquivos HTML, URLs e strings HTML são todos suportados para conversão em PDFs.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // 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");
        
        // 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");
        
        // 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();
        
        // 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");
        
        // 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");
        
        // Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' 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")

        ' 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")

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

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' 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")

        ' 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")

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

Use Case de Mesclagem do IronPDF com C# MudBlazor

MudBlazor é uma biblioteca de componentes para Blazor, repleta de widgets e ferramentas úteis para a criação de interfaces de usuário responsivas e interativas. Ao combinar os recursos de interface do usuário do MudBlazor com a geração de PDFs do IronPDF, você obtém um conjunto de ferramentas poderoso. Um caso de uso comum seria um aplicativo web que permite aos usuários criar documentos ou relatórios usando componentes do MudBlazor e, em seguida, com um clique, converter esses designs em PDFs para download usando o IronPDF.

Exemplo de código de caso de uso

Vamos analisar um exemplo básico onde criamos uma interface de usuário com MudBlazor e depois usamos o IronPDF para converter essa interface em um documento PDF.

Primeiro, certifique-se de que o MudBlazor e o IronPDF estejam instalados no seu projeto. Você pode fazer isso através do Gerenciador de Pacotes NuGet ou do Console do Gerenciador de Pacotes:

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

Etapa 1: Construindo a interface do usuário com MudBlazor

Na sua página Blazor , você pode adicionar componentes MudBlazor para criar a interface do usuário. Aqui está um formulário simples criado com MudBlazor:

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
    <!-- Add more components as needed -->
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
    <!-- Add more components as needed -->
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

Etapa 2: Implementando a geração de PDFs com o IronPDF

Agora, para integrar a funcionalidade de geração de PDF, vamos lidar com o método GeneratePDF. Esta função converterá nosso conteúdo HTML em um arquivo PDF:

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub

Neste exemplo simplificado, RenderHtmlAsPdf recebe uma string de conteúdo HTML e a converte em um PDF. Em uma aplicação completa, você pode gerar dinamicamente essa string HTML com base na entrada do usuário ou em outras fontes de dados.

Aqui está o resultado do código:

Conclusão

Este guia demonstra como usar o MudBlazor e o IronPDF com o .NET 8 para desenvolvimento web. O MudBlazor oferece componentes de interface do usuário para aplicativos Blazor , aprimorando as interfaces de usuário com o mínimo de código. O IronPDF permite a criação e manipulação de PDFs, sendo uma ferramenta indispensável para o gerenciamento de documentos em aplicativos .NET .

Por meio de instruções passo a passo, você aprenderá a integrar o MudBlazor em seus projetos, utilizar seus componentes e aproveitar o IronPDF para gerar PDFs a partir de conteúdo da web. Ideal tanto para iniciantes quanto para desenvolvedores de nível intermediário, este tutorial garante que você esteja bem preparado para criar aplicativos web modernos usando essas bibliotecas. Para aqueles interessados em explorar mais o IronPDF, um teste grátis começa a partir de $999.