C#快速入门：Blazor Server端开发指南

博主：小蓝
发布时间：2024 年 11 月 29 日
333 次浏览
暂无评论
3288字数
分类： Linux 技术杂烩

# C#快速入门：Blazor Server端开发指南

Blazor是微软推出的一个使用**C#**构建**交互式Web应用**的框架。它允许开发者使用C#和.NET，而不是JavaScript，来创建客户端Web应用。本文将带您快速入门**Blazor Server端**的开发。🚀

## 一、什么是Blazor Server？

Blazor有两种托管模式：**Blazor WebAssembly**和**Blazor Server**。

- **Blazor WebAssembly**：在客户端浏览器中运行，使用WebAssembly加载.NET运行时。
- **Blazor Server**：在服务器上运行组件，通过**SignalR**与客户端通信。

**原理示意图：**

```mermaid
graph LR
A[客户端浏览器] -- SignalR连接 ⚡️ --> B[服务器上的Blazor应用]
B -- 发送UI更新 --> A
A -- 用户交互事件 --> B
```

## 二、环境准备

### 1. 安装.NET SDK

确保已安装**.NET 6.0或更高版本**的SDK。您可以在终端中运行以下命令检查版本：

```bash
dotnet --version
```

**解释：**

- `dotnet --version`：显示已安装的.NET SDK版本。

### 2. 安装Visual Studio

建议使用**Visual Studio 2022**或更新的版本，并安装**ASP.NET和Web开发**工作负载。

## 三、创建Blazor Server项目

### 1. 使用Visual Studio创建项目

- 打开Visual Studio，选择**创建新项目**。
- 搜索并选择**Blazor Server应用**模板。
- 选择项目名称和保存位置，点击**创建**。

### 2. 项目结构解析

- **Pages**文件夹：存放**Razor组件**，以 `.razor`为扩展名。
- **Shared**文件夹：存放共享组件，如导航栏等。
- **_Host.cshtml**：Blazor Server的**入口页面**。

## 四、运行和测试应用

点击**运行按钮 ▶️**，启动应用程序。在浏览器中将看到默认的Blazor模板，包括首页、计数器和获取数据页面。

## 五、创建自定义组件

### 1. 创建新的组件

在**Pages**文件夹中，添加一个新组件**HelloWorld.razor**。

```razor
<h3>Hello, @Name! 😊</h3>

@code {
    [Parameter]
    public string Name { get; set; } = "Blazor";
}
```

**解释：**

- `<h3>`标签：显示欢迎信息。
- `@Name`：使用C#变量 `Name`。
- `[Parameter]`：标记 `Name`为可传递的参数。
- `@code { }`：C#代码块，定义组件的逻辑。

### 2. 使用组件

在**Index.razor**中，添加以下代码：

```razor
<HelloWorld Name="Blazor Server"></HelloWorld>
```

**解释：**

- `<HelloWorld>`：使用我们刚刚创建的 `HelloWorld`组件。
- `Name="Blazor Server"`：传递参数 `Name`的值。

## 六、数据绑定与事件处理

### 1. 双向数据绑定

在**Counter.razor**中，添加一个输入框，实现双向数据绑定。

```razor
<input @bind="currentCount" />

你输入的数字是：@currentCount
```

**解释：**

- `@bind="currentCount"`：实现输入框与 `currentCount`变量的双向绑定。
- `@currentCount`：实时显示 `currentCount`的值。

### 2. 事件处理

修改**Counter.razor**的按钮点击事件。

```razor
<button class="btn btn-primary" @onclick="IncrementCount">点击我</button>

@code {
    private void IncrementCount()
    {
        currentCount++;
    }
}
```

**解释：**

- `@onclick="IncrementCount"`：指定按钮的点击事件处理函数。
- `IncrementCount`方法：每次调用时，`currentCount`加一。

## 七、依赖注入

### 1. 注册服务

在**Program.cs**中，注册一个服务。

```csharp
builder.Services.AddSingleton<WeatherForecastService>();
```

**解释：**

- `AddSingleton<T>()`：将 `WeatherForecastService`注册为**单例服务**。

### 2. 使用服务

在**FetchData.razor**中，注入服务并使用。

```razor
@inject WeatherForecastService ForecastService

@code {
    private WeatherForecast[] forecasts;

protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}
```

**解释：**

- `@inject`：注入服务 `WeatherForecastService`，并命名为 `ForecastService`。
- `OnInitializedAsync`：组件初始化时，调用服务的方法获取数据。

## 八、Blazor Server的工作流程

```mermaid
graph TD
A[客户端浏览器] -- 发送请求 --> B[服务器上的Blazor应用]
B -- 返回初始HTML --> A
A -- 建立SignalR连接 --> B
B -- 处理用户事件 --> C[更新组件状态]
C -- 发送UI更新 --> A
```

**解释：**

- 初始请求：客户端请求页面，服务器返回初始的HTML。
- SignalR连接：客户端与服务器建立**SignalR长连接**。
- 事件处理：用户在客户端的操作通过SignalR传递到服务器。
- UI更新：服务器计算后的UI更新通过SignalR发送回客户端。

## 九、部署Blazor Server应用

### 1. 发布应用

在Visual Studio中，右键点击项目，选择**发布**，按照向导完成发布设置。

### 2. 部署到服务器

