在现代Web开发中，实现一个动态的点赞功能是非常常见的需求。本文将详细介绍如何在ASP.NET Web Forms中实现一个视频点赞功能，包括前端页面的展示和后端的处理逻辑。我们将确保点赞数量能够实时更新，而无需刷新整个页面。
技术栈
- ASP.NET Web Forms
- C#
- jQuery
- AJAX
项目结构
Play.aspx：前端页面VideoLike.ashx：处理点赞和取消点赞的通用处理程序
详细功能介绍
前端页面 (Play.aspx)
-
页面布局：
- 使用
MasterPage来组织页面结构，确保页面的一致性。 - 使用
Repeater控件来绑定视频信息，包括标题、位置、头像、昵称等。
- 使用
-
视频播放器：
- 引入阿里云播放器的CSS和JS文件。
- 创建一个新的
Aliplayer实例，配置播放器的各项参数，如视频源、封面、自动播放等。 - 监听截图事件，当用户点击截图按钮时，将截图保存为图片文件并下载。
-
点赞功能：
- 使用
like-icon类来表示点赞图标，初始状态为白色（未点赞），点击后变为红色（已点赞）。 - 使用
like-count类来显示点赞数量，初始状态为0时显示“点赞”文本。 - 当用户点击点赞图标时，通过AJAX请求调用后端处理程序
VideoLike.ashx，更新点赞状态和数量。 - 成功处理后，更新前端显示的点赞数量和图标状态；失败处理时，恢复原状。
- 使用
后端处理 (VideoLike.ashx)
-
处理请求：
- 设置响应内容类型为JSON。
- 从请求参数中获取用户ID、视频ID和操作类型（点赞或取消点赞）。
-
业务逻辑：
- 使用
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.base64
var 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);// 获取当前点赞数量，如果为空则初始化为0
dianzan.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"];// 获取请求中的视频ID
string userId = context.Request.Form["userId"];// 获取请求中的用户ID
string 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 官方文档
希望这篇博文对你有帮助！如果有任何问题或需要进一步优化，请随时告诉我。
