メッセージアイコン
  1. IronPDF
  2. IronPDFブログ
  3. .NET ヘルプ
  4. mudblazor-net-8
.NET ヘルプ

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

Kannaopat Udonpant
カンナパット・ウドンパント
2024年4月29日
共有:

このチュートリアルでは、Webアプリケーションを構築するための.NET 8のコンテキストでMudBlazorおよびIronPDFを紹介します。 MudBlazorはBlazorプロジェクト向けのコンポーネントライブラリです。 それは、クライアントサイドおよびサーバーサイドのBlazorアプリケーションを構築するためのさまざまなUIコンポーネントを提供します。 IronPDFは、.NETアプリケーションでPDF文書の作成、操作、および読み取りを可能にするライブラリです。

MudBlazorをインストールし、そのコンポーネントをウェブ開発で使用し、IronPDFを統合してPDF機能を実装する方法について説明します。 このガイドは、Blazorと.NETの初心者を対象としていますが、MudBlazorとIronPDFについて学びたい中級開発者にも役立ちます。

このチュートリアルの終わりまでに、Blazor Serverアプリケーションの設定方法、MudBlazorコンポーネントの統合方法、およびIronPDFを使用したPDFファイルの処理方法を学ぶことができます。 焦点は、Visual Studioを使用して最新のWebアプリケーションを構築するための実践的な知識にあります。 環境を設定し、.NET 8で新しいプロジェクトを作成することから始めましょう。

MudBlazorの使い始め

.NETプロジェクトでMudBlazorを設定する

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

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

MudBlazorをインストールした後、_Imports.razorに移動してください。 @using MudBlazor を追加します。 これによってMudBlazorコンポーネントがあなたのプロジェクトで利用可能になります。

wwwroot/index.html（またはサーバープロジェクトのHost.cshtml）に、MudBlazorのCSSとJSを同じファイルに追加し、デフォルトのテンプレート設定でインタラクティブなレンダーモードがサポートされることを確認してください。 以下の行を含めてください:

IronPDFは、簡単にPDFドキュメントを生成、読み込み、編集できる.NETライブラリです。IronOCRは、画像やPDFから高精度に文字を抽出するOCRツールです。IronXLを使えば、Excelファイルの読み書きが容易になります。IronBarcodeは、バーコードの生成および読み取りに最適です。IronQRは、QRコードの生成とデコードを提供します。IronZIPは、圧縮と解凍のための高度なZIP操作をサポートします。IronPrintは、プリンティング機能を豊富に持つライブラリで、IronWordはWord文書の編集に役立ちます。IronWebScraperは、ウェブサイトからデータを抽出するための強力なツールです。Iron Softwareの各製品は、開発者にとって必要不可欠な多彩な機能を提供します。

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

以下を日本語に翻訳してください：

Additionally, add:

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

このステップでは、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!");
    }
}
<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のダイアログ

MudBlazorのダイアログコンポーネントは、ダイアログの作成と管理を簡素化します。 まず、コンポーネントにIDialogServiceを注入します：

@inject IDialogService DialogService
@inject IDialogService DialogService

次に、以下のメソッドを使用してダイアログを開いてください:

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}
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 */;
}
<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 .NET 8（開発者向け動作概要）：図1

入力フォーム

フォーム入力用に、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();
}
<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>
<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

Mudblazor .NET 8（開発者向けの仕組み）：図2

アイコン

MudBlazorはMaterial Iconsと統合されます。 アイコンを使用するには、MudIconコンポーネントを追加します:

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

このコードは警報アイコンを表示します。 アイコンは視覚的なキューを提供することでユーザーインターフェースを向上させる。

IronPDFとMudBlazorの統合

IronPDFは、.NETアプリケーション内でPDFファイルの作成、編集、読み取りを簡素化するC#用のライブラリです。 それは最小限のセットアップを必要とし、HTMLをPDFに変換するに関して非常に簡単であるため際立っています。 これは、レポートや請求書を動的に生成する際に特に便利です。

