Mudblazor .NET 8（开发人员如何使用）

在.NET项目中设置MudBlazor

要在您的客户端项目或服务器项目中使用MudBlazor，首先，请确保已安装.NET Framework。 然后，根据您的托管模式，在客户端布局文件夹或服务器布局中创建新的Blazor项目。 为此，使用命令行或Visual Studio。 在Visual Studio中，选择Blazor App模板。

接下来，将MudBlazor添加到您的项目中。 打开终端或Package Manager Console并运行命令：

Install-Package MudBlazor

此命令将MudBlazor添加到您的项目中。

安装MudBlazor后，进入_Imports.razor。 添加以下内容：

@using MudBlazor

这使得MudBlazor组件在您的项目中可用。

在wwwroot/index.html（或对于服务器项目使用Host.cshtml）中，将MudBlazor的CSS和JS添加到同一文件中，以确保支持默认模板设置的交互式渲染模式。 包含以下行：

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

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

还请添加：

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

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

此步骤确保MudBlazor的样式和功能在您的应用中正常工作。

一个基本的代码示例：构建一个简单的MudBlazor按钮

为显示MudBlazor的实际应用，我们添加一个简单的按钮到组件中。 打开Razor组件文件，例如Index.razor。 添加以下MudBlazor按钮代码：

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

此代码开始创建一个名为"Click Me"的按钮。 点击时，它会在控制台中记录一条消息，显示服务器端渲染。 Variant和Color属性可以自定义按钮的外观。

MudBlazor中的对话框

MudBlazor的对话框组件简化了对话框的创建和管理。 首先，在组件中注入IDialogService：

@inject IDialogService DialogService

然后，使用以下方法打开一个对话框：

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

MyDialog是代表对话框内容的Razor组件。 您可以通过DialogParameters传递参数。

数据网格

MudBlazor提供了一个用于显示集合的数据网格组件。 它支持排序、分页和过滤。 要使用它，请将集合绑定到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 */;
}

输入表单

对于表单输入，MudBlazor提供了各种组件。 这里是一个使用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();
}

选项卡

要使用选项卡来组织内容，请使用MudTabs。 使用MudTabPanel定义每个选项卡：

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

图标

MudBlazor与Material Icons集成。 要使用图标，添加MudIcon组件：

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

此代码显示了一个警报图标。 图标通过提供视觉提示增强用户界面。

将IronPDF与C# MudBlazor合并的用例

MudBlazor是一个用于Blazor的组件库，提供许多用于构建响应式和交互式用户界面的有用部件和工具。 当您将MudBlazor的UI功能与IronPDF的PDF生成相结合时，您将获得一个强大的工具包。 一个常见的用例可能是一个网络应用程序，允许用户使用MudBlazor组件设计文档或报告，然后，通过点击按钮，将这些设计转换为使用IronPDF可下载的PDFs。

用例的代码示例

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