ASP.NET Core Razor页面实现LocalStorage球队收藏列表求助

核心逻辑 #

通过前端JS操作LocalStorage存储已收藏球队的ID，页面加载时读取LocalStorage同步图标状态，点击心形图标切换收藏状态并更新LocalStorage，实现刷新/跳转后状态保留。

1. 后端数据准备（teams.cshtml.cs） #

从SQL数据库获取球队列表，传递给前端页面：

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Threading.Tasks;

public class TeamsModel : PageModel
{
    private readonly AppDbContext _dbContext;

    public TeamsModel(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public List<Team> Teams { get; set; }

    public async Task OnGetAsync()
    {
        // 从SQL数据库查询球队数据
        Teams = await _dbContext.Teams.ToListAsync();
    }
}

// 球队实体类，需与数据库表结构对应
public class Team
{
    public int TeamId { get; set; } // 唯一标识，用于收藏匹配
    public string TeamName { get; set; }
    public string City { get; set; }
    // 其他数据库字段
}

2. 前端页面修改（teams.cshtml） #

在表格中添加心形收藏图标，绑定点击事件并同步LocalStorage状态：

@page
@model TeamsModel

<h1>球队列表</h1>

<table class="table table-striped">
    <thead>
        <tr>
            <th>球队名称</th>
            <th>所在城市</th>
            <th>收藏</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var team in Model.Teams)
        {
            <tr>
                <td>@team.TeamName</td>
                <td>@team.City</td>
                <td>
                    <!-- 心形图标，用data-team-id存储球队唯一ID -->
                    <i class="favorite-icon far fa-heart" data-team-id="@team.TeamId"></i>
                </td>
            </tr>
        }
    </tbody>
</table>

<style>
    /* 收藏图标样式优化 */
    .favorite-icon {
        cursor: pointer;
        font-size: 1.2rem;
        color: #999;
    }
    .favorite-icon.fas {
        color: #e53e3e; /* 实心图标设为红色 */
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 读取LocalStorage中已收藏的球队ID数组
        let favoriteTeamIds = JSON.parse(localStorage.getItem('favoriteTeams')) || [];
        const icons = document.querySelectorAll('.favorite-icon');

        // 初始化图标状态：匹配已收藏ID则显示实心图标
        icons.forEach(icon => {
            const teamId = icon.getAttribute('data-team-id');
            if (favoriteTeamIds.includes(teamId)) {
                icon.classList.replace('far', 'fas');
            }
        });

        // 绑定点击事件：切换收藏状态并更新LocalStorage
        icons.forEach(icon => {
            icon.addEventListener('click', function() {
                const teamId = this.getAttribute('data-team-id');
                let favoriteTeamIds = JSON.parse(localStorage.getItem('favoriteTeams')) || [];

                if (favoriteTeamIds.includes(teamId)) {
                    // 取消收藏：移除ID，切换为空心图标
                    favoriteTeamIds = favoriteTeamIds.filter(id => id !== teamId);
                    this.classList.replace('fas', 'far');
                } else {
                    // 添加收藏：加入ID，切换为实心图标
                    favoriteTeamIds.push(teamId);
                    this.classList.replace('far', 'fas');
                }

                // 更新LocalStorage
                localStorage.setItem('favoriteTeams', JSON.stringify(favoriteTeamIds));
            });
        });
    });
</script>

3. 全局资源引入（_layout2.cshtml） #

若未引入Font Awesome图标库，需在布局页的<head>中添加（建议本地部署资源，避免外链依赖）：

<head>
    <!-- 其他全局资源 -->
    <link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css">
</head>

关键注意事项 #

• LocalStorage仅存储字符串，需用JSON.stringify和JSON.parse处理数组
• 确保后端传递的球队ID与前端存储的ID类型统一
• 跨页面同步收藏状态时，只需在目标页面读取同一个favoriteTeams键即可
• 若需用户登录后同步到服务器，可后续扩展将LocalStorage数据提交至后端数据库

内容的提问来源于stack exchange，提问作者New' asp.net core' One