Blazor to framework ASP.NET wprowadzony przez Microsoft w 2018 roku. Wprowadzenie frameworka Blazor było korzystne, ponieważ umożliwiło programistom tworzenie jednostronicowych aplikacji internetowych przy użyciu języka C# zamiast JavaScript.

Blazor pozwala tworzyć interaktywne interfejsy użytkownika w sieci Web przy użyciu języka C#, które działają w przeglądarce dzięki WebAssembly (w skrócie Wasm). Aplikacje Blazor składają się z komponentów interfejsu użytkownika, które można ponownie wykorzystać, zaimplementowanych przy użyciu C#, HTML i CSS. Zarówno kod klienta, jak i serwera jest napisany w języku C#, co pozwala na współdzielenie kodu i bibliotek.

Blazor może uruchamiać kod C# po stronie klienta bezpośrednio w przeglądarce przy użyciu WebAssembly. Ponieważ jest to .NET działający na WebAssembly, możesz ponownie wykorzystać kod i biblioteki z części aplikacji po stronie serwera.

Alternatywnie, Blazor może uruchamiać logikę klienta na serwerze. Zdarzenia interfejsu użytkownika klienta są wysyłane z powrotem do serwera za pomocą SignalR, frameworka do komunikacji w czasie rzeczywistym. Po zakończeniu wykonywania wymagane zmiany w interfejsie użytkownika są wysyłane do klienta i scałane z modelem obiektowym dokumentu (DOM).

Czym jest WebAssembly?

Blazor WebAssembly to framework aplikacji jednostronicowych (SPA) służący do tworzenia interaktywnych aplikacji internetowych po stronie klienta przy użyciu platformy .NET. Blazor WebAssembly wykorzystuje otwarte standardy internetowe, które umożliwiają tworzenie oprogramowania bez wtyczek i bez konieczności rekompilacji kodu na inne języki. Blazor WebAssembly działa we wszystkich nowoczesnych przeglądarkach internetowych.

Uruchamianie kodu .NET w przeglądarkach internetowych jest możliwe dzięki WebAssembly. WebAssembly to kompaktowy format kodu bajtowego zoptymalizowany pod kątem szybkiego pobierania i maksymalnej prędkości wykonywania. WebAssembly to otwarty standard internetowy obsługiwany przez przeglądarki internetowe bez konieczności instalowania wtyczek.

Kod WebAssembly może uzyskać dostęp do pełnej funkcjonalności przeglądarki za pośrednictwem JavaScript. Znana jako JavaScript Interoperability, często jest skracana do JavaScript interop lub JS interop. Kod .NET wykonywany za pośrednictwem WebAssembly działa w piaskownicy JavaScript przeglądarki, korzystając z zabezpieczeń, jakie zapewnia ona przed złośliwymi działaniami na komputerze klienta.

Twórz aplikacje natywne

Możemy tworzyć natywne aplikacje klienckie przy użyciu istniejących komponentów interfejsu użytkownika Blazor Web UI w ramach Blazor Hybrid. Komponenty Blazor mogą być współdzielone między urządzeniami mobilnymi, komputerami stacjonarnymi i stronami internetowymi, przy jednoczesnym wykorzystaniu pełnego dostępu do natywnych możliwości klienta. Możemy używać Blazor Hybrid do tworzenia aplikacji wielopłatformowych z wykorzystaniem .NET Multi-platform App UI (MAUI) lub do modernizacji istniejących aplikacji Windows Presentation Foundation (WPF) i Windows Forms.

W aplikacji Blazor Hybrid komponenty Razor działają natywnie na urządzeniu. Komponenty są renderowane do wbudowanego kontrolki Web View poprzez lokalny kanał interoperacyjności. Komponenty nie działają w przeglądarce i nie wykorzystują technologii WebAssembly. Komponenty Razor szybko ładują i wykonują kod, a dzięki platformie .NET mają pełny dostęp do natywnych możliwości urządzenia.

Stwórzmy aplikację demonstracyjną, aby lepiej zrozumieć, jak działają aplikacje Blazor.

Utwórz aplikację serwerową Blazor

Aby stworzyć naszą pierwszą aplikację Blazor, musimy utworzyć nowy projekt w Visual Studio.

• Otwórz program Visual Studio.
• Kliknij przycisk Utwórz nowy projekt.
• Wybierz szablon aplikacji Blazor Server.
• Kliknij przycisk Dalej.
• Nadaj nazwę swojej aplikacji.
• Kliknij przycisk Dalej.
• Wybierz docelowy framework.
• Kliknij przycisk Utwórz projekt.

Zostanie utworzony nowy projekt, jak pokazano poniżej.

Utworzono kilka plików, aby zapewnić prostą aplikację Blazor gotową do uruchomienia.

• Program.cs jest punktem wejścia dla aplikacji, który uruchamia serwer i gdzie konfiguruje się usługi aplikacji i oprogramowanie pośrednie.
• App.razor jest głównym komponentem aplikacji.
• Katalog Pages zawiera przykładowe strony internetowe dla aplikacji.
• Plik launchSettings.json wewnątrz katalogu Properties definiuje różne ustawienia profilu dla lokalnego środowiska deweloperskiego. Numer portu jest automatycznie przypisywany podczas tworzenia projektu i zapisywany w tym pliku.

Uruchom tę aplikację szablonową.

Uruchamianie aplikacji Blazor

W szablonie automatycznie tworzone są trzy komponenty Blazor.

Komponent Home

