使用 .NET Core 6.0 构建简单的 Blazor Server 应用程序来获取和显示 RSS Feed

一.简介

在本文中，我们将指导您如何使用 .NET Core 6.0 构建一个简单的 Blazor Server 应用程序，该应用程序从 C# Corner 网站获取 RSS Feed，并显示最新内容。此项目将展示如何使用依赖注入和 HttpClient 来检索 RSS Feed，并在网页上渲染它们。

二.前提条件

要跟随本文，您需要具备以下条件：

• Visual Studio 2022（或更高版本）
• .NET Core 6.0 SDK
• 对 Blazor 和 .NET Core 的基本了解

三. 创建 Blazor Server 应用程序

1. 打开 Visual Studio。
2. 创建一个新的 Blazor Server 应用项目。
3. 为您的项目命名（例如，BlazorRSSFeed），并选择 .NET 6.0（长期支持）作为框架。
4. 点击“创建”按钮。

创建项目后，您将会有一个基本的 Blazor Server 应用程序结构。

四. 设置所需的 NuGet 包

我们需要使用 System.ServiceModel.Syndication 包来处理 RSS Feed 的处理。

1. 在解决方案资源管理器中，右键单击项目，选择“管理 NuGet 包”。
2. 在“浏览”选项卡中，搜索 System.ServiceModel.Syndication 并安装该包。

五. 创建 RssFeedService

您需要创建一个服务，该服务将从 C# Corner 网站获取 RSS Feed 数据。该服务将使用 HttpClient 请求数据。

1. 在解决方案资源管理器中，右键单击 Services 文件夹（如果没有，则创建一个），选择“添加 > 类”。
2. 将其命名为 RssFeedService.cs。

以下是 RssFeedService 的代码：

using System;  // 引入系统命名空间
using System.Collections.Generic;  // 引入集合命名空间
using System.Net.Http;  // 引入 Http 命名空间
using System.ServiceModel.Syndication;  // 引入 Syndication 命名空间
using System.Threading.Tasks;  // 引入异步任务命名空间
using System.Xml;  // 引入 XML 命名空间

public class RssFeedService  // 定义 RssFeedService 类
{
    private readonly HttpClient _httpClient;  // 声明 HttpClient 对象

    public RssFeedService(HttpClient httpClient)  // 构造函数，接受 HttpClient 对象
    {
        _httpClient = httpClient;  // 初始化 HttpClient
    }

    public async Task<string> GetRssFeedAsync()  // 异步方法获取 RSS Feed
    {
        var response = await _httpClient.GetStringAsync("https://www.c-sharpcorner.com/rss/latestcontentall.aspx");  // 获取 RSS Feed 内容
        return response;  // 返回内容
    }

    public async Task<List<SyndicationItem>> GetRssFeedAsync(string feedUrl)  // 另一个异步方法，接受 RSS Feed URL
    {
        try
        {
            using var response = await _httpClient.GetAsync(feedUrl);  // 获取 RSS Feed 响应
            response.EnsureSuccessStatusCode();  // 确保状态码为 200-299，否则抛出异常
            using var stream = await response.Content.ReadAsStreamAsync();  // 读取响应流
            using var xmlReader = XmlReader.Create(stream);  // 创建 XML 读取器
            var syndicationFeed = SyndicationFeed.Load(xmlReader);  // 加载 SyndicationFeed
            return syndicationFeed?.Items.ToList() ?? new List<SyndicationItem>();  // 返回 RSS Feed 项目列表
        }
        catch (Exception ex)  // 捕获异常
        {
            Console.WriteLine($"Error: {ex.Message}");  // 打印错误信息
            return new List<SyndicationItem>();  // 返回空列表
        }
    }
}

六. 在依赖注入中注册 RssFeedService

您必须在依赖注入（DI）容器中注册 RssFeedService，以便将其注入到 Blazor 组件中。

1. 打开项目根目录中的 Program.cs 文件。
2. 添加以下代码行以注册 RssFeedService 及其 HttpClient。

