Mudblazor .NET 8 (How It Works For Developers)

Setting Up MudBlazor in .NET Projects

To use MudBlazor in your client project or server project, first, ensure you have the .NET Framework installed. Then, create a new Blazor project in the client layout folder or server layout, depending on your hosting models. Use the command line or Visual Studio for this. In Visual Studio, choose the Blazor App template.

Next, add MudBlazor to your project. Open the terminal or Package Manager Console and run the command:

Install-Package MudBlazor

This command adds MudBlazor to your project.

After installing MudBlazor, go to _Imports.razor. Add the following:

@using MudBlazor

This makes MudBlazor components available in your project.

In wwwroot/index.html (or Host.cshtml for server projects), add MudBlazor's CSS and JS to the same file, ensuring interactive render mode with default template settings is supported. Include the following line:

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

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

Also, add:

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

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

This step ensures MudBlazor's styles and functionalities work in your app.

A Basic Code Example: Building a Simple MudBlazor Button

To demonstrate MudBlazor in action, let's add a simple button to a component. Open a Razor component file, like Index.razor. Add the following MudBlazor button code:

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

This code initiates the creation of a button that says "Click Me". When clicked, it logs a message to the console, demonstrating server-side rendering. The Variant and Color properties customize the button's appearance.

Dialogs in MudBlazor

MudBlazor's dialog component simplifies creating and managing dialogs. First, inject the IDialogService in your component:

@inject IDialogService DialogService

Then, use the following method to open a dialog:

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

MyDialog is a Razor component representing the dialog content. You can pass parameters with DialogParameters.

Data Grid

MudBlazor offers a data grid component for displaying collections. It supports sorting, paging, and filtering. To use it, bind a collection to the Items property:

<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 */;
}

Input Forms

For form inputs, MudBlazor provides various components. Here is an example using 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();
}

Tabs

To organize content with tabs, use MudTabs. Define each tab with MudTabPanel:

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

Icons

MudBlazor integrates with Material Icons. To use an icon, add a MudIcon component:

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

This code displays an alarm icon. Icons enhance user interfaces by providing visual cues.

Use Case of merging IronPDF with C# MudBlazor

MudBlazor is a component library for Blazor, full of useful widgets and tools for building responsive and interactive UIs. When you combine MudBlazor’s UI capabilities with IronPDF’s PDF generation, you get a powerful toolkit. A common use case could be a web application that allows users to design documents or reports using MudBlazor components, and then, with the click of a button, convert these designs into downloadable PDFs using IronPDF.

Code Example of Use Case

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" />

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