{"id":271,"date":"2023-04-30T09:58:34","date_gmt":"2023-04-30T08:58:34","guid":{"rendered":"https:\/\/crispycode.net\/?p=271"},"modified":"2023-05-14T10:03:05","modified_gmt":"2023-05-14T09:03:05","slug":"was-ist-blazor","status":"publish","type":"post","link":"https:\/\/crispycode.net\/de\/was-ist-blazor\/","title":{"rendered":"Was ist Blazor? Das Web-Framework f\u00fcr moderne .NET und C# Anwendungen"},"content":{"rendered":"\n<div class=\"wp-block-media-text is-stacked-on-mobile is-image-fill\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/was-ist-blazor.png);background-position:53% 89%\"><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"696\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/was-ist-blazor.png\" alt=\"Blazor Logo mit der Frage &quot;Was ist Blazor?&quot;\" class=\"wp-image-224 size-full\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/was-ist-blazor.png 608w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/was-ist-blazor-262x300.png 262w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Versuchen wir mal die Frage &#8222;Was ist Blazor&#8220; ganz kurz zu beantworten: <\/p>\n\n\n\n<p>Blazor ist ein innovatives Web-Entwicklungsframework von Microsoft, das es Entwicklern erm\u00f6glicht, interaktive Webanwendungen mit C# anstelle von JavaScript zu erstellen. Durch die Verwendung von WebAssembly, einer bin\u00e4ren Code-Technologie, k\u00f6nnen Blazor-Anwendungen direkt im Browser ausgef\u00fchrt werden, was zu einer schnelleren und reibungsloseren Benutzererfahrung f\u00fchrt. In diesem Artikel werden wir uns eingehend mit Blazor befassen, seine Geschichte, Architektur und grundlegenden Konzepte erkunden, sowie einen Blick auf die Zukunft von Blazor und seine Vorteile gegen\u00fcber anderen Web-Entwicklungstechnologien werfen.<\/p>\n<\/div><\/div>\n\n\n<div class=\"bd-thopjeou9a6ovpkt4kwjkh8uwfh10f wp-block-bd--- wp-block-bd-block-44\"><img decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/alexander-bartz.90x90.jpg\" alt=\"Profilbild Alexander Bartz\" class=\"bd-20hqmwgfd45ft6le7o9jodfn5s4wdr\"><div class=\"bd-h521mx4v22cf4pnhdltwg5jsfoh993\"><span class=\"bd-q4ar1wk0pskc0416tjc7mqgzja7qdd\">Alexander Bartz<\/span><span class=\"bd-ykmon322dena208dhdzhgf1giiesgg\">soft-evolution GmbH &amp; CO KG<\/span><a title=\"LinkedIn Profil Alexander Bartz\" href=\"https:\/\/www.linkedin.com\/in\/alexander-bartz-soft-evolution\/\" class=\"bd-a4t6wfzl4e6eqgll7rkjmpmu1ii5k0\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/linkedin.png\" alt=\"LinkedIn Logo\" class=\"bd-defoi8wzogf1iq3dwx1b54vft4y5fp\"><\/a><\/div><\/div>\n\n\n<div class=\"wp-block-rank-math-toc-block\"><h2>Inhalt<\/h2><nav><ul><li class=\"\"><a href=\"#die-geschichte-von-blazor-die-entstehung-eines-neuen-web-entwicklungstools\">Die Geschichte von Blazor: Die Entstehung eines neuen Web-Entwicklungstools<\/a><\/li><li class=\"\"><a href=\"#grundkonzepte-und-architektur-von-blazor\">Grundkonzepte und Architektur von Blazor<\/a><\/li><li class=\"\"><a href=\"#blazor-hostingmodelle-server-und-web-assembly\">Blazor-Hostingmodelle: Server und WebAssembly<\/a><ul><li class=\"\"><a href=\"#vergleich-der-modelle\">Vergleich der Modelle<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#blazor-komponenten-die-bausteine-einer-blazor-anwendung\">Blazor-Komponenten: Die Bausteine einer Blazor-Anwendung<\/a><\/li><li class=\"\"><a href=\"#interaktion-mit-java-script-in-blazor-anwendungen\">Interaktion mit JavaScript in Blazor-Anwendungen<\/a><ul><li class=\"\"><a href=\"#ein-beispiel\">Ein Beispiel<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#datenbindung-und-event-handling-in-blazor\">Datenbindung und Event-Handling in Blazor<\/a><ul><li class=\"\"><a href=\"#ein-beispiel-1\">Ein Beispiel<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#routing-und-navigation-in-blazor-anwendungen\">Routing und Navigation in Blazor-Anwendungen<\/a><ul><li class=\"\"><a href=\"#ein-beispiel-2\">Ein Beispiel<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#blazor-erweiterungen-und-community-ressourcen-die-blazor-community-entwickelt-sich\">Blazor-Erweiterungen und Community-Ressourcen: Die Blazor-Community entwickelt sich<\/a><\/li><li class=\"\"><a href=\"#vergleich-von-komponentenbibliotheken\">Vergleich von Komponentenbibliotheken<\/a><\/li><li class=\"\"><a href=\"#zukunftsperspektiven-und-vorteile-von-blazor-im-vergleich-zu-anderen-web-entwicklungstechnologien\">Zukunftsperspektiven und Vorteile von Blazor im Vergleich zu anderen Web-Entwicklungstechnologien<\/a><\/li><li class=\"\"><a href=\"#fazit-was-ist-blazor-und-wozu-lasst-es-sich-nutzen\">Fazit: Was ist Blazor und wozu l\u00e4sst es sich nutzen?<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<div style=\"height:56px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"die-geschichte-von-blazor-die-entstehung-eines-neuen-web-entwicklungstools\">Die Geschichte von Blazor: Die Entstehung eines neuen Web-Entwicklungstools<\/h2>\n\n\n\n<p>Blazor wurde urspr\u00fcnglich von Microsoft-Entwickler Steve Sanderson als experimentelles Projekt im Jahr 2017 vorgestellt. Der Name &#8222;Blazor&#8220; ist eine Kombination aus &#8222;Browser&#8220; und &#8222;Razor&#8220;, wobei Razor eine von Microsoft entwickelte Syntax f\u00fcr C#- und HTML-Templates ist. Seit seiner ersten Einf\u00fchrung hat Blazor mehrere Entwicklungsstadien durchlaufen und wurde schlie\u00dflich als offizielles Microsoft-Produkt im September 2019 mit der Ver\u00f6ffentlichung von .NET Core 3.0 eingef\u00fchrt.<\/p>\n\n\n\n<p>Der Erfolg von Blazor ist auf eine Kombination aus verschiedenen Faktoren zur\u00fcckzuf\u00fchren, darunter die wachsende Popularit\u00e4t von WebAssembly, das starke \u00d6kosystem der .NET-Plattform und das Engagement von Microsoft, innovative Webentwicklungstools bereitzustellen. Blazor hat im Laufe der Zeit eine wachsende Community von Entwicklern und Unternehmen angezogen, die das Framework f\u00fcr die Erstellung verschiedener Webanwendungen einsetzen, von einfachen interaktiven Seiten bis hin zu komplexen Gesch\u00e4ftsanwendungen.<\/p>\n\n\n\n<p>Steve Sanderson gilt zurecht als der Vater von Blazor. Seine F\u00e4higkeit gro\u00dfartige Technologien zu entwerfen und sie dann auch noch bescheiden und pr\u00e4zise zu pr\u00e4sentieren, macht es zu einem Vergn\u00fcgen ihm zuzuh\u00f6ren. Wer etwas Zeit hat, dem sei z.B. dieses Vorstellungsvideo auf der NDC Konferenz ans Herz gelegt um seine Antwort auf die Frage &#8222;Was ist Blazor&#8220; kennenzulernen:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Blazor, a new framework for browser-based .NET apps - Steve Sanderson\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JU-6pAxqAa4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"grundkonzepte-und-architektur-von-blazor\">Grundkonzepte und Architektur von Blazor<\/h2>\n\n\n\n<p>Blazor basiert auf einem komponentenorientierten Ansatz, bei dem Webanwendungen aus wiederverwendbaren und unabh\u00e4ngigen Komponenten erstellt werden. Jede Blazor-Komponente besteht aus HTML, CSS und C#-Code, der f\u00fcr das Rendering und die Interaktion mit der Benutzeroberfl\u00e4che verantwortlich ist. Die Komponenten kommunizieren miteinander \u00fcber Parameter, Ereignisse und Cascading Values, um Daten und Informationen auszutauschen.<\/p>\n\n\n\n<p>Die Architektur von Blazor folgt dem Model-View-Update (MVU)-Pattern, das eine klare Trennung von Zust\u00e4ndigkeiten und eine unidirektionale Datenflusssteuerung unterst\u00fctzt. In Blazor aktualisiert der Entwickler den Anwendungszustand, indem er auf Ereignisse reagiert, die durch Benutzerinteraktionen ausgel\u00f6st werden. Anschlie\u00dfend wird die Benutzeroberfl\u00e4che automatisch aktualisiert, um den neuen Zustand widerzuspiegeln.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blazor-hostingmodelle-server-und-web-assembly\">Blazor-Hostingmodelle: Server und WebAssembly<\/h2>\n\n\n\n<p>Blazor bietet zwei Hostingmodelle f\u00fcr Webanwendungen: Blazor Server und Blazor WebAssembly. Beide Modelle haben ihre eigenen Vor- und Nachteile und sind f\u00fcr verschiedene Anwendungsf\u00e4lle geeignet.<\/p>\n\n\n\n<p>Blazor Server-Anwendungen werden auf einem Server ausgef\u00fchrt und verwenden SignalR, eine Echtzeit-Kommunikationsbibliothek, um Benutzerinteraktionen und UI-Updates zwischen dem Server und dem Browser auszutauschen. Blazor Server bietet eine schnelle Startzeit, da die Anwendung auf dem Server vorgerendert wird und nur die notwendigen UI-Updates an den Browser gesendet werden. Allerdings kann diese Architektur bei hoher Netzwerklatenz zu einer reduzierten Benutzererfahrung f\u00fchren und erfordert eine st\u00e4ndige Internetverbindung.<\/p>\n\n\n\n<p>Blazor WebAssembly hingegen ist clientseitig und l\u00e4uft direkt im Browser des Benutzers. Die Anwendung wird als WebAssembly-Code heruntergeladen und ausgef\u00fchrt, wodurch keine st\u00e4ndige Serververbindung erforderlich ist. Blazor WebAssembly bietet eine bessere Skalierbarkeit und reduziert die Serverlast, da die gesamte Verarbeitung auf dem Client stattfindet. Allerdings sind die Anwendungsstartzeiten in der Regel l\u00e4nger, da der gesamte Code und die Ressourcen heruntergeladen werden m\u00fcssen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"vergleich-der-modelle\">Vergleich der Modelle<\/h3>\n\n\n\n<p>Die folgende Tabelle zeigt die wichtigsten Unterschiede der beiden Hostingmodelle:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Merkmale<\/th><th>Blazor Server<\/th><th>Blazor WebAssembly<\/th><\/tr><\/thead><tbody><tr><td>Hosting<\/td><td>Serverseitig<\/td><td>Clientseitig (im Browser)<\/td><\/tr><tr><td>Kommunikation<\/td><td>SignalR (Echtzeit-Kommunikation)<\/td><td>Direkte Browser-Interaktion<\/td><\/tr><tr><td>Internetverbindung<\/td><td>St\u00e4ndige Verbindung erforderlich<\/td><td>Keine st\u00e4ndige Verbindung erforderlich<\/td><\/tr><tr><td>Startzeit<\/td><td>Schneller, da vorgerendert<\/td><td>L\u00e4nger, da gesamter Code heruntergeladen wird<\/td><\/tr><tr><td>Skalierbarkeit<\/td><td>Begrenzt durch Server-Ressourcen<\/td><td>Bessere Skalierbarkeit, clientseitige Verarbeitung<\/td><\/tr><tr><td>Serverlast<\/td><td>H\u00f6her, da UI-Updates vom Server verwaltet werden<\/td><td>Geringer, da Verarbeitung im Browser erfolgt<\/td><\/tr><tr><td>Netzwerklatenz<\/td><td>Kann zu reduzierter Benutzererfahrung f\u00fchren<\/td><td>Weniger betroffen<\/td><\/tr><tr><td>Offline-F\u00e4higkeit<\/td><td>Nicht unterst\u00fctzt<\/td><td>Unterst\u00fctzt<\/td><\/tr><tr><td>Browser-API-Integration<\/td><td>Indirekt \u00fcber SignalR<\/td><td>Direkte Integration<\/td><\/tr><tr><td>Debugging<\/td><td>Einfacher, da serverseitig<\/td><td>Komplexer, da clientseitig<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Merkmale der beiden Hostingmodelle<\/figcaption><\/figure>\n\n\n\n<p>Manchmal kann auch ein hybrider Ansatz sinnvoll sein, bei dem die Blazor Anwendung so entwickelt wird, dass schnell wischen beiden Modellen gewechselt werden kann. Man muss sich zwar beim Ver\u00f6ffentlichen der App f\u00fcr ein Modell entscheiden, kann aber beim Entwickeln Hin- und Herwechseln. So kann man z.B. die Vorteile wie schnelle Startzeit und einfaches Debugging zur Entwicklungszeit mit den Vorteilen bei der Skalierbarkeit von WebAssembly vereinen.<\/p>\n\n\n\n<div style=\"height:58px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blazor-komponenten-die-bausteine-einer-blazor-anwendung\">Blazor-Komponenten: Die Bausteine einer Blazor-Anwendung<\/h2>\n\n\n\n<p>Blazor-Komponenten sind die grundlegenden Bausteine jeder Blazor-Anwendung. Sie bestehen aus C#-Code und Razor-Markup und erm\u00f6glichen die Erstellung von wiederverwendbaren UI-Elementen, die leicht in anderen Komponenten oder Anwendungen verwendet werden k\u00f6nnen. Eine Blazor-Komponente kann Parameter enthalten, die es erm\u00f6glichen, Daten und Einstellungen von \u00fcbergeordneten Komponenten zu erhalten, und kann auch eigene Ereignisse ausl\u00f6sen, um \u00fcbergeordneten Komponenten Benachrichtigungen \u00fcber interne \u00c4nderungen zu senden.<\/p>\n\n\n\n<p>In Blazor k\u00f6nnen Entwickler sowohl einfache als auch komplexe Komponenten erstellen, die sowohl statische als auch dynamische Inhalte verwalten. Beispiele f\u00fcr Komponenten sind Schaltfl\u00e4chen, Eingabefelder, Dropdown-Men\u00fcs, Dialogfelder und sogar vollst\u00e4ndige Layouts, die den Rahmen f\u00fcr eine Anwendung bilden.<\/p>\n\n\n\n<p>Von Haus aus bringt Blazor nur eine sehr kleine Anzahl von Komponenten mit. Es ist jedoch sehr einfach html tags mit C# code so zu erweitern, dass das gew\u00fcnschte Resultat auf dem Bildschirm erscheint. Eine dynamische Html Liste l\u00e4sst sich z.B. mit Code wie diesem erstellen:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-html\">\n      HTML    <\/div>\n    <div class=\"prettycode-file\">\n          <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1849656988\"\n    id=\"codemirror-1849656988\"\n  >&lt;ol&gt;\n@foreach (var person in employees)\n{\n    &lt;li&gt;@person.Name&lt;\/li&gt;\n}\n&lt;\/ol&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1849656988'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'hopscotch',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<p>Hier kann man sehen, wie einfach C# Code genutzt werden kann um direkt in der .razor Datei dynamisch Html zu generieren. Selbstverst\u00e4ndlich genie\u00dft man dabei Features, die durch die statischen Typen von C# erm\u00f6glicht werden wie Syntax Highlighting und Auto-Completion.<\/p>\n\n\n\n<p>M\u00f6chte man die Code wiederverwenden, l\u00e4sst sich sehr einfach eine Komponente aus Razor Code, C# Code und ggf. CSS und JavaScript erstellen. Dabei ist es dem Entwickler freigestellt, ob er alles in eine Datei stecken m\u00f6chte, oder ob er von der M\u00f6glichkeit profitiert Alles oder Teile in separate Dateien zu schreiben. Die meisten IDEs gruppieren diese Dateien automatisch, sodass die \u00dcbersicht nicht verloren geht.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"308\" height=\"219\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Gruppierte-Ansicht-Blazor-Komponente.png\" alt=\"Blazor Komponente - Einzelne Dateien von IDE gruppiert\" class=\"wp-image-218\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Gruppierte-Ansicht-Blazor-Komponente.png 308w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Gruppierte-Ansicht-Blazor-Komponente-300x213.png 300w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><\/figure>\n\n\n\n<p>Hier sieht man wie die PersonList Komponente in vier Dateien zerlegt wurde: Eine .razor Datei, die den Mix aus Html und C# f\u00fcr die Darstellung beinhaltet, eine .CS Datei die reinen C# Code beinhaltet (z.B. f\u00fcr die Eventbehandlung oder f\u00fcr das asynchrone Laden von Daten), eine CSS Datei f\u00fcr Styles und eine .js Datei mit JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"interaktion-mit-java-script-in-blazor-anwendungen\">Interaktion mit JavaScript in Blazor-Anwendungen<\/h2>\n\n\n\n<p>Obwohl Blazor prim\u00e4r auf C# basiert, ist die Interaktion mit JavaScript in Blazor-Anwendungen weiterhin m\u00f6glich und oft notwendig, um auf bestimmte Browser-APIs zuzugreifen oder bestehende JavaScript-Bibliotheken zu nutzen. Blazor bietet JavaScript Interop, eine Funktion, die es erm\u00f6glicht, JavaScript-Funktionen aus C#-Code aufzurufen und umgekehrt.<\/p>\n\n\n\n<p>Um JavaScript in Blazor einzubinden, k\u00f6nnen Entwickler die IJSRuntime-Schnittstelle verwenden, die Methoden zum Aufrufen von JavaScript-Funktionen und zum Empfangen von R\u00fcckgabewerten bereitstellt. Dabei ist es wichtig, darauf zu achten, dass die Kommunikation zwischen C# und JavaScript asynchron erfolgt, um eine reibungslose Benutzererfahrung zu gew\u00e4hrleisten.<\/p>\n\n\n\n<p>JS-Interop-Aufrufe sind grunds\u00e4tzlich asynchron konzipiert, unabh\u00e4ngig davon, ob der aufgerufene Code selbst synchron oder asynchron ist. Die asynchrone Standardausf\u00fchrung stellt sicher, dass Komponenten mit beiden Blazor-Hostingmodellen &#8211; Blazor Server und Blazor WebAssembly &#8211; kompatibel sind. Im Fall von Blazor Server ist es notwendig, dass alle JS-Interop-Aufrufe asynchron ablaufen, da sie \u00fcber eine Netzwerkverbindung \u00fcbermittelt werden. Hingegen sind bei Anwendungen, die ausschlie\u00dflich auf das Blazor WebAssembly-Hostingmodell setzen, auch synchrone JS-Interop-Aufrufe m\u00f6glich.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ein-beispiel\">Ein Beispiel<\/h3>\n\n\n\n<p>Es gibt mehrere M\u00f6glichkeit JavaScript und Blazor zu kombinieren. Wenn man JavaScript Code hat, der genau f\u00fcr eine Komponente geschrieben wurde, empfiehlt es sich den JavaScript Code in eine Datei mit dem gleichen Name wie die Blazor Komponente + Dateiendung &#8218;.js&#8216; zu schreiben. Auf die Weise wird der Code automatisch gebundled und kann in der Komponete einfach referenziert werden.<\/p>\n\n\n\n<p>In meinem Beispiel habe ich etwas JavaScript in die Datei PersonList.razor.js geschrieben:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-js\">\n      JS    <\/div>\n    <div class=\"prettycode-file\">\n      PersonList.razor.js    <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1440949812\"\n    id=\"codemirror-1440949812\"\n  >export function myAlert(text) {\n    alert(text);\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1440949812'), {\n      mode: 'javascript',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<p>Um den Code von C# (Datei PersonList.razor.cs)  aus zu verwenden \u00fcberschreibt man die Methode OnAfterRenderAsync() und f\u00fcr einen import des JavaScript Codes durch. Im Anschluss stehen die JavaScript Funktionen f\u00fcr einen Aufruft in C# zur Verf\u00fcgung:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-c#\">\n      C#    <\/div>\n    <div class=\"prettycode-file\">\n      PersonList.cs    <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-706622069\"\n    id=\"codemirror-706622069\"\n  >public partial class PersonList\n{\n    [Inject] IJSRuntime JS { get; set; }\n    private IJSObjectReference module;\n               \n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        await base.OnAfterRenderAsync(firstRender);\n\n        module = await JS.InvokeAsync&lt;IJSObjectReference&gt;(&quot;import&quot;, &quot;.\/Shared\/PersonList.razor.js&quot;);\n\n        await module.InvokeVoidAsync(&quot;myAlert&quot;, &quot;Gr\u00fc\u00dfe von JavaScript&quot;);\n    }\n}   <\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-706622069'), {\n      mode: 'clike',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"datenbindung-und-event-handling-in-blazor\">Datenbindung und Event-Handling in Blazor<\/h2>\n\n\n\n<p>Datenbindung ist ein zentrales Konzept in Blazor, das es erm\u00f6glicht, Daten zwischen UI-Elementen und C#-Code nahtlos zu synchronisieren. Blazor unterst\u00fctzt sowohl One-Way- als auch Two-Way-Datenbindung, wodurch Entwickler die Datenbindung entsprechend ihrer Anforderungen anpassen k\u00f6nnen. One-Way-Datenbindung bindet die Datenquelle an ein UI-Element, sodass \u00c4nderungen an der Datenquelle automatisch im UI-Element widergespiegelt werden. Two-Way-Datenbindung hingegen erm\u00f6glicht es, dass \u00c4nderungen im UI-Element auch automatisch in der Datenquelle aktualisiert werden.<\/p>\n\n\n\n<p>Event-Handling ist ein weiterer wichtiger Aspekt von Blazor, der Entwicklern erm\u00f6glicht, auf Benutzerinteraktionen und andere Ereignisse innerhalb der Anwendung zu reagieren. In Blazor-Anwendungen k\u00f6nnen Entwickler Ereignishandler f\u00fcr verschiedene Ereignisse wie Klicks, Eingaben oder Hover hinzuf\u00fcgen, die dann C#-Methoden aufrufen, um entsprechende Aktionen auszuf\u00fchren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ein-beispiel-1\">Ein Beispiel<\/h3>\n\n\n\n<p>In diesem Beispiel erstellen wir eine einfache Blazor-Komponente, die Two-Way-Datenbindung demonstriert. Die Komponente enth\u00e4lt ein Eingabefeld und einen Text, der den Inhalt des Eingabefelds in Echtzeit anzeigt.<\/p>\n\n\n\n<p>Erstellt man z.B. eine neue Razor-Komponente in der Datei <code>TwoWayBinding.razor<\/code> mit diesem Inhalt:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-c#\">\n      C#    <\/div>\n    <div class=\"prettycode-file\">\n      TwoWayBinding.razor    <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-800711392\"\n    id=\"codemirror-800711392\"\n  >@page &quot;\/twowaybinding&quot;\n\n&lt;h3&gt;Two-Way-Datenbindung&lt;\/h3&gt;\n\n&lt;p&gt;Geben Sie hier etwas ein:&lt;\/p&gt;\n&lt;input @bind=&quot;InputText&quot; type=&quot;text&quot; \/&gt;\n\n&lt;p&gt;Der eingegebene Text ist: @InputText&lt;\/p&gt;\n\n@code {\n    private string InputText { get; set; } = &quot;&quot;;\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-800711392'), {\n      mode: 'clike',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<p>In diesem Beispiel binden wir den Wert des Eingabefelds an die Eigenschaft <code>InputText<\/code> mit dem <code>@bind<\/code>-Direktiv. Dadurch wird Two-Way-Datenbindung erreicht: \u00c4nderungen im Eingabefeld werden automatisch in der Eigenschaft <code>InputText<\/code> aktualisiert, und umgekehrt.<\/p>\n\n\n\n<p>F\u00fcgen wir nun einen Link zur Komponente in der <code>NavMenu.razor<\/code>-Datei hinzu, damit die Komponente in der Anwendung erreichbar ist:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-c#\">\n      C#    <\/div>\n    <div class=\"prettycode-file\">\n      NavMenu.razor    <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1666277328\"\n    id=\"codemirror-1666277328\"\n  >&lt;div class=&quot;@NavMenuCssClass&quot; @onclick=&quot;ToggleNavMenu&quot;&gt;\n    &lt;ul class=&quot;nav flex-column&quot;&gt;\n        &#8230;\n        &lt;li class=&quot;nav-item px-3&quot;&gt;\n            &lt;NavLink class=&quot;nav-link&quot; href=&quot;twowaybinding&quot;&gt;\n                &lt;span class=&quot;oi oi-list-rich&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/span&gt; Two-Way-Datenbindung\n            &lt;\/NavLink&gt;\n        &lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/div&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1666277328'), {\n      mode: 'clike',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"routing-und-navigation-in-blazor-anwendungen\">Routing und Navigation in Blazor-Anwendungen<\/h2>\n\n\n\n<p>Blazor bietet ein integriertes Routing-System, das es erm\u00f6glicht, einfache und benutzerfreundliche URLs f\u00fcr verschiedene Seiten und Komponenten innerhalb der Anwendung zu erstellen. Das Routing-System basiert auf dem @page-Direktiv, das in Razor-Dateien verwendet wird, um den Routenpfad einer Komponente oder Seite anzugeben.<\/p>\n\n\n\n<p>Das Blazor-Routing-System unterst\u00fctzt auch Parameter und optionale Parameter, die es erm\u00f6glichen, zus\u00e4tzliche Informationen an die Komponenten zu \u00fcbergeben und die Navigation innerhalb der Anwendung flexibel zu gestalten. Entwickler k\u00f6nnen au\u00dferdem auf das NavigationManager-Objekt zugreifen, um programmgesteuerte Navigation innerhalb der Anwendung zu erm\u00f6glichen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ein-beispiel-2\">Ein Beispiel<\/h3>\n\n\n\n<p>Erstellen wir eine neue Razor-Komponente (z.B. <code>MyParameterizedComponent.razor<\/code>) mit folgendem Inhalt:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-c#\">\n      C#    <\/div>\n    <div class=\"prettycode-file\">\n      MyParameterizedComponent.razor    <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1410446019\"\n    id=\"codemirror-1410446019\"\n  >@page &quot;\/parameterized\/{RequiredParam}\/{OptionalParam:int?}&quot;\n\n&lt;h3&gt;Parameterisierte Blazor-Komponente&lt;\/h3&gt;\n\n&lt;p&gt;Pflichtparameter: @RequiredParam&lt;\/p&gt;\n&lt;p&gt;OptionalParam: @OptionalParam&lt;\/p&gt;\n\n@code {\n    [Parameter]\n    public string RequiredParam { get; set; }\n\n    [Parameter]\n    public int? OptionalParam { get; set; }\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1410446019'), {\n      mode: 'clike',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<p>In diesem Beispiel verwenden wir die <code>@page<\/code>-Direktive, um die Route f\u00fcr die Komponente festzulegen. Die Route enth\u00e4lt Platzhalter f\u00fcr zwei Parameter: <code>RequiredParam<\/code> und <code>OptionalParam<\/code>. Der <code>RequiredParam<\/code> ist ein zwingend ben\u00f6tigter Parameter, w\u00e4hrend der <code>OptionalParam<\/code> vom Typ <code>int?<\/code> ist und optional ist.<\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blazor-erweiterungen-und-community-ressourcen-die-blazor-community-entwickelt-sich\">Blazor-Erweiterungen und Community-Ressourcen: Die Blazor-Community entwickelt sich<\/h2>\n\n\n\n<p>Die wachsende Blazor-Community hat dazu beigetragen, eine Vielzahl von Erweiterungen, Bibliotheken und Tools f\u00fcr die Entwicklung von Blazor-Anwendungen bereitzustellen. Diese Ressourcen erleichtern den Entwicklern die Arbeit und erm\u00f6glichen die schnelle und effiziente Implementierung von Funktionen und L\u00f6sungen in ihren Anwendungen.<\/p>\n\n\n\n<p>Zu den beliebten Blazor-Erweiterungen z\u00e4hlen UI-Bibliotheken wie <a href=\"https:\/\/blazor.radzen.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Radzen Blazor Components<\/a>, <a href=\"https:\/\/demos.devexpress.com\/blazor\/\" target=\"_blank\" rel=\"noreferrer noopener\">DevExpress Blazor<\/a> und <a href=\"https:\/\/www.syncfusion.com\/blazor-components\" target=\"_blank\" rel=\"noreferrer noopener\">Syncfusion Blazor<\/a>, die eine gro\u00dfe Anzahl von vorgefertigten Komponenten und Steuerelementen f\u00fcr die Erstellung ansprechender Benutzeroberfl\u00e4chen bieten. Dar\u00fcber hinaus gibt es auch viele Ressourcen wie Blogs, Tutorials, Videos und Online-Kurse, die Entwicklern helfen, ihre Blazor-Kenntnisse zu vertiefen und ihre F\u00e4higkeiten zu erweitern.<\/p>\n\n\n\n<p>Neben den kommerziellen Komponenten gibt es inzwischen auch eine Reihe von wirklich guten Bibliotheken aus dem Open Source Bereich. F\u00fcr mich pers\u00f6nlich sticht hier <a href=\"https:\/\/mudblazor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">MudBlazor <\/a>heraus. Man merkt der Bibliothek an, dass alles zusammen passt und mit wenig Code direkt eingesetzt werden kann. Dar\u00fcber hinaus bietet MudBlazor ein ansprechendes Design und eine wirklich umfangreiche Sammlung an Komponenten. Ein kleines Manko an MudBlazor ist die zumindest derzeit noch fehlenden, native <a href=\"https:\/\/crispycode.net\/de\/odata-rezepte\/\" data-type=\"post\" data-id=\"268\">Unterst\u00fctzung f\u00fcr OData<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"vergleich-von-komponentenbibliotheken\">Vergleich von Komponentenbibliotheken<\/h2>\n\n\n\n<p>Die folgenden Tabelle vergleicht die wichtigsten Merkmale von vier Blazor-Komponentenbibliotheken: Blazor Radzen, DevExpress Blazor, Syncfusion Blazor und MudBlazor. Die Tabelle enth\u00e4lt Informationen \u00fcber die Lizenz, die Anzahl der Komponenten, den Design-Stil, die Responsivit\u00e4t, den mobilen Support, die unterst\u00fctzten Browser, die Dokumentation, die Community, die Template-Anpassung und die Unterst\u00fctzung. Beachten Sie, dass diese Informationen je nach Updates und \u00c4nderungen der jeweiligen Bibliotheken variieren k\u00f6nnen.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Merkmale<\/th><th>Blazor Radzen<\/th><th>DevExpress Blazor<\/th><th>Syncfusion Blazor<\/th><th>MudBlazor<\/th><\/tr><\/thead><tbody><tr><td>Lizenz<\/td><td>Propriet\u00e4r (Freemium)<\/td><td>Propriet\u00e4r (Freemium)<\/td><td>Propriet\u00e4r (Freemium)<\/td><td>Open Source (MIT)<\/td><\/tr><tr><td>Anzahl Komponenten<\/td><td>\u00dcber 60<\/td><td>\u00dcber 65<\/td><td>\u00dcber 65<\/td><td>\u00dcber 50<\/td><\/tr><tr><td>Design-Stil<\/td><td>Radzen Theme<\/td><td>DevExpress Themes<\/td><td>Syncfusion Themes<\/td><td>Material Design<\/td><\/tr><tr><td>Responsivit\u00e4t<\/td><td>Ja<\/td><td>Ja<\/td><td>Ja<\/td><td>Ja<\/td><\/tr><tr><td>Mobiler Support<\/td><td>Ja<\/td><td>Ja<\/td><td>Ja<\/td><td>Ja<\/td><\/tr><tr><td>Unterst\u00fctzte Browser<\/td><td>Moderne Browser<\/td><td>Moderne Browser<\/td><td>Moderne Browser<\/td><td>Moderne Browser<\/td><\/tr><tr><td>Dokumentation<\/td><td>Umfangreich<\/td><td>Umfangreich<\/td><td>Umfangreich<\/td><td>Umfangreich<\/td><\/tr><tr><td>Gemeinschaft<\/td><td>Wachsend<\/td><td>Wachsend<\/td><td>Wachsend<\/td><td>Sehr aktiv und wachsend<\/td><\/tr><tr><td>Template-Anpassung<\/td><td>Ja<\/td><td>Ja<\/td><td>Ja<\/td><td>Ja<\/td><\/tr><tr><td>Unterst\u00fctzung<\/td><td>Kostenlos (Community)<br>kostenpflichtig (Enterprise)<\/td><td>Kostenlos (Community)<br>kostenpflichtig (Enterprise)<\/td><td>Kostenlos (Community)<br>kostenpflichtig (Enterprise)<\/td><td>Kostenlos (Community)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"zukunftsperspektiven-und-vorteile-von-blazor-im-vergleich-zu-anderen-web-entwicklungstechnologien\">Zukunftsperspektiven und Vorteile von Blazor im Vergleich zu anderen Web-Entwicklungstechnologien<\/h2>\n\n\n\n<p>Blazor hat sich als eine vielversprechende Alternative zu herk\u00f6mmlichen Web-Entwicklungstechnologien wie Angular, React und Vue.js etabliert. Durch die Verwendung von C# und .NET erm\u00f6glicht Blazor Entwicklern, auf ein einheitliches \u00d6kosystem f\u00fcr die gesamte Anwendungsentwicklung zuzugreifen, was die Produktivit\u00e4t und Wartbarkeit erh\u00f6ht.<\/p>\n\n\n\n<p>Ein weiterer Vorteil von Blazor ist die Unterst\u00fctzung f\u00fcr WebAssembly, das eine bessere Leistung und Geschwindigkeit f\u00fcr Webanwendungen bietet. Da WebAssembly weiterhin an Popularit\u00e4t gewinnt und von Browserherstellern<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fazit-was-ist-blazor-und-wozu-lasst-es-sich-nutzen\">Fazit: Was ist Blazor und wozu l\u00e4sst es sich nutzen?<\/h2>\n\n\n\n<p>Blazor ist ein innovatives und leistungsstarkes Framework f\u00fcr die Entwicklung von Webanwendungen, das auf .NET und C# basiert. Es erm\u00f6glicht Entwicklern, clientseitige Webanwendungen mit einer vertrauten Programmiersprache und einer einheitlichen Codebasis f\u00fcr Backend und Frontend zu erstellen. Besonders gut eignet sich Blazor f\u00fcr Business-spezifische Anwendungen, bei denen die Interaktion mit Daten und Gesch\u00e4ftslogik im Vordergrund steht.<\/p>\n\n\n\n<p>Obwohl Blazor kontinuierlich weiterentwickelt wird und viele Vorteile bietet, hat es im Vergleich zu anderen Frameworks wie React oder Angular bei \u00f6ffentlichen Websites noch etwas Aufholbedarf. Hier k\u00f6nnen Aspekte wie Performance und SEO entscheidend sein, und es gibt Bereiche, in denen Blazor noch nicht so ausgereift ist wie die etablierten Alternativen.<\/p>\n\n\n\n<p>Es ist wichtig zu betonen, dass kein Werkzeug oder Framework f\u00fcr alle Anwendungsf\u00e4lle gleicherma\u00dfen gut geeignet ist. Bei der Auswahl der richtigen Technologie f\u00fcr ein Projekt sollte immer eine sorgf\u00e4ltige Abw\u00e4gung der spezifischen Anforderungen und Ziele erfolgen. Dennoch bietet Blazor f\u00fcr viele Szenarien eine \u00fcberzeugende Option, insbesondere f\u00fcr Entwickler, die bereits mit .NET und C# vertraut sind.<\/p>\n\n\n\n<p>Ich pers\u00f6nlich versuche Blazor in allen Projekten anzuwenden, die sich daf\u00fcr eignen weil die Arbeit damit wirklich effizient und trotzdem gut skalierbar ist.<\/p>\n<div class=\"shariff\"><ul class=\"shariff-buttons theme-default orientation-horizontal buttonsize-medium\"><li class=\"shariff-button facebook shariff-nocustomcolor\" style=\"background-color:#4273c8\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fcrispycode.net%2Fde%2Fwas-ist-blazor%2F\" title=\"Bei Facebook teilen\" aria-label=\"Bei Facebook teilen\" role=\"button\" rel=\"nofollow\" class=\"shariff-link\" style=\"; background-color:#3b5998; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 18 32\"><path fill=\"#3b5998\" d=\"M17.1 0.2v4.7h-2.8q-1.5 0-2.1 0.6t-0.5 1.9v3.4h5.2l-0.7 5.3h-4.5v13.6h-5.5v-13.6h-4.5v-5.3h4.5v-3.9q0-3.3 1.9-5.2t5-1.8q2.6 0 4.1 0.2z\"\/><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button linkedin shariff-nocustomcolor\" style=\"background-color:#1488bf\"><a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fcrispycode.net%2Fde%2Fwas-ist-blazor%2F\" title=\"Bei LinkedIn teilen\" aria-label=\"Bei LinkedIn teilen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#0077b5; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#0077b5\" d=\"M6.2 11.2v17.7h-5.9v-17.7h5.9zM6.6 5.7q0 1.3-0.9 2.2t-2.4 0.9h0q-1.5 0-2.4-0.9t-0.9-2.2 0.9-2.2 2.4-0.9 2.4 0.9 0.9 2.2zM27.4 18.7v10.1h-5.9v-9.5q0-1.9-0.7-2.9t-2.3-1.1q-1.1 0-1.9 0.6t-1.2 1.5q-0.2 0.5-0.2 1.4v9.9h-5.9q0-7.1 0-11.6t0-5.3l0-0.9h5.9v2.6h0q0.4-0.6 0.7-1t1-0.9 1.6-0.8 2-0.3q3 0 4.9 2t1.9 6z\"\/><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button mastodon shariff-nocustomcolor\" style=\"background-color:#563ACC\"><a href=\"https:\/\/s2f.kytta.dev\/?text=Was%20ist%20Blazor%3F%20Das%20Web-Framework%20f%C3%BCr%20moderne%20.NET%20und%20C%23%20Anwendungen https%3A%2F%2Fcrispycode.net%2Fde%2Fwas-ist-blazor%2F\" title=\"Bei Mastodon teilen\" aria-label=\"Bei Mastodon teilen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#6364FF; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"75\" height=\"79\" viewBox=\"0 0 75 79\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M37.813-.025C32.462-.058 27.114.13 21.79.598c-8.544.621-17.214 5.58-20.203 13.931C-1.12 23.318.408 32.622.465 41.65c.375 7.316.943 14.78 3.392 21.73 4.365 9.465 14.781 14.537 24.782 15.385 7.64.698 15.761-.213 22.517-4.026a54.1 54.1 0 0 0 .01-6.232c-6.855 1.316-14.101 2.609-21.049 1.074-3.883-.88-6.876-4.237-7.25-8.215-1.53-3.988 3.78-.43 5.584-.883 9.048 1.224 18.282.776 27.303-.462 7.044-.837 14.26-4.788 16.65-11.833 2.263-6.135 1.215-12.79 1.698-19.177.06-3.84.09-7.692-.262-11.52C72.596 7.844 63.223.981 53.834.684a219.453 219.453 0 0 0-16.022-.71zm11.294 12.882c5.5-.067 10.801 4.143 11.67 9.653.338 1.48.471 3 .471 4.515v21.088h-8.357c-.07-7.588.153-15.182-.131-22.765-.587-4.368-7.04-5.747-9.672-2.397-2.422 3.04-1.47 7.155-1.67 10.735v6.392h-8.307c-.146-4.996.359-10.045-.404-15.002-1.108-4.218-7.809-5.565-10.094-1.666-1.685 3.046-.712 6.634-.976 9.936v14.767h-8.354c.109-8.165-.238-16.344.215-24.5.674-5.346 5.095-10.389 10.676-10.627 4.902-.739 10.103 2.038 12.053 6.631.375 1.435 1.76 1.932 1.994.084 1.844-3.704 5.501-6.739 9.785-6.771.367-.044.735-.068 1.101-.073z\"\/><defs><linearGradient id=\"paint0_linear_549_34\" x1=\"37.0692\" y1=\"0\" x2=\"37.0692\" y2=\"79\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#6364FF\"\/><stop offset=\"1\" stop-color=\"#563ACC\"\/><\/linearGradient><\/defs><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button pinterest shariff-nocustomcolor\" style=\"background-color:#e70f18\"><a href=\"https:\/\/www.pinterest.com\/pin\/create\/link\/?url=https%3A%2F%2Fcrispycode.net%2Fde%2Fwas-ist-blazor%2F&media=https%3A%2F%2Fcrispycode.net%2Fwp-content%2Fuploads%2F2023%2F05%2Fwas-ist-blazor.png&description=Was%20ist%20Blazor%3F%20Das%20Web-Framework%20f%C3%BCr%20moderne%20.NET%20und%20C%23%20Anwendungen\" title=\"Bei Pinterest pinnen\" aria-label=\"Bei Pinterest pinnen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#cb2027; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#cb2027\" d=\"M27.4 16q0 3.7-1.8 6.9t-5 5-6.9 1.9q-2 0-3.9-0.6 1.1-1.7 1.4-2.9 0.2-0.6 1-3.8 0.4 0.7 1.3 1.2t2 0.5q2.1 0 3.8-1.2t2.7-3.4 0.9-4.8q0-2-1.1-3.8t-3.1-2.9-4.5-1.2q-1.9 0-3.5 0.5t-2.8 1.4-2 2-1.2 2.3-0.4 2.4q0 1.9 0.7 3.3t2.1 2q0.5 0.2 0.7-0.4 0-0.1 0.1-0.5t0.2-0.5q0.1-0.4-0.2-0.8-0.9-1.1-0.9-2.7 0-2.7 1.9-4.6t4.9-2q2.7 0 4.2 1.5t1.5 3.8q0 3-1.2 5.2t-3.1 2.1q-1.1 0-1.7-0.8t-0.4-1.9q0.1-0.6 0.5-1.7t0.5-1.8 0.2-1.4q0-0.9-0.5-1.5t-1.4-0.6q-1.1 0-1.9 1t-0.8 2.6q0 1.3 0.4 2.2l-1.8 7.5q-0.3 1.2-0.2 3.2-3.7-1.6-6-5t-2.3-7.6q0-3.7 1.9-6.9t5-5 6.9-1.9 6.9 1.9 5 5 1.8 6.9z\"\/><\/svg><\/span><span class=\"shariff-text\">merken<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button twitter shariff-nocustomcolor\" style=\"background-color:#595959\"><a href=\"https:\/\/twitter.com\/share?url=https%3A%2F%2Fcrispycode.net%2Fde%2Fwas-ist-blazor%2F&text=Was%20ist%20Blazor%3F%20Das%20Web-Framework%20f%C3%BCr%20moderne%20.NET%20und%20C%23%20Anwendungen\" title=\"Bei X teilen\" aria-label=\"Bei X teilen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#000; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"#000\" d=\"M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0\"\/><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>Was ist Blazor? Tauchen Sie ein in dieses moderne Web-Entwicklungsframework und erfahren Sie mehr \u00fcber seine Architektur, Vorteile und Anwendungsf\u00e4lle.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[22],"tags":[],"class_list":["post-271","post","type-post","status-publish","format-standard","hentry","category-programmierung"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Alexander Bartz","author_link":"https:\/\/crispycode.net\/de\/author\/abartz\/"},"uagb_comment_info":3154,"uagb_excerpt":"Was ist Blazor? Tauchen Sie ein in dieses moderne Web-Entwicklungsframework und erfahren Sie mehr \u00fcber seine Architektur, Vorteile und Anwendungsf\u00e4lle.","_links":{"self":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":2,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts\/271\/revisions\/275"}],"wp:attachment":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}