Mudblazor .NET 8（開発者向けの動作方法）

.NETプロジェクトでのMudBlazorの設定

MudBlazorをクライアントプロジェクトまたはサーバープロジェクトで使用するには、まず.NET Frameworkがインストールされていることを確認してください。 次に、ホスティングモデルに応じて、クライアントレイアウトフォルダーまたはサーバーレイアウトで新しいBlazorプロジェクトを作成します。 これにはコマンドラインまたはVisual Studioを使用します。 Visual StudioでBlazor Appテンプレートを選択します。

次に、プロジェクトにMudBlazorを追加します。 ターミナルまたはパッケージマネージャーコンソールを開き、コマンドを実行します。

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の動作を示すために、コンポーネントに単純なボタンを追加しましょう。 Index.razor のようなRazorコンポーネント ファイルを開きます。 以下のMudBlazorボタンコードを追加します。

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

このコードは"クリックしてくれ"というボタンを作成します。 クリックするとメッセージがコンソールに記録され、サーバーサイドレンダリングが示されます。 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はマテリアルアイコンと統合されています。 アイコンを使用するには、MudIcon コンポーネントを追加します。

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

このコードはアラームアイコンを表示します。 アイコンは視覚的なキューを提供することでユーザーインターフェースを強化します。

C# MudBlazorでのIronPDFとの統合のユースケース

MudBlazorはBlazorのコンポーネントライブラリで、レスポンシブでインタラクティブなUIを構築するための便利なウィジェットとツールが満載です。 MudBlazorのUI機能とIronPDFのPDF生成を組み合わせることで強力なツールキットが得られます。 一般的なユースケースとしては、MudBlazorコンポーネントを使用してドキュメントやレポートを設計し、ボタンをクリックするだけでこれらのデザインをIronPDFを使用してダウンロード可能なPDFに変換するWebアプリケーションがあります。

ユースケースのコード例

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