Czym jest framework Blazor (samouczek dotyczący jego działania dla programistów)

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 wieloplatformowych 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 to punkt wejścia do aplikacji, który uruchamia serwer i w którym konfiguruje się usługi aplikacji oraz oprogramowanie pośredniczące.
• App.razor jest głównym komponentem aplikacji.
• Katalog Pages zawiera przykładowe strony internetowe dla aplikacji.
• Plik launchSettings.json znajdujący się w katalogu Properties definiuje różne ustawienia profilu dla lokalnego środowiska programistycznego. 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

Kod komponentu Counter możemy zobaczyć w pliku Counter.razor znajdującym się w folderze Pages naszego 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++;
    }
}

Żądanie /counter w przeglądarce, zgodnie z dyrektywą @page na górze, powoduje, że komponent Counter renderuje swoją zawartość.

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

• Wykonane zostaje zdarzenie onclick.
• Wywoływana jest metoda IncrementCount.
• currentCount jest zwiększany.
• Komponent jest renderowany w celu wyświetlenia zaktualizowanej liczby.

Każdy z plików .razor definiuje komponent interfejsu użytkownika, który można ponownie wykorzystać.

Otwórz plik Index.razor w programie Visual Studio. Plik Index.razor już istnieje, ponieważ został utworzony podczas tworzenia projektu. Znajduje się w folderze Pages w katalogu BlazorApp, który został utworzony wcześniej.

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 następujący 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);
    }
}

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 wprowadzania danych jest powiązane ze zmienną URL.

Teraz napiszmy kod po stronie serwera dla naszej aplikacji.

Otwórz plik WeatherForecastService.cs i zastąp cały istniejący kod poniższym fragmentem 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

$vbLabelText   $csharpLabel

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.