.NET ヘルプ

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

公開済み 2024年4月29日

共有:

このチュートリアルでは、マッドブレイザー以下のコンテンツを日本語に翻訳してください：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へ. これは、レポートや請求書を動的に生成する際に特に便利です。

HTML to PDF seamlessly.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");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

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

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

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

VB C#

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#（動作の仕組み）