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の動作を示すために、コンポーネントに単純なボタンを追加しましょう。 Razorコンポーネントファイルを開き、たとえばIndex.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" />
    <!-- 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");
}

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