在现代Web开发中，实现一个动态的点赞功能是非常常见的需求。本文将详细介绍如何在ASP.NET Web Forms中实现一个视频点赞功能，包括前端页面的展示和后端的处理逻辑。我们将确保点赞数量能够实时更新，而无需刷新整个页面。

技术栈

• ASP.NET Web Forms
• C#
• jQuery
• AJAX

项目结构

• Play.aspx：前端页面
• VideoLike.ashx：处理点赞和取消点赞的通用处理程序

详细功能介绍

前端页面 (Play.aspx)

1. 页面布局：

   • 使用 MasterPage 来组织页面结构，确保页面的一致性。
   • 使用 Repeater 控件来绑定视频信息，包括标题、位置、头像、昵称等。

2. 视频播放器：

   • 引入阿里云播放器的CSS和JS文件。
   • 创建一个新的 Aliplayer 实例，配置播放器的各项参数，如视频源、封面、自动播放等。
   • 监听截图事件，当用户点击截图按钮时，将截图保存为图片文件并下载。

3. 点赞功能：

   • 使用 like-icon 类来表示点赞图标，初始状态为白色（未点赞），点击后变为红色（已点赞）。
   • 使用 like-count 类来显示点赞数量，初始状态为0时显示“点赞”文本。
   • 当用户点击点赞图标时，通过AJAX请求调用后端处理程序 VideoLike.ashx，更新点赞状态和数量。
   • 成功处理后，更新前端显示的点赞数量和图标状态；失败处理时，恢复原状。

后端处理 (VideoLike.ashx)

1. 处理请求：

   • 设置响应内容类型为JSON。
   • 从请求参数中获取用户ID、视频ID和操作类型（点赞或取消点赞）。

2. 业务逻辑：

   • 使用 LikeMangerBLL 类来处理点赞和取消点赞的业务逻辑。
   • 根据操作类型调用相应的方法，更新点赞状态。
   • 返回成功或失败的响应结果。

