如何在SharePoint自定义ASPX页面中实现点赞及点赞计数功能？

Hey there! Let's get that like functionality up and running on your custom SharePoint ASPX page. The code snippet you started is on the right track—we just need to fill in the gaps and make sure everything hooks up properly with SharePoint's Reputation API. Here's a complete, working implementation:

第一步：添加页面UI元素 #

首先在你的ASPX页面里加入用于显示点赞状态和计数的HTML：

<div class="sharepoint-like-widget">
  <button id="toggleLikeBtn" type="button" class="btn btn-primary">点赞</button>
  <span id="likeCountDisplay" class="like-count">0</span> 人已点赞
</div>

第二步：完整的jQuery/JavaScript实现 #

把这段代码放在页面的<script>标签里（确保已经引入jQuery）：

$(document).ready(function() {
    // 初始化点赞组件
    initLikeWidget();
});

var likepage = {
    // 获取当前用户是否已点赞该页面
    getUserLikedPage: function(callback) {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
            SP.SOD.executeFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() {
                var context = SP.ClientContext.get_current();
                var web = context.get_web();
                var pageListUrl = window.location.pathname.split('/').slice(0, -1).join('/');
                var pageItem = web.get_list(pageListUrl).getItemById(_spPageContextInfo.pageItemId);
                
                // 获取当前用户的点赞状态
                var userLike = Microsoft.Office.Server.ReputationModel.Reputation.getUserLike(context, pageItem.get_listId(), pageItem.get_id());
                // 获取总点赞数
                var likeCount = Microsoft.Office.Server.ReputationModel.Reputation.getLikeCount(context, pageItem.get_listId(), pageItem.get_id());
                
                context.executeQueryAsync(function() {
                    callback(userLike.get_value(), likeCount.get_value());
                }, function(sender, args) {
                    console.error('获取点赞状态失败: ' + args.get_message());
                    callback(false, 0);
                });
            });
        });
    },

    // 点赞操作
    LikePage: function() {
        SP.SOD.executeFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() {
            var context = SP.ClientContext.get_current();
            var pageListUrl = window.location.pathname.split('/').slice(0, -1).join('/');
            var pageItem = context.get_web().get_list(pageListUrl).getItemById(_spPageContextInfo.pageItemId);
            
            Microsoft.Office.Server.ReputationModel.Reputation.setLike(context, pageItem.get_listId(), pageItem.get_id(), true);
            context.executeQueryAsync(function() {
                // 操作成功后更新UI
                updateLikeDisplay();
            }, function(sender, args) {
                console.error('点赞失败: ' + args.get_message());
            });
        });
    },

    // 取消点赞操作
    UnlikePage: function() {
        SP.SOD.executeFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() {
            var context = SP.ClientContext.get_current();
            var pageListUrl = window.location.pathname.split('/').slice(0, -1).join('/');
            var pageItem = context.get_web().get_list(pageListUrl).getItemById(_spPageContextInfo.pageItemId);
            
            Microsoft.Office.Server.ReputationModel.Reputation.setLike(context, pageItem.get_listId(), pageItem.get_id(), false);
            context.executeQueryAsync(function() {
                // 操作成功后更新UI
                updateLikeDisplay();
            }, function(sender, args) {
                console.error('取消点赞失败: ' + args.get_message());
            });
        });
    }
};

// 初始化点赞组件UI
function initLikeWidget() {
    updateLikeDisplay();
    // 绑定按钮点击事件
    $('#toggleLikeBtn').click(function() {
        likepage.getUserLikedPage(function(liked) {
            if (liked) {
                likepage.UnlikePage();
            } else {
                likepage.LikePage();
            }
        });
    });
}

// 更新点赞状态和计数显示
function updateLikeDisplay() {
    likepage.getUserLikedPage(function(liked, count) {
        $('#likeCountDisplay').text(count);
        if (liked) {
            $('#toggleLikeBtn').text('取消点赞').removeClass('btn-primary').addClass('btn-secondary');
        } else {
            $('#toggleLikeBtn').text('点赞').removeClass('btn-secondary').addClass('btn-primary');
        }
    });
}

关键注意事项 #

• 脚本依赖：代码里用SP.SOD.executeFunc确保sp.js和reputation.js加载完成后再执行逻辑，这是SharePoint开发的标准做法，避免脚本未加载导致的错误。
• 页面ID获取：通过_spPageContextInfo.pageItemId获取当前ASPX页面对应的列表项ID，这个变量是SharePoint页面自动注入的，确保你的页面是存在于SharePoint列表中的（比如Site Pages库）。
• 权限：确保当前用户有编辑项的权限（SharePoint默认允许用户点赞自己有权限访问的页面，但如果权限受限可能会失败）。
• 错误处理：代码里加入了基础的错误日志，方便调试时排查问题。

把这些代码整合到你的自定义ASPX页面里，就能实现和原生SharePoint页面一样的点赞计数和切换功能啦！

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