将发布的文件部署到支持**ASP.NET Core**的服务器上，如IIS或Azure。

## 十、总结

通过本文的介绍，您应该对**Blazor Server端开发**有了基本的了解。Blazor提供了使用C#构建现代Web应用的全新方式，值得深入学习和探索。💡

---

✨祝您在Blazor的世界里开发愉快！😊

蓝易云是一家专注于香港及国内数据中心服务的提供商，提供高质量的服务器租用和云计算服务、包括免备案香港服务器、香港CN2、美国服务器、海外高防服务器、国内高防服务器、香港VPS等。致力于为用户提供稳定,快速的网络连接和优质的客户体验。

最后修改：2024 年 11 月 29 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

C#快速入门：Blazor Server端开发指南

小蓝 • 2024 年 11 月 29 日

# C#快速入门：Blazor Server端开发指南

## 一、什么是Blazor Server？

Blazor有两种托管模式：**Blazor WebAssembly**和**Blazor Server**。

**原理示意图：**

```mermaid
graph LR
A[客户端浏览器] -- SignalR连接 ⚡️ --> B[服务器上的Blazor应用]
B -- 发送UI更新 --> A
A -- 用户交互事件 --> B
```

## 二、环境准备

### 1. 安装.NET SDK

确保已安装**.NET 6.0或更高版本**的SDK。您可以在终端中运行以下命令检查版本：

```bash
dotnet --version
```

**解释：**

- `dotnet --version`：显示已安装的.NET SDK版本。

### 2. 安装Visual Studio

建议使用**Visual Studio 2022**或更新的版本，并安装**ASP.NET和Web开发**工作负载。

## 三、创建Blazor Server项目

### 1. 使用Visual Studio创建项目

### 2. 项目结构解析

## 四、运行和测试应用

点击**运行按钮 ▶️**，启动应用程序。在浏览器中将看到默认的Blazor模板，包括首页、计数器和获取数据页面。

## 五、创建自定义组件

### 1. 创建新的组件

在**Pages**文件夹中，添加一个新组件**HelloWorld.razor**。

```razor
<h3>Hello, @Name! 😊</h3>

@code {
    [Parameter]
    public string Name { get; set; } = "Blazor";
}
```

**解释：**

- `<h3>`标签：显示欢迎信息。
- `@Name`：使用C#变量 `Name`。
- `[Parameter]`：标记 `Name`为可传递的参数。
- `@code { }`：C#代码块，定义组件的逻辑。

### 2. 使用组件

在**Index.razor**中，添加以下代码：

```razor
<HelloWorld Name="Blazor Server"></HelloWorld>
```

**解释：**

- `<HelloWorld>`：使用我们刚刚创建的 `HelloWorld`组件。
- `Name="Blazor Server"`：传递参数 `Name`的值。

## 六、数据绑定与事件处理

### 1. 双向数据绑定

在**Counter.razor**中，添加一个输入框，实现双向数据绑定。

```razor
<input @bind="currentCount" />

你输入的数字是：@currentCount
```

**解释：**

- `@bind="currentCount"`：实现输入框与 `currentCount`变量的双向绑定。
- `@currentCount`：实时显示 `currentCount`的值。

### 2. 事件处理

修改**Counter.razor**的按钮点击事件。

```razor
<button class="btn btn-primary" @onclick="IncrementCount">点击我</button>

@code {
    private void IncrementCount()
    {
        currentCount++;
    }
}
```

**解释：**

- `@onclick="IncrementCount"`：指定按钮的点击事件处理函数。
- `IncrementCount`方法：每次调用时，`currentCount`加一。

## 七、依赖注入

### 1. 注册服务

在**Program.cs**中，注册一个服务。

```csharp
builder.Services.AddSingleton<WeatherForecastService>();
```

**解释：**

- `AddSingleton<T>()`：将 `WeatherForecastService`注册为**单例服务**。

### 2. 使用服务

在**FetchData.razor**中，注入服务并使用。

```razor
@inject WeatherForecastService ForecastService

@code {
    private WeatherForecast[] forecasts;

protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}
```

**解释：**

- `@inject`：注入服务 `WeatherForecastService`，并命名为 `ForecastService`。
- `OnInitializedAsync`：组件初始化时，调用服务的方法获取数据。

## 八、Blazor Server的工作流程

**解释：**

## 九、部署Blazor Server应用

### 1. 发布应用

在Visual Studio中，右键点击项目，选择**发布**，按照向导完成发布设置。

### 2. 部署到服务器

将发布的文件部署到支持**ASP.NET Core**的服务器上，如IIS或Azure。

## 十、总结

---

✨祝您在Blazor的世界里开发愉快！😊

C#快速入门：Blazor Server端开发指南

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

微信视频号视频下载工具WeChatVideoDownloader

Win11系统优化工具-Windows11一键设置

YDArk - 系统内核工具

XPay-自建个人免签收款支付系统

Windows微软常用运行库合集一键安装

MySQL 数据库表约束类型与用法

gRPC技术中的gRPC到HTTP的转换

在MySQL数据库系统中配置用户权限与远程访问

uniapp中uni-popup的用法

云服务器小白零基础建站教程：阿里云服务器、腾讯云服务器新手建站详细步骤（2024最新版） - 蓝易云

C#快速入门：Blazor Server端开发指南

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

C#快速入门：Blazor Server端开发指南

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款