Message icon
フッターコンテンツにスキップ
  1. IronPDF
  2. IronPDF ブログ
  3. .NETヘルプ
  4. blazor-hybrid-apps
.NETヘルプ

Blazor Hybrid Apps（開発者向けの動作方法）

Curtis Chau
Curtis Chau
更新日:

A .NET MAUI Blazor Hybrid app combines the cross-platform capabilities of .NET MAUI with the web development skills/capabilities of Blazor to create applications that can run natively on multiple platforms while sharing code and logic across them. This Blazor hybrid approach provides developers with flexibility, productivity, and the ability to reach a wider audience with their applications. A web developer can seamlessly create emulated mobile device apps with ease using web UI components. In this article, we will build a simple .NET MAUI Blazor Hybrid app using Visual Studio and also later see the IronPDF library overview from Iron Software's PDF Solutions to generate PDF documents.

How to Create .NET MAUI Blazor App to Generate PDF from a Website

  1. Create a new .NET MAUI Blazor Hybrid Project in Visual Studio
  2. Add IronPDF library to Generate PDF from Website URL
  3. Add code to Generate PDF using the IronPDF library

What is the .NET MAUI Blazor Hybrid App?

.NET MAUI Blazor app refers to an application built using .NET Multi-platform App UI (MAUI) and Blazor technologies. Let's break down these components:

.NET MAUI (Multi-platform App UI)

.NET MAUI is a framework for building cross-platform applications using .NET technologies and C#. It allows developers to write code once and deploy it on multiple platforms, including Windows, macOS, iOS mobile apps, and Android. .NET MAUI provides a single project structure and a unified API surface for developing applications across different platforms. It supports various UI components/elements, including controls, layouts, and navigation patterns, to create modern and responsive applications.

Blazor

Blazor is a web framework from Microsoft which allows developers to build interactive web development applications using C#. Blazor enables developers to write code that runs on the client side within the browser, as well as on the server side. Blazor applications can be developed using Razor syntax, which combines HTML markup with C# code, and they can leverage the power of .NET libraries and frameworks.

Hybrid App

A hybrid app combines elements of both native and web applications. In the context of .NET MAUI and Blazor, a hybrid app typically refers to an application that runs natively on various platforms (such as Windows, macOS, iOS, and Android) while also utilizing technologies (such as Blazor for UI rendering and business logic). This approach allows developers to leverage their existing skills in .NET and C# to build cross-platform applications that can take advantage of both native capabilities and web technologies.

Features of .NET MAUI Blazor Hybrid Apps

Cross-Platform Support

You can build your MAUI Blazor app once and deploy it across various devices without significant modifications. Blazor apps work as native apps for both Android and Apple devices.

.NET MAUI is engineered to provide robust support to create cross-platform apps in .NET technologies, encompassing Android, iOS, Windows, and macOS. This allows developers to create applications that seamlessly run on a wide array of devices without the need for significant modifications. A Blazor mobile app developed with .NET MAUI will behave like a native app on both Android and Apple devices.

Code and Component Sharing

One of the key advantages of .NET MAUI is its capability for code and UI components sharing across various platforms. This feature significantly reduces development time and effort, eliminating the necessity to rewrite code for each platform-specific feature. By sharing code and components, developers can streamline the development process and enhance code maintainability.

Native UI Controls

.NET MAUI Blazor Hybrid apps leverage native UI controls, ensuring a consistent and familiar user experience across different platforms. This allows developers to access platform-specific UI elements while maintaining a unified look and feel across all supported devices. By leveraging native UI controls or Web UI components, developers can create applications that feel native to each platform while maximizing code reuse.

Integration with Visual Studio

Visual Studio offers comprehensive tooling support for .NET MAUI development, empowering developers with a rich set of features for building, debugging, and managing their applications. With Visual Studio, developers can leverage familiar tools such as IntelliSense, debugging capabilities, and project management functionalities, enhancing productivity and efficiency throughout the development lifecycle.

Improved Performance

.NET MAUI Blazor Hybrid apps deliver enhanced performance compared to some other cross-platform solutions. The integration of Blazor and .NET MAUI ensures efficient execution of code, resulting in responsive and performant applications. By leveraging the power of the .NET runtime and native platform capabilities, developers can create applications that deliver a smooth and fluid user experience across various devices.

Hot Reload Support

.NET MAUI offers support for hot reload, allowing developers to instantly see changes during the development process without the need for recompilation or redeployment. This feature accelerates the development cycle, enabling developers to iterate quickly and efficiently. With hot reload support, developers can make real-time adjustments to their applications, accelerating the development process and improving overall productivity.

Advantages of Blazor Hybrid Apps with .NET MAUI

Single Codebase

Blazor Hybrid Apps with .NET MAUI enable developers to write their application's business logic and UI elements just once using C# and Blazor. This single codebase can then be deployed to multiple platforms without the need for extensive platform-specific adjustments, reducing development complexity and effort.

Reduced Development Time

