ASP.NET Razor Pages如何通过AJAX实现点击按钮从右侧滑入评论表单

问题核心原因 #

你的原有代码存在两个致命错误：第一是事件逻辑写反了，应该点击按钮后触发AJAX请求，而不是AJAX请求成功后再绑定点击事件；第二是把评论容器的HTML直接插入到按钮内部，自然会破坏原有布局，同时缺失滑入效果必需的定位CSS，动效自然无法生效。

解决方案 #

步骤1：添加滑入效果必需的CSS样式 #

/* 评论外层容器：固定定位在右侧，初始隐藏 */
.user-info {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -2px 0 12px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
    overflow-y: auto;
}
/* 内层容器：初始偏移到视口右侧外 */
.user-info-in {
    position: relative;
    right: -100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
/* 关闭按钮样式 */
.cc {
    cursor: pointer;
    float: right;
    color: #666666;
    margin-bottom: 15px;
}
/* 表单样式适配 */
.user-info form {
    margin-top: 20px;
}
.user-info textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

步骤2：调整页面基础HTML结构 #

在页面任意位置新增专门存放评论框的容器，不要直接把评论内容插入按钮：

<!-- 评论框专属容器，不要修改原有按钮代码 -->
<div id="chatBoxContainer"></div>

<!-- 原有按钮代码保持不变 -->
<button type="button" title="Comments" id="RequestFormChatBox" data-id="100" class="btn btn-warning btn-sm">
    <i class="far fa-comment" style="color:white;"></i>
</button>

步骤3：重写JS交互逻辑 #

$(function() {
    // 缓存元素避免重复查询
    const $chatContainer = $('#chatBoxContainer');
    const $chatBtn = $('#RequestFormChatBox');
    const requestId = $chatBtn.data('id');

    // 按钮点击事件
    $chatBtn.on('click', function() {
        // 已加载过评论框就直接显示，避免重复请求
        if ($chatContainer.find('.user-info').length) {
            $chatContainer.find('.user-info').fadeIn().find('.user-info-in').animate({"right": 0}, 200);
            return;
        }

        // 首次点击加载评论框内容
        $.ajax({
            url: '/RequestFormChatBox',
            data: { id: requestId }, // 传递关联记录ID查询对应评论
            success: function(result) {
                $chatContainer.html(result);
                const $userInfo = $chatContainer.find('.user-info');
                const $userInfoIn = $userInfo.find('.user-info-in');
                
                // 触发滑入动效
                $userInfo.fadeIn();
                $userInfoIn.animate({"right": 0}, 200);

                // 绑定关闭按钮事件
                $userInfo.find('.cc').on('click', function() {
                    $userInfoIn.animate({"right": "-100%"}, 200, function() {
                        $userInfo.fadeOut();
                    });
                });

                // 绑定表单提交事件，实现无刷新提交评论
                $userInfo.find('form').on('submit', function(e) {
                    e.preventDefault();
                    const content = $(this).find('textarea').val().trim();
                    if (!content) return;

                    $.post('/RequestFormChatBox/SubmitComment', {
                        id: requestId,
                        content: content
                    }, function(res) {
                        if (res.success) {
                            // 提交成功后插入新评论到列表顶部
                            const newComment = `<li class="list-group-item">
                                <b>${res.userName}</b>
                                <p>${content}</p>
                            </li>`;
                            $userInfo.find('.list-group').prepend(newComment);
                            // 清空输入框
                            $(this).find('textarea').val('');
                        } else {
                            alert('评论提交失败，请重试');
                        }
                    });
                });
            }
        });
    });
});

步骤4：Razor Pages后端适配 #

你需要给RequestFormChatBox的PageModel补充两个方法：

• 接收ID参数、返回评论框部分视图的Get方法，用来加载对应记录的历史评论
• 处理评论提交的Post方法，接收关联ID和评论内容，保存后返回JSON格式的操作结果

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