如何实现ASP.NET中点赞/点踩按钮无页面刷新功能？

咱们先理清核心问题：你现在用<a>标签触发请求，加上Controller方法最后返回RedirectToAction，自然会导致页面跳转刷新。要实现无刷新交互，得用AJAX异步请求处理点赞/点踩逻辑，再实时更新页面上的计数，而不是让整个页面重新加载。

下面是具体的修改步骤：

1. 调整Controller方法返回值 #

把原来返回页面跳转的逻辑改成返回JSON数据，让前端能接收更新后的计数和操作状态：

// 点赞方法
public async Task<IActionResult> Like(int id)
{
    var memy = db.Memy.SingleOrDefault(s => s.Id_mema == id);
    if (memy == null)
    {
        return Json(new { success = false, message = "未找到对应的内容" });
    }
    memy.Like++;
    db.Update(memy);
    await db.SaveChangesAsync();
    // 返回更新后的点赞数与操作状态
    return Json(new { success = true, likeCount = memy.Like });
}

// 点踩方法
public async Task<IActionResult> Dislike(int id)
{
    var memy = db.Memy.SingleOrDefault(s => s.Id_mema == id);
    if (memy == null)
    {
        return Json(new { success = false, message = "未找到对应的内容" });
    }
    memy.Dislike++;
    db.Update(memy);
    await db.SaveChangesAsync();
    // 返回更新后的点踩数与操作状态
    return Json(new { success = true, dislikeCount = memy.Dislike });
}

这里做了两个关键优化：

• 增加空值判断，避免空引用异常
• 替换RedirectToAction为Json返回，让前端能直接拿到更新后的数据

2. 修改视图并添加异步交互逻辑 #

把触发跳转的<a>标签改成按钮（或保留<a>但阻止默认跳转），再用JavaScript绑定异步请求：

<p class="opis">@item.Description</p>
<p class="item-id">@item.Id_mema</p>
<a asp-action="Delete" asp-route-id="@item.Id_mema">Delete</a>
<a asp-action="Edit" asp-route-id="@item.Id_mema">Edit</a>
<!-- 替换为按钮并添加标识，方便JS定位 -->
<button class="like-btn" data-id="@item.Id_mema">Like</button>
<span class="like-count">@item.Like</span>
<button class="dislike-btn" data-id="@item.Id_mema">Dislike</button>
<span class="dislike-count">@item.Dislike</span>

<!-- 添加异步交互脚本，可放在页面底部或单独JS文件 -->
<script>
// 绑定点赞按钮事件
document.querySelectorAll('.like-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const itemId = this.getAttribute('data-id');
        const likeCountElement = this.nextElementSibling;
        
        try {
            const response = await fetch(`/你的控制器名称/Like/${itemId}`, {
                method: 'POST', // 修改操作建议用POST，更符合REST规范
                headers: {
                    // 带上ASP.NET的防CSRF令牌，避免请求被拦截
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                }
            });
            
            const result = await response.json();
            if (result.success) {
                // 实时更新页面上的点赞数
                likeCountElement.textContent = result.likeCount;
            } else {
                alert(result.message || '点赞失败');
            }
        } catch (error) {
            console.error('请求出错:', error);
            alert('点赞请求失败，请稍后重试');
        }
    });
});

// 绑定点踩按钮事件
document.querySelectorAll('.dislike-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const itemId = this.getAttribute('data-id');
        const dislikeCountElement = this.nextElementSibling;
        
        try {
            const response = await fetch(`/你的控制器名称/Dislike/${itemId}`, {
                method: 'POST',
                headers: {
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                }
            });
            
            const result = await response.json();
            if (result.success) {
                dislikeCountElement.textContent = result.dislikeCount;
            } else {
                alert(result.message || '点踩失败');
            }
        } catch (error) {
            console.error('请求出错:', error);
            alert('点踩请求失败，请稍后重试');
        }
    });
});
</script>

这里的核心调整：

• 用按钮替代<a>标签，避免默认跳转行为
• 通过data-id传递内容ID，方便JS获取参数
• 用fetch API发起异步POST请求，带上防CSRF令牌确保请求合法
• 请求成功后直接更新页面上的计数元素，无需刷新整个页面

3. 额外注意事项 #

• 把代码中的你的控制器名称替换成你实际的控制器类名（比如控制器是MemyController，就改成/Memy/Like/${itemId}）
• 如果是ASP.NET Core项目，默认已启用防CSRF保护，视图中会自动生成__RequestVerificationToken隐藏字段，无需额外配置
• 可以给按钮添加加载状态（比如点击后禁用按钮、显示“加载中”），避免用户重复点击

这样修改后，点击点赞/点踩按钮就只会异步更新数据库和页面计数，不会再刷新整个页面了。

内容的提问来源于stack exchange，提问作者Bart