using BlazorRSSFeed.Data;  // 引入数据命名空间
using Microsoft.AspNetCore.Components;  // 引入组件命名空间
using Microsoft.AspNetCore.Components.Web;  // 引入 Web 组件命名空间

var builder = WebApplication.CreateBuilder(args);  // 创建应用程序构建器

// 将服务添加到容器
builder.Services.AddRazorPages();  // 添加 Razor 页面
builder.Services.AddServerSideBlazor();  // 添加 Blazor Server
builder.Services.AddHttpClient<RssFeedService>();  // 注册 RssFeedService 及其 HttpClient

var app = builder.Build();  // 构建应用程序

// 配置 HTTP 请求管道
if (!app.Environment.IsDevelopment())  // 如果不是开发环境
{
    app.UseExceptionHandler("/Error");  // 使用错误处理页面
    app.UseHsts();  // 使用 HSTS
}

app.UseHttpsRedirection();  // 启用 HTTPS 重定向
app.UseStaticFiles();  // 使用静态文件
app.UseRouting();  // 启用路由

app.MapBlazorHub();  // 映射 Blazor Hub
app.MapFallbackToPage("/_Host");  // 映射后备页面

app.Run();  // 运行应用程序

七. 创建 Blazor 组件以显示 RSS Feed

现在服务已经准备好并注册，您可以创建一个 Blazor 组件以获取并显示 RSS Feed。

1. 在解决方案资源管理器中，导航到 Pages 文件夹。
2. 右键单击并选择“添加 > Razor 组件”，命名为 RssFeed.razor。

以下是 RssFeed.razor 的代码：

@page "/rssfeed"  // 定义路由
@inject RssFeedService RssFeedService  // 注入 RssFeedService

<h3>最新的 C# Corner Feeds</h3>  // 标题

<ul>  // 开始无序列表
    @if (rssItems == null)  // 如果 rssItems 为 null
    {
        <li>加载中...</li>  // 显示加载信息
    }
    else  // 否则
    {
        @foreach (var item in rssItems)  // 遍历 rssItems
        {
            <li>  // 开始列表项
                <a href="@item.Links.FirstOrDefault()?.Uri" target="_blank">@item.Title.Text</a>  // 显示 RSS 项目标题，并链接到相应 URL
                <p>@item.Summary.Text</p>  // 显示 RSS 项目摘要
            </li>  // 结束列表项
        }
    }
</ul>  // 结束无序列表

@code {  // 代码块
    private List<System.ServiceModel.Syndication.SyndicationItem> rssItems;  // 声明 RSS 项目列表

    protected override async Task OnInitializedAsync()  // 重写初始化方法
    {
        rssItems = await RssFeedService.GetRssFeedAsync("https://www.c-sharpcorner.com/rss/latestcontentall.aspx");  // 获取 RSS Feed 数据
    }
}

八. 更新导航菜单

为了访问 RSS Feed 页面，您需要在导航菜单中添加一个链接。

1. 打开 Shared/NavMenu.razor 文件。
2. 添加以下导航链接：

<NavLink class="nav-link" href="/rssfeed">  // 创建导航链接
    <span class="oi oi-list-rich" aria-hidden="true"></span> RSS Feed  // RSS Feed 文本
</NavLink>

九. 运行应用程序

现在一切都已设置好，您可以通过按 F5 或单击 Visual Studio 中的“运行”按钮来运行应用程序。

应用程序启动后，导航到侧边栏中的 RSS Feed 链接。您应该能看到 C# Corner RSS Feed 的最新内容显示在页面上。

十. 结论

在本文中，我们演示了如何：

• 创建一个使用 .NET Core 6.0 的简单 Blazor Server 应用程序。
• 构建一个 RssFeedService 来从外部 RSS Feed 获取数据。
• 使用依赖注入（DI）将服务注入到 Blazor 组件中。
• 在 Blazor 组件中动态渲染 RSS Feed 数据。

这是一个基本但功能强大的应用程序，突出了如何使用 Blazor 进行实时数据获取和渲染。您可以通过格式化 Feed、添加错误处理或集成其他功能来进一步改进它。