前端页面 (Play.aspx)

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Play.aspx.cs" Inherits="HPITAixiu.Play" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/skins/default/aliplayer-min.css" /><style>.fab-title {width: 50%;left: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));}.title {width: 100%;margin-bottom: 10rem;background: rgba(0,0,0,0.4);padding: 0.2rem 0.8rem;border-radius: 0.3rem;}.avatar {width: 42px;height: 42px;border-radius: 42px;}.nickname {width: 4em;text-overflow: ellipsis;}</style></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><div class="pages"><div class="page" data-page="play"><div class="page-content"><div class="prism-player" id="player"></div></div><asp:Repeater ID="rptVideos" runat="server"><ItemTemplate><div class="fab fab-center-center fab-title" style="margin: 115px 0 80px 70px; width: 140px;"><div class="title text-color-white"><p><%#(Eval("Headline"))%></p><p style="font-size: 12px;"><i class="f7-icons size-14">placemark</i>[<%#(Eval("Location")??"未知")%>]</p></div></div><div class="fab fab-right-bottom" style="margin-bottom: 70px;"><!-- 头像 --><a href="Videos.aspx?userId=<%#Eval("TBUsers.Id")%>" class="videos box-shadow-none bg-color-none external"><img class="avatar" src="<%#(Eval("TBUsers.Avatar")??"/imgs/avatar.jpg")%>" /></a><!-- 账号名 --><p class="nickname text-color-white text-align-center no-margin-top"><%#(Eval("TBUsers.NickName"))%></p><!-- 点赞 --><a href="#" class="like box-shadow-none bg-color-none"><i class="like-icon <%=IsLike?"text-color-pink":"text-color-white" %> icon f7-icons size-42">heart_fill</i></a><!-- 点赞数量 --><p class="like-count text-color-white text-align-center no-margin-top"><%--<% if (LikeCount == 0){ %>点赞<% }else{%> <%} %><span class="dianzan"><% if (LikeCount == 0){ %>  <% }else{%><%=LikeCount %><%} %></span>--%><%--<% if (LikeCount == 0) { %>点赞<% } else { %><span class="dianzan"><%= LikeCount %></span><% } %>--%><span class="like-text"><% if (LikeCount == 0) { %>点赞<% } %></span><span class="dianzan"><%= LikeCount > 0 ? LikeCount.ToString() : "" %></span></p><!-- 评论 --><a href="Discuss.aspx?videoId=<%#Eval("VideoId")%>" class="discuss box-shadow-none bg-color-none external"><i class="discuss-icon icon f7-icons text-color-white size-42">chat_bubble_text</i></a><p class="discuss-count text-color-white text-align-center no-margin-top"></p></div></ItemTemplate></asp:Repeater></div></div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScripttPlaceHolder2" runat="server"><%--引入阿里云播放器的JavaScript库--%><script src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/aliplayer-min.js" type="text/javascript" charset="utf-8"></script><script src="Scripts/jquery-3.7.0.min.js" type="text/javascript"></script><script>// 创建一个新的Aliplayer实例var player = new Aliplayer({"id": "player","source": "<%=PlayURL%>","width": "100%","height": "100%","autoplay": false,  // 自动播放"isLive": false,"cover": "<%=CoverURL%>","rePlay": true,"playsinline": true,"preload": true,"language": "zh-cn","controlBarVisibility": "hover",// click点击显示时长//"showBarTime": 5000,"useH5Prism": true,"extraInfo": {"crossOrigin": "anonymous"},"skinLayout": [{"name": "bigPlayButton","align": "blabs","x": 30,"y": 80},{"name": "H5Loading","align": "cc"},{"name": "errorDisplay","align": "tlabs","x": 0,"y": 0},{"name": "infoDisplay"},{"name": "tooltip","align": "blabs","x": 0,"y": 56},{"name": "thumbnail"},{"name": "controlBar","align": "blabs","x": 0,"y": 0,"children": [{"name": "progress","align": "blabs","x": 0,"y": 44},{"name": "playButton","align": "tl","x": 15,"y": 12},{"name": "timeDisplay","align": "tl","x": 10,"y": 7},{"name": "fullScreenButton","align": "tr","x": 10,"y": 12},{"name": "subtitle","align": "tr","x": 15,"y": 12},{"name": "setting","align": "tr","x": 15,"y": 12},{"name": "volume","align": "tr","x": 5,"y": 10},{"name": "snapshot","align": "tr","x": 10,"y": 12}]}]}, function (player) {  // 播放器创建成功的回调函数console.log("The player is created");   // 打印消息到控制台});/* h5截图按钮, 截图成功回调 *///监听截图事件，当用户点击截图按钮时触发player.on('snapshoted', function (data) {var pictureData = data.paramData.base64var downloadElement = document.createElement('a')downloadElement.setAttribute('href', pictureData)var fileName = 'Aliplayer' + Date.now() + '.png'downloadElement.setAttribute('download', fileName)downloadElement.click()pictureData = null})var videoId = "<%=videoId%>";var userId = "<%=userId%>";// 点赞方法$$(".like-icon").on("click", function () {var likeText = $$(".like-text"); // 获取点赞文本元素var dianzan = $$(".dianzan"); // 获取点赞数量元素// 没有点赞if ($$(".like-icon").hasClass("text-color-white")) {// 将图标变成红色$$(".like-icon").addClass("text-color-pink").removeClass("text-color-white");// 更新点赞数量var currentCount = dianzan.html() === "" ? 0 : parseInt(dianzan.html(), 10);// 获取当前点赞数量，如果为空则初始化为0dianzan.html(currentCount + 1);// 增加点赞数量likeText.hide(); // 隐藏“点赞”文本// 调用BLL中的添加点赞方法，使用ajax连接一般处理程序$.post("ashx/VideoLike.ashx", { userId: userId, videoId: videoId, action: "addLike" }, function (response) {if (response.success) {// 成功处理} else {// 失败处理，例如恢复原状dianzan.html(currentCount);$$(".like-icon").addClass("text-color-white").removeClass("text-color-pink");// 恢复图标颜色if (currentCount === 0) {likeText.show();// 如果原来的点赞数量为0，显示“点赞”文本}}}, "json");} else {// 将图标变回白色$$(".like-icon").removeClass("text-color-pink").addClass("text-color-white");// 更新点赞数量var currentCount = parseInt(dianzan.html(), 10);// 获取当前点赞数量if (currentCount > 0) {dianzan.html(currentCount - 1);// 减少点赞数量if (currentCount - 1 === 0) {dianzan.html("");// 如果减少后的点赞数量为0，清空点赞数量likeText.show();// 显示“点赞”文本}}// 调用BLL中的取消点赞方法，使用ajax连接一般处理程序$.post("ashx/VideoLike.ashx", { userId: userId, videoId: videoId, action: "removeLike" }, function (response) {if (response.success) {// 成功处理} else {// 失败处理，例如恢复原状dianzan.html(currentCount); // 恢复原来的点赞数量$$(".like-icon").addClass("text-color-pink").removeClass("text-color-white");// 恢复图标颜色if (currentCount === 1) {dianzan.html("");// 如果原来的点赞数量为1，清空点赞数量likeText.show();// 显示“点赞”文本}}}, "json");}});</script>
</asp: Content>

后端处理 (VideoLike.ashx)

using HPIT.BLL;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;namespace HPITAixiu.ashx
{/// <summary>/// VideoLike 的摘要说明/// </summary>public class VideoLike : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";string videoId = context.Request.Form["videoId"];// 获取请求中的视频IDstring userId = context.Request.Form["userId"];// 获取请求中的用户IDstring action = context.Request.Form["action"];// 获取请求中的操作类型（addLike或removeLike）// 创建点赞管理业务逻辑层对象LikeMangerBLL likeMangerBLL = new LikeMangerBLL();bool success = false;// 如果获取action是addLike就调用BLL中的添加点赞方法if (action == "addLike"){// 调用BLL中的添加点赞方法success = likeMangerBLL.AddLike(videoId, int.Parse(userId));}// 否则调用移除方法else if (action == "removeLike"){// 调用BLL中的取消点赞方法success = likeMangerBLL.removeLike(videoId, int.Parse(userId));}// 创建响应对象var response = new { success = success };// 将响应对象序列化为JSON并写入响应context.Response.Write(JsonConvert.SerializeObject(response));}public bool IsReusable{get{return false;}}}
}

总结

通过上述代码，我们实现了一个完整的视频点赞功能。前端页面使用ASP.NET Web Forms和jQuery，后端使用C#和AJAX进行数据交互。点赞数量能够实时更新，用户体验良好。希望本文对你有所帮助，如果有任何问题或建议，欢迎留言交流！

参考资料

• ASP.NET Web Forms 官方文档
• jQuery 官方文档
• AJAX 官方文档

希望这篇博文对你有帮助！如果有任何问题或需要进一步优化，请随时告诉我。