Introduction
You will discover more about the Blazor Server's foundation in this series.
- Component.
- Directive.
- Dependency Injection.
- Form.
Please check the previous article on Blazor by visiting the following link:
Here is a high-level architecture diagram of how Blazor Server works,
+------------+
| |
| Browser |
| |
+------+-----+
|
+------v--------+
| |
| WebSocket |
| |
+-------+-------+
|
+-------v-------+
| |
| SignalR |
| |
+-------+-------+
|
+-------v-------+
| |
| Server |
| |
+---------------+
- The client (browser) sends a request to the server to navigate to a Blazor Server app.
- The server responds by sending an initial HTML page to the client, which includes the necessary JavaScript libraries and the root component of the app.
- The client establishes a WebSocket connection with the server, which is used to send messages between the client and server in real time.
- SignalR, a real-time communication library, is used to manage the WebSocket connection and handle the message exchange between the client and server.
- The root component of the app is rendered on the client side and handles user interactions.
- When the user interacts with the app, the component's state is updated on the client side and sent back to the server over the WebSocket connection.
- The server processes the state changes and updates the component's rendering on the server side.
- The updated rendering is sent back to the client over the WebSocket connection, and the component is updated in the browser.
- This process allows the Blazor Server app to provide a rich, interactive user experience with minimal network traffic and low latency. It also allows the server to manage the app's state, which can be useful in certain scenarios, such as when the app needs to maintain state across multiple clients or when the app needs to enforce server-side business logic.
Component
In Blazor, a component is a reusable piece of UI (user interface) that can be rendered in the browser. Components are defined using Razor syntax, which is a combination of HTML and C#. They can contain other components, as well as HTML elements, CSS styles, and C# code.
Components are responsible for rendering the UI and handling user interactions. They have a state, which is a set of variables that store the component's data and can be modified in response to user actions. The state of a component can be updated on the client side or the server side, depending on the type of Blazor app being used (Blazor Server or Blazor WebAssembly).
Blazor comes with a set of built-in components that can be used to build the UI of an app, such as buttons, text inputs, and dropdown lists. Developers can also create custom components to reuse their own UI elements and logic across multiple pages or apps.
Components are a key concept in Blazor and are used to build the UI and interactivity of an app. They allow developers to create reusable, modular pieces of UI and code, which can make it easier to build and maintain complex applications.
Here is a high-level diagram illustrating the structure of a Blazor component,
+------------+
| |
| Component |
| |
+------------+
|
+------v--------+
| |
| HTML elements|
| |
+-------+-------+
|
+-------v--------+
| |
| CSS styles |
| |
+-------+--------+
|
+-------v--------+
| |
| C# code |
| |
+----------------+
- HTML elements
These are the elements that define the component's UI. They can include standard HTML elements, as well as custom components and directives. HTML elements are written in razor syntax, which allows them to be combined with C# code and expressions.
- CSS styles
These are the styles that define the component's appearance. They can include standard CSS styles, as well as CSS classes and inline styles. CSS styles are written in razor syntax, which allows them to be combined with C# code and expressions.
- C# code
This is the code that defines the component's behavior and state. It can include C# variables, methods, and logic. C# code is written in a special block of razor syntax, which allows it to be combined with HTML elements and CSS styles.
Here is an example of a simple Blazor component that includes all three sections,
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>
@functions {
int currentCount = 0;
void IncrementCount() {
currentCount++;
}
}
This component displays a heading, a paragraph, and a button. The heading and paragraph are HTML elements, and the button is an HTML element with an @onclick attribute that specifies a C# method to be called when the button is clicked. The C# code block at the bottom defines the currentCount variable and the IncrementCount method, which updates the currentCount variable and increments it by 1 when the button is clicked.
Component types
In Blazor, there are two main types of components: function components and class components.
- Function components
These are simple components that do not have their own state. They are defined using a C# function that returns a render fragment, which is a piece of razor syntax that specifies the component's UI. Function components are lightweight and easy to use, but they are not suitable for scenarios where state management is required.
- Class components
These are more powerful components that can have their own state and lifecycle. They are defined using a C# class that derives from the ComponentBase class and overrides its methods to specify the component's UI and behavior. Class components can manage their own state and handle complex logic, but they are more verbose and require more code than function components.
In addition to these two types of components, Blazor also supports two other types of components,
- Layout components
These are special components that define the overall layout of a Blazor app. They can contain other components and HTML elements and specify where the app's content and UI should be rendered.
- Razor components
These are components that are defined using a special syntax called Razor syntax, which is a combination of HTML and C#. Razor components can be used to build the UI and interactivity of a Blazor app.
Conclusion
Blazor is a framework for building interactive web applications that involve real-time communication between a client and a server. It uses a combination of WebSockets, SignalR, and server-side rendering to enable bidirectional communication and provide a rich, interactive user experience with minimal network traffic and low latency.
Blazor apps are built using components, which are reusable pieces of UI that can contain HTML elements, CSS styles, and C# code. There are two types of components in Blazor: function components and class components. Function components are simple and lightweight, while class components are more powerful and can manage their own state and handle complex logic.
Blazor also supports two other types of components: layout components and razor components. Layout components define the overall layout of an app, and razor components are defined using a special syntax called razor syntax, which is a combination of HTML and C#.
I hope this gives you a good understanding of how Blazor works and the types of components that can be used to build Blazor apps.