By sharing code and components across platforms, developers can significantly reduce the time spent on development. Changes made in one place are reflected across all supported platforms, eliminating the need to write and maintain separate codebases for each platform. This streamlined development process translates into faster time-to-market and reduced development costs.

Maintenance Efficiency

With a single codebase for all platforms, maintenance becomes more straightforward and efficient. Bug fixes, updates, and enhancements can be applied uniformly to all supported platforms, ensuring consistency and reliability across the entire application. This simplifies the maintenance process and reduces the risk of introducing inconsistencies or errors across different versions of the application.

Access to Native APIs

Despite being based on web technologies, Blazor Hybrid Apps with .NET MAUI retain the capability to access native APIs when needed. This allows developers to leverage platform-specific features and functionalities seamlessly within their applications, providing a bridge between the capabilities of web-based frameworks and the native capabilities of each platform. By combining the power of Blazor with access to native APIs, developers can create feature-rich and versatile applications that cater to the unique requirements of each platform.

In summary, .NET MAUI Blazor Hybrid apps offer a seamless blend of web and native capabilities, making them efficient, easy to maintain, and suitable for cross-platform development.

Introducing IronPDF

Explore the IronPDF Library from Iron Software's PDF Solutions is a versatile library in the .NET world to generate, modify, and read PDF documents. IronPDF is a versatile cross-platform library that allows developers to create, edit, and sign PDF documents from various sources. Whether you’re working with HTML, images, or other document formats, IronPDF provides a comprehensive set of features for handling PDFs. Here are some key points about IronPDF:

  1. HTMLからPDFへの変換:

    IronPDF can convert HTML content (including CSS, images, and JavaScript) into PDF documents. You can render web pages, Razor views (Blazor Server), CSHTML (MVC), ASPX (WebForms), and XAML (MAUI) as PDFs.

  2. Pixel-Perfect Rendering:

    IronPDF ensures accurate rendering, maintaining the visual fidelity of your content. It supports UTF-8 character encoding, base URLs, asset encoding, and TLS website logins.

  3. Page Templates and Settings:

    Customize your PDFs by adding headers, footers, page numbers, and page breaks. Set responsive layouts, custom paper sizes, orientations, and color options.

  4. Editing and Annotations:

    Edit PDF metadata, sign documents, and apply digital signatures. Merge, split, add, copy, and delete pages within PDFs. Add annotations and form fields.

  5. Cross-Platform Support:

    IronPDF works on various platforms: .NET Core (8, 7, 6, 5, and 3.1+), .NET Standard (2.0+), .NET Framework (4.6.2+). It’s compatible with Windows, Linux, and macOS.

Step 1: Create a New .NET MAUI Blazor Hybrid Project in Visual Studio

Start as below by selecting Create New Project in Visual Studio and select .NET MAUI Blazor Hybrid App project template.

Blazor Hybrid Apps (How It Works For Developers): Figure 1 - .NET MAUI Blazor Hybrid App Template

Provide the project name and location details.

Blazor Hybrid Apps (How It Works For Developers): Figure 2 - Project Configuration

必要な.NETバージョンを選択します。 Click Create.

Blazor Hybrid Apps (How It Works For Developers): Figure 3 - Target Framework

Step 2: Add IronPDF library to Generate PDF from the Website URL

IronPDF library can be installed using a Visual Studio package manager like below.

Blazor Hybrid Apps (How It Works For Developers): Figure 4 - IronPDF

Also, it can be installed from NuGet Gallery.

Blazor Hybrid Apps (How It Works For Developers): Figure 5 - NuGet Gallery

dotnet add package IronPdf --version 2024.4.2

Step 3: Add Code to Generate PDF using IronPDF

Add the below code to the Home page to modify the existing autogenerated code to take URL input from the user and generate PDF documents.

@page "/"
@using IronPdf

<h1>Welcome to PDF Generator from Website URL</h1>
<p>Enter the Website URL to Generate PDF</p>
<input type="text" @bind="InputValue" placeholder="Enter URL" />
<p>Click to Generate PDF</p>
<button class="btn btn-primary" @onclick="GeneratePdf">Generate</button>

@code {
    // This property is bound to the input field for the user to enter the website URL
    private string? InputValue { get; set; }

    // This method is invoked when the "Generate" button is clicked
    // It uses IronPdf to generate a PDF from the URL entered by the user
    private void GeneratePdf()
    {
        // Check if the input value is not null or empty
        if (!string.IsNullOrWhiteSpace(InputValue))
        {
            // Render the URL as a PDF document
            var pdfDocument = HtmlToPdf.StaticRenderUrlAsPdf(InputValue);

            // Save the rendered PDF document to the specified location on the disk
            pdfDocument.SaveAs("C:\\temp\\output.pdf");
        }
    }
}

コードの説明

Here we are receiving the input from the user using a text input. They have a button to trigger the PDF generation. HtmlToPdf.StaticRenderUrlAsPdf static method is used to generate the PDF document. We ensure that the input is not null or empty before proceeding with the PDF generation, thereby adding a basic validation to the input.

When we run the application, we can see the below UI.

Blazor Hybrid Apps (How It Works For Developers): Figure 6 - PDF Generator UI

出力

Blazor Hybrid Apps (How It Works For Developers): Figure 7 - PDF Output

ライセンス (無料試用版のオファー)

A valid license key is necessary for IronPDF, place this into the appsettings.json file as follows:

{
  "IronPdf.LicenseKey": "your license key"
}

A free trial license key can be obtained by registering for a trial license using IronPDF's trial license registration page.

結論

Building a .NET MAUI Blazor Hybrid app offers a compelling solution for developers seeking to create cross-platform applications with the combined strengths of .NET MAUI and Blazor technologies. With robust cross-platform support, seamless code and component sharing, access to native UI controls, integration with Visual Studio, and enhanced performance, .NET MAUI Blazor Hybrid apps provide developers with the tools and capabilities needed to build modern, responsive, and feature-rich applications that run natively on various devices.

On the other hand, IronPDF is a tailor-made solution for generating PDF documents across multiple platforms like .NET MAUI Blazor Hybrid apps.

In summary, building a .NET MAUI Blazor Hybrid app and IronPDF enables developers to deliver high-quality applications that offer a consistent user experience across different platforms, while also benefiting from the productivity and flexibility of the .NET and Blazor ecosystems.

よくある質問

.NET MAUI Blazor Hybrid アプリの目的は何ですか？

.NET MAUI Blazor Hybrid アプリは、複数のプラットフォームでネイティブに動作する共有コードとロジックを使用してアプリケーションを構築できるようにし、.NET MAUIのクロスプラットフォーム機能とBlazorのWeb開発の強みを活用します。

.NET MAUI BlazorアプリでPDFドキュメントを生成するにはどうすればよいですか？

.NET MAUI Blazorアプリでは、IronPDFライブラリを統合することでPDFドキュメントを生成できます。これにより、さまざまなプラットフォームでHTMLからPDFへの変換、編集、およびレンダリングがサポートされます。

Visual Studioを使用して.NET MAUI Blazor Hybridアプリを作成する手順は何ですか？

.NET MAUI Blazor Hybrid アプリを作成するには、Visual Studioを開き、.NET MAUI Blazor Hybridアプリテンプレートを選択し、プロジェクト設定を構成し、希望する.NETバージョンを選択して、プロジェクト環境を初期化します。

IronPDFライブラリはBlazorアプリのPDF機能をどのように強化しますか？

IronPDFライブラリは、開発者がHTMLをPDFに変換し、PDFを編集し、正確にレンダリングすることを可能にすることで、PDF機能を強化します。これはクロスプラットフォーム使用をサポートしており、.NET MAUI Blazorアプリに最適です。

クロスプラットフォーム開発における.NET MAUIの利点は何ですか？

.NET MAUIは、一度コードを書くだけで、Windows、macOS、iOS、Androidなどの複数のプラットフォームに展開できる利点を提供し、ネイティブAPIおよびUIコントロールにアクセスして一貫したユーザーエクスペリエンスを実現します。

.NET MAUI BlazorアプリにIronPDFライブラリを追加する方法は？

IronPDFライブラリは、Visual Studioのパッケージマネージャ経由、またはNuGet Galleryからdotnet add package IronPdf --version 2024.4.2コマンドを実行することで追加できます。

ハイブリッドアプローチはアプリ開発にどのような利点を提供しますか？

ハイブリッドアプローチは、開発時間の短縮、コードとコンポーネントの共有、ネイティブAPIへのアクセスを可能にし、ネイティブのUIコントロールと改善されたパフォーマンスでさまざまなプラットフォームでシームレスなユーザーエクスペリエンスを提供します。

BlazorアプリでPDFを扱う開発者にとってIronPDFを使用する利点は何ですか？

IronPDFは、HTMLからPDFへの変換やピクセルパーフェクトなレンダリングを含め、PDFの生成、修正、および読み取りに関する強力なツールを提供するため、Blazorアプリの機能を向上させるため有益です。

.NET MAUI Blazor Hybrid アプリでは、Blazor はどのような役割を果たしますか？

Blazorは、開発者がC#を使用してインタラクティブなWebアプリケーションを構築できるようにし、クライアント側とサーバー側の両方でコードを実行し、.NETライブラリと統合することで.NET MAUI Blazor Hybridアプリの開発を強化します。

.NET MAUI Blazor Hybridは開発生産性をどのように向上させますか？

.NET MAUI Blazor Hybridは、複数のプラットフォーム向けに共有コードを書き、ネイティブUIコントロールを使用し、ホットリロードで再コンパイルせずにリアルタイムでの調整を可能にすることで生産性を向上させます。

Curtis Chau
Curtis Chau
  今すぐエンジニアリングチームとチャット
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

関連する記事

30日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアルを開始