Kliknij na Licznik w menu bocznym. Zauważysz, że kliknięcie przycisku powoduje zwiększenie licznika bez zmiany lub ponownego ładowania strony. Dynamiczne zwiększanie licznika w aplikacji internetowej zazwyczaj wymaga użycia JavaScript, ale dzięki Blazorowi możemy to osiągnąć za pomocą języka C#. To właśnie dlatego programiści ASP.NET tak bardzo lubią Blazor. Pomaga programistom .NET w szybkim i łatwym tworzeniu aplikacji internetowych.

Komponent licznika

Możemy zobaczyć kod komponentu Counter w pliku Counter.razor znajdującym się w folderze Pages naszej rozwiązania.

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

Żądanie dla /counter w przeglądarce, jak określono w dyrektywie @page u góry, powoduje renderowanie zawartości komponentu Counter.

Za każdym razem, gdy zostanie wybrany przycisk "Kliknij mnie":

• Wykonywane jest zdarzenie onclick.
• Wywoływana jest metoda IncrementCount.
• currentCount jest inkrementowany.
• Komponent jest renderowany w celu wyświetlenia zaktualizowanej liczby.

Każdy z plików .razor definiuje komponent UI, który można ponownie używać.

Otwórz plik Index.razor w programie Visual Studio. Plik Index.razor już istnieje, ponieważ został utworzony, gdy tworzono projekt. Znajduje się on w folderze Pages wewnątrz katalogu BlazorApp, który został utworzony wcześniej.

Komponent Fetch

Istnieje jeszcze jeden komponent o nazwie "Fetch Component". Ten komponent wstrzykuje również usługę używaną do programowania po stronie serwera. Zastąpmy ten kod, aby wygenerować plik PDF z adresu URL i lepiej zrozumieć możliwości tworzenia stron internetowych w Blazorze.

Generuj plik PDF z adresu URL

Przede wszystkim musimy zainstalować bibliotekę innej firmy do generowania plików PDF. Biblioteka, z której będziemy korzystać, to IronPDF – generowanie plików PDF dla platformy .NET. Jest łatwy w użyciu, zawiera wiele funkcji i jest bezpłatny dla programistów. Więcej informacji na temat korzystania z IronPDF w aplikacji Blazor można znaleźć w dokumentacji IronPDF Blazor.

Zainstaluj pakiet IronPDF NuGet

Możemy również zainstalować pakiet IronPDF NuGet w aplikacji Blazor WebAssembly, podobnie jak w zwykłej aplikacji ASP.NET Core.

Otwórz konsolę menedżera pakietów NuGet i wpisz następujące polecenie:

Install-Package IronPdf

Biblioteka zostanie zainstalowana w sposób przedstawiony poniżej.

Usuń cały istniejący kod z pliku FetchData.razor i dodaj poniższy przykład kodu:

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="GeneratePDF">Generate PDF</button>

@code {
    private string URL { get; set; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="GeneratePDF">Generate PDF</button>

@code {
    private string URL { get; set; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

Powyżej znajduje się kod Blazor po stronie klienta służący do generowania plików PDF. Definiuje jeden przycisk i jedno pole wprowadzania danych. Pole wejściowe jest powiązane ze zmienną URL.

Teraz napiszmy kod po stronie serwera dla naszej aplikacji.

Otwórz plik WeatherForecastService.cs i zamień cały istniejący kod na poniższy fragment kodu:

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

Uruchommy naszą aplikację, aby zobaczyć wynik.

Wklej adres URL w polu wprowadzania danych i kliknij Generuj PDF. Plik PDF zostanie wygenerowany i będzie dostępny w folderze aplikacji.

Otwórz plik PDF, jak pokazano poniżej.

Wygenerowaliśmy plik PDF z adresu URL za pomocą zaledwie trzech linii kodu. Oto potęga IronPDF.

IronPDF jest dostarczany przez firmę Iron Software i stanowi część pakietu produktów Iron Suite firmy Iron Software. Kupując pełny pakiet Iron Suite, możesz zaoszczędzić pieniądze i nabyć pięć produktów za cenę dwóch.

Podsumowanie

Blazor to framework służący do tworzenia interaktywnych interfejsów użytkownika po stronie klienta przy użyciu platformy .NET Framework firmy Microsoft.

• Twórz bogate, interaktywne interfejsy użytkownika przy użyciu języka C# zamiast JavaScript.
• Udostępniaj logikę aplikacji po stronie serwera i klienta napisaną w .NET.
• Przerenderuj interfejs użytkownika jako HTML i CSS, aby zapewnić obsługę szerokiej gamy przeglądarek, w tym przeglądarek mobilnych.
• Integracja z nowoczesnymi platformami hostingowymi, takimi jak Docker.
• Twórz hybrydowe aplikacje desktopowe i mobilne za pomocą .NET i Blazor.

Wykorzystanie platformy .NET do tworzenia stron internetowych po stronie klienta oferuje następujące korzyści:

• Napisz kod w języku C# zamiast JavaScript.
• Wykorzystaj istniejący ekosystem bibliotek .NET.
• Współdziel logikę aplikacji między serwerem a klientem.
• Skorzystaj z wydajności, niezawodności i bezpieczeństwa platformy .NET.
• Zachowaj wydajność w systemach Windows, Linux lub macOS dzięki środowisku programistycznemu, takiemu jak Visual Studio lub Visual Studio Code.
• Oparta na wspólnym zestawie języków, frameworków i narzędzi, które są stabilne, bogate w funkcje i łatwe w użyciu.