IronPDFの最大の特長は、HTMLをPDFに変換し、元のレイアウトとスタイルを保持できることです。 ウェブコンテンツ（レポート、請求書、文書など）からPDFを生成するのに非常に適しています。 HTMLファイル、URL、およびHTML文字列はすべて、PDFへの変換に対応しています。

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}
using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

C# MudBlazorでIronPDFを統合するユースケース

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

使用例のコード例

基本的な例を見ていきましょう。まずMudBlazorを使用してUIを構築し、その後IronPDFを使用してこのUIをPDFドキュメントに変換します。

まず、プロジェクトにMudBlazorとIronPDFがインストールされていることを確認してください。 これを NuGet パッケージ マネージャーまたはパッケージ マネージャー コンソールで行うことができます。

Install-Package MudBlazor
Install-Package IronPdf

ステップ1：MudBlazorを使用してUIを構築

Blazorページでは、UIを作成するためにMudBlazorコンポーネントを追加できます。 以下はMudBlazorで作成されたシンプルなフォームです:

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

ステップ2: IronPDFを使用したPDF生成の実装

さて、PDF生成機能を統合するには、GeneratePDFメソッドを扱います。 この機能はHTMLコンテンツを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 void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

この簡易な例では、RenderHtmlAsPdfはHTMLコンテンツの文字列を受け取り、それをPDFに変換します。 フルアプリケーションでは、ユーザーの入力や他のデータソースに基づいて、このHTML文字列を動的に生成することがあります。

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

以下はコードの出力です：

Mudblazor .NET 8 (開発者向け動作方法): 図4

結論

Mudblazor .NET 8（開発者向けの使用方法）：図5

このガイドでは、.NET 8を使用したウェブ開発のためのMudBlazorとIronPDFの使用方法を説明します。 MudBlazorは、Blazorアプリケーション用のUIコンポーネントを提供し、最小限のコードでユーザーインターフェースを強化します。 IronPDFはPDFの作成と操作を可能にし、.NETアプリ内のドキュメント管理において非常に貴重です。

段階的な手順を通じて、MudBlazorをプロジェクトに統合し、そのコンポーネントを利用して、IronPDFを活用してウェブコンテンツからPDFを生成する方法を学びます。 初心者および中級開発者の両方に最適なこのチュートリアルは、これらのライブラリを使用して現代的なウェブアプリケーションを構築するための十分な備えを保証します。 IronPDFをさらに詳しく調べたい方のために、無料トライアルが$749から始まります。

Kannaopat Udonpant
カンナパット・ウドンパント
  今すぐエンジニアリングチームとチャット
ソフトウェアエンジニア
ソフトウェアエンジニアになる前に、カンナパットは日本の北海道大学から環境資源学の博士号を取得しました。学位を取得する過程で、カンナパットはバイオプロダクション工学部に所属する車両ロボティクス研究所のメンバーにもなりました。2022年には、C#のスキルを活かしてIron Softwareのエンジニアリングチームに参加し、IronPDFに注力しています。カンナパットは、IronPDFで使用されているコードの大部分を作成した開発者から直接学べることに価値を見いだしています。同僚との学び合いに加えて、Iron Softwareで働くことの社会的側面も楽しんでいます。コードやドキュメントを書いていない時には、カンナパットは通常、PS5でゲームをしたり、『The Last of Us』を再視聴したりしています。
< 以前
C# 参照（開発者向けの動作方法）
次へ >
開発者向けの揮発性C#（動作の仕組み）

問題を報告

準備はできましたか？ バージョン: 2025.3 新発売

無料で始める
NuGet ダウンロード DLLダウンロード Windowsインストーラ 無料トライアルを開始
ライセンスを表示 >
Experience the full power of IronPDF 無料トライアルを開始
Textlogo Iron Suite related to Mudblazor .NET 8（開発者向けの動作方法）

IronPDF は IRONSUITE の一部です。

10 .NET API製品オフィスドキュメントのために

2つの価格で10製品を手に入れよう   無料トライアルを開始