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

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

更新済み 4月 29, 2024
共有:

このチュートリアルでは、 マッドブレイザー 以下のコンテンツを日本語に翻訳してください： IronPDF .NET 8を使用したWebアプリケーション構築のコンテキストで。 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" />.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
VB   C#

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

Additionally, add:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
VB   C#

このステップでは、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!");
    }
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudButton [Variant]="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick"> Click [Me] </MudButton> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private void ButtonClick()
'	{
'		Console.WriteLine("Button clicked!");
'	}
End If
VB   C#

このコードは「Click Me」と表示されるボタンのビルダー作成を開始します。 クリックすると、メッセージがコンソールに記録され、サーバーサイドレンダリングが実証されます。 Variant と Color プロパティはボタンの外観をカスタマイズします。

MudBlazorの機能

MudBlazorのダイアログ

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

@inject IDialogService DialogService
@inject IDialogService DialogService
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@inject IDialogService DialogService
VB   C#

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

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}
private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}
Private Sub OpenDialog()
	DialogService.Show(Of MyDialog)("My Dialog", New DialogParameters With {("Parameter1") = "Value1"})
End Sub
VB   C#

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 */;
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudTable Items="@myItems"> (Of HeaderContent) (Of MudTh) Header 1</MudTh> (Of MudTh) Header 2</MudTh> </HeaderContent> (Of RowTemplate) <MudTd DataLabel="Header 1"> context.Item1</MudTd> <MudTd DataLabel="Header 2"> context.Item2</MudTd> </RowTemplate> </MudTable> code
If True Then
	private List(Of MyItemType) myItems =
End If
VB   C#

![Mudblazor .NET 8

Mudblazor .NET 8 (開発者向けの仕組み): 図1](/static-assets/pdf/blog/mudblazor-net-8/mudblazor-net-8-1.webp)

入力フォーム

フォーム入力用に、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();
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudForm Model="@myModel"> <MudTextField Label="Enter text" [For]="@(() => myModel.Text)"></MudTextField> </MudForm> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public class MyModel
'	{
'		public string Text
'		{
'			get;
'			set;
'		}
'	}
	private MyModel myModel = New MyModel()
End If
VB   C#

タブ

コンテンツをタブで整理するには、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>
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<MudTabs> <MudTabPanel Text="Tab 1"> Content for Tab 1 </MudTabPanel> <MudTabPanel Text="Tab 2"> Content for Tab 2 </MudTabPanel> </MudTabs>
VB   C#

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

アイコン

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

<MudIcon Icon="@Icons.Material.Filled.Alarm" />
<MudIcon Icon="@Icons.Material.Filled.Alarm" />
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<MudIcon Icon="@Icons.Material.Filled.Alarm" />
VB   C#

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

IronPDFとMudBlazorの統合

IronPDF は、.NETアプリケーション内でPDFファイルの作成、編集、および読み取りのプロセスを簡素化するC#用のライブラリです。 目立っているのは、設定が最少で済み、変換に関してかなり簡単であるためです。 HTMLから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 = "";
}
Add -= 1
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <!-- Add more TryCast(components, needed) -- > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> @code
"Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> code
If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed)  > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick
"Variant.Filled" Color="Color.Primary" OnClick
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed)  > <MudButton @Variant="Variant.Filled" Color
"@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]="Variant.Filled" Color
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed)  > <MudButton @Variant
"Enter Report Title" bind-Value="@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value
"p-4"> <MudTextField Label="Enter Report Title" bind-Value
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label
"Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]="p-4"> <MudTextField Label
page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]
TryCast(components, needed) -= 1
	private String reportTitle = ""
End If
VB   C#

ステップ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");
}
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
VB   C#

この簡略化した例では、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から開始

< 以前
C# 参照（開発者向けの動作方法）
次へ >
開発者向けの揮発性C#（動作の仕組み）

問題を報告

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

無料のNuGetダウンロード 総ダウンロード数: 10,659,073 View Licenses >

無料で手に入れましょう

30日間の試用キー 即座に。

15日間のトライアルキー 即座に。

bullet_checkedクレジットカードやアカウント作成は不要です。
試用フォームが送信されました
成功しました。

あなたのトライアルキーはメールの中にあります。
お問い合わせは、
support@ironsoftware.com

バレットテスト本番環境でのテスト
透かしなし
バレットカレンダー30日間完全に
機能的な製品
弾丸_サポート24/5 テクニカル
体験期間中のサポート

ありがとう！

ライセンスキーが指定されたメールアドレスに送られました。お問い合わせ

24時間アップグレードオファー:

Save 50% で
プロフェッショナル アップグレード

Go プロフェッショナル 10人の開発者をカバーするために
無制限のプロジェクト。

時間

:

分

:

秒

プロフェッショナルにアップグレード

アップグレード

プロフェッショナル

$600 米ドル

$299 米ドル

  • 10人の開発者
  • 10 個のロケーション
  • 10プロジェクト
本日 以下の内容を日本語に翻訳してください: この操作を実行するには、最新のIronPDF for .NETをインストールする必要があります。インストール手順については、公式ウェブサイトのドキュメントを参照してください。

2つの価格で5つの.NET製品

IronPDF IronOCR IronXL IronBarcode IronWebscraper

総合スイート価値:

$7,192 米ドル

アップグレード価格

本日
以下の内容を日本語に翻訳してください: この操作を実行するには、最新のIronPDF for .NETをインストールする必要があります。インストール手順については、公式ウェブサイトのドキュメントを参照してください。

$499 米ドル

24時間後

$1,098 米ドル

無料トライアルを開始 無料トライアルを開始

完全に機能する製品、キーを即座に取得