ASP.NET Core：如何让Ajax在ViewComponent中正常工作？

核心原因是ViewComponent不支持@section语法，你写在@section Scripts里的代码根本没有被渲染到页面中，这就是控制台没有任何输出的原因——脚本根本没加载。

解决方案一：直接在ViewComponent中嵌入脚本（简单但需注意重复加载） #

把脚本从@section中移出，直接放在ViewComponent的HTML里：

<button id="buttonDemo1">THE AJAX BUTTON</button>

<script>
    $(document).ready(function () {
        console.log("ready2!!");

        var url = '@Url.Action("TEST", "ChatRoom")';

        $('#buttonDemo1').click(function () {
            console.log("THE FORBIDDEN BUTTON HAS BEEN PRESSED!");
            $.ajax({
                type: 'POST',
                url: url,
                success: function (result) {
                    alert(result);
                }
            });
        });
    });
</script>

⚠️ 注意：如果这个ViewComponent会被页面多次调用，脚本会重复加载，可能导致重复绑定事件或冲突。

解决方案二：使用事件委托+Data属性（推荐，无冲突风险） #

这种方法将脚本逻辑和HTML分离，避免重复加载，同时支持动态渲染的ViewComponent：

1. 修改ViewComponent的HTML，用data属性存储接口地址 #

<button id="buttonDemo1" data-api-url='@Url.Action("TEST", "ChatRoom")'>THE AJAX BUTTON</button>

2. 在主页面的@section Scripts中添加通用事件绑定 #

$(document).on('click', '#buttonDemo1', function () {
    console.log("THE FORBIDDEN BUTTON HAS BEEN PRESSED!");
    var url = $(this).data('api-url');
    
    $.ajax({
        type: 'POST',
        url: url,
        success: function (result) {
            alert(result);
        }
    });
});

这种方式的优势：

• 脚本只加载一次，不会重复
• 即使ViewComponent是后续通过Ajax动态加载的，事件依然能正常触发（因为用了document作为事件委托容器）

为什么Razor页面里能正常工作？ #

Razor页面的@section Scripts会被页面的@RenderSection("Scripts", required: false)收集并渲染到指定位置，但ViewComponent作为独立组件，它的@section不会被父页面的RenderSection识别，所以脚本完全没输出到最终HTML中。

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