Welcome to Blazor!
Blazor is a framework for building interactive client-side web UI with .NET:
Blazor Studio is a Visual Studio Extension with templates that allows you to easily stand up a new web REST API and Blazor back-office web application in only a few minutes - saving you hours, and even days of work for each project. The sites generated by Blazor Studio include the following features. Visual Studio Code users require the following extensions: C# for Visual Studio Code Extension Blazor WASM Debugging Extension (when using the C# for Visual Studio Code Extension version 1.23.9 or later) After opening a project in VS Code, you may receive a notification that additional setup is required to enable debugging. The Syncfusion Blazor Template Studio is a Visual Studio 2019 extension that accelerates the creation of Blazor apps using a wizard-based experience. The resulting Blazor project is a well formed, readable code that incorporates Syncfusion Blazor components and features. The Syncfusion Essential Studio Blazor extension for Visual Studio Code allows you to create a Blazor project using pre-built templates. The following steps explain how to install the Syncfusion Blazor extensions from Visual Studio Code Extensions. Open Visual Studio Code. Go to View Extensions, and open Manage Extensions. Type “Syncfusion Blazor” in the search box. Click the Install button on the “Blazor Project Templates - Syncfusion” extension.
- Create rich interactive UIs using C# instead of JavaScript.
- Share server-side and client-side app logic written in .NET.
- Render the UI as HTML and CSS for wide browser support, including mobile browsers.
- Integrate with modern hosting platforms, such as Docker.
Pokemon uranium latest version download. Using .NET for client-side web development offers the following advantages:
- Write code in C# instead of JavaScript.
- Leverage the existing .NET ecosystem of .NET libraries.
- Share app logic across server and client.
- Benefit from .NET's performance, reliability, and security.
- Stay productive with Visual Studio on Windows, Linux, and macOS.
- Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.
Components
Blazor apps are based on components. A component in Blazor is an element of UI, such as a page, dialog, or data entry form.
Components are .NET C# classes built into .NET assemblies that:
- Define flexible UI rendering logic.
- Handle user events.
- Can be nested and reused.
- Can be shared and distributed as Razor class libraries or NuGet packages.
The component class is usually written in the form of a Razor markup page with a .razor file extension. Components in Blazor are formally referred to as Razor components. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Pages and MVC also use Razor. Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.
Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:
In the preceding example, OnYes is a C# method triggered by the button's onclick event. The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.
The Dialog Expressit software for mac. component is nested within another component using an HTML tag. In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. The tag's Title attribute passes a value for the title to the Dialog component's Title property. The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.
The dialog is rendered when the Index component is accessed in a browser. When the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method: Konica minolta bizhub c253 driver windows 10.
Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.
Blazor WebAssembly
Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly works in all modern web browsers, including mobile browsers.
Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly is an open web standard and supported in web browsers without plugins.
WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability, often shortened to JavaScript interop or JS interop. .NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.
When a Blazor WebAssembly app is built and run in a browser:
- C# code files and Razor files are compiled into .NET assemblies.
- The assemblies and the .NET runtime are downloaded to the browser.
- Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.
The size of the published app, its payload size, is a critical performance factor for an app's usability. A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimizes payload size to reduce download times:
- Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
- HTTP responses are compressed.
- The .NET runtime and assemblies are cached in the browser.
- Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
- HTTP responses are compressed.
- The .NET runtime and assemblies are cached in the browser.
Blazor Server
Blazor decouples component rendering logic from how UI updates are applied. Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a SignalR connection.
The runtime stays on the server and handles:
- Executing the app's C# code.
- Sending UI events from the browser to the server.
- Applying UI updates to the rendered component that are sent back by the server.
The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.
Visual Studio Code Blazor Support
JavaScript interop
For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can call into JavaScript code, and JavaScript code can call into C# code.
Code sharing and .NET Standard
Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.
APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.
Additional resources
Blazer Page App
- Awesome Blazor community links