Mudblazor .NET 8 (Cómo Funciona para Desarrolladores)

Instalación de MudBlazor en proyectos .NET

Para usar MudBlazor en tu proyecto cliente o de servidor, primero asegúrate de tener instalado el .NET Framework. Luego, crea un nuevo proyecto Blazor en la carpeta de diseño del cliente o diseño del servidor, dependiendo de tus modelos de alojamiento. Usa la línea de comandos o Visual Studio para esto. En Visual Studio, elige la plantilla de aplicación Blazor.

A continuación, añade MudBlazor a tu proyecto. Abre el terminal o la Consola del Administrador de Paquetes y ejecuta el comando:

Install-Package MudBlazor

Este comando añade MudBlazor a tu proyecto.

Después de instalar MudBlazor, dirígete a _Imports.razor. Añade lo siguiente:

@using MudBlazor

Esto hace que los componentes de MudBlazor estén disponibles en tu proyecto.

En wwwroot/index.html (o Host.cshtml para proyectos de servidor), añade el CSS y JS de MudBlazor al mismo archivo, asegurando el modo de renderizado interactivo con la configuración de plantilla predeterminada. Incluye la siguiente línea:

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

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

También, añade:

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

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

Este paso garantiza que los estilos y funcionalidades de MudBlazor funcionen en tu aplicación.

Un ejemplo de código básico: Construyendo un simple botón MudBlazor

Para demostrar MudBlazor en acción, añadamos un botón simple a un componente. Abre un archivo de componente Razor, como Index.razor. Añade el siguiente código para el botón MudBlazor:

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

Este código inicia la creación de un botón que dice "Haz Clic". Cuando se hace clic, registra un mensaje en la consola, demostrando el renderizado del lado del servidor. Las propiedades Variant y Color personalizan la apariencia del botón.

Diálogos en MudBlazor

El componente de diálogo de MudBlazor simplifica la creación y gestión de diálogos. Primero, inyecta el IDialogService en tu componente:

@inject IDialogService DialogService

Luego, utiliza el siguiente método para abrir un diálogo:

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

MyDialog es un componente Razor que representa el contenido del diálogo. Puedes pasar parámetros con DialogParameters.

Red de datos

MudBlazor ofrece un componente de cuadrícula de datos para mostrar colecciones. Soporta ordenamiento, paginación y filtrado. Para usarlo, vincula una colección a la propiedad 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 */;
}

Formularios de entrada

Para entradas de formulario, MudBlazor proporciona varios componentes. Aquí hay un ejemplo 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();
}

Tablas

Para organizar contenido con pestañas, usa MudTabs. Define cada pestaña con MudTabPanel:

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

Iconos

MudBlazor se integra con Material Icons. Para usar un icono, añade un componente MudIcon:

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

Este código muestra un icono de alarma. Los iconos mejoran las interfaces de usuario proporcionando señales visuales.

Caso de uso de la fusión de IronPDF con C# MudBlazor

MudBlazor es una biblioteca de componentes para Blazor, llena de widgets y herramientas útiles para construir interfaces de usuario receptivas e interactivas. Cuando combinas las capacidades de interfaz de usuario de MudBlazor con la generación de PDF de IronPDF, obtienes un poderoso conjunto de herramientas. Un caso de uso común podría ser una aplicación web que permita a los usuarios diseñar documentos o informes usando componentes MudBlazor y luego, con el clic de un botón, convertir esos diseños en PDFs descargables utilizando IronPDF.

Ejemplo de código del caso de uso

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

@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 = "";
}

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");
}