Blazor静态SSR模式下能否使用Ajax技术？

静态SSR模式本质上是渲染出纯HTML+JS环境，完全可以通过传统Ajax方案实现数据交互，不管是原生Fetch API还是jQuery Ajax都能直接用，核心是结合<PageScript>组件的生命周期方法处理事件绑定与请求逻辑，以下是具体实现方案：

方案1：原生Fetch API（无需额外依赖） #

利用浏览器原生Fetch发起请求，配合<PageScript>的onUpdate方法确保组件更新后事件绑定有效：

实现示例 #

1. Razor组件中添加交互元素与结果展示区：

<button id="fetchBtn">获取数据</button>
<div id="resultContainer"></div>

<PageScript>
    export function onUpdate() {
        // 先移除旧绑定避免重复触发
        const btn = document.getElementById('fetchBtn');
        btn.replaceWith(btn.cloneNode(true));
        
        // 绑定新的点击事件
        document.getElementById('fetchBtn').addEventListener('click', async () => {
            const resultEl = document.getElementById('resultContainer');
            try {
                const res = await fetch('/api/WeatherData', {
                    method: 'GET',
                    headers: { 'Content-Type': 'application/json' }
                });
                const data = await res.json();
                resultEl.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
            } catch (err) {
                resultEl.textContent = `请求失败：${err.message}`;
            }
        });
    }
</PageScript>

2. 后端创建对应API接口（比如WeatherDataController）返回JSON格式数据即可。

方案2：jQuery Ajax（需引入jQuery） #

如果习惯使用jQuery，先引入库再编写Ajax逻辑：

实现示例 #

1. 在_Layout.cshtml中引入jQuery（本地文件或CDN均可）：

<script src="~/lib/jquery/jquery.min.js"></script>

2. Razor组件中编写交互逻辑：

<button id="jqueryBtn">用jQuery请求数据</button>
<div id="jqueryResult"></div>

<PageScript>
    export function onUpdate() {
        // 解绑旧事件后绑定新事件
        $('#jqueryBtn').off('click').on('click', function() {
            $.ajax({
                url: '/api/WeatherData',
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#jqueryResult').html(`<pre>${JSON.stringify(data, null, 2)}</pre>`);
                },
                error: function(xhr) {
                    $('#jqueryResult').text(`请求出错：${xhr.statusText}`);
                }
            });
        });
    }
</PageScript>

进阶：Ajax请求后触发Blazor组件局部更新 #

如果希望请求结果触发Blazor组件重新渲染，可通过JS调用.NET方法实现：

@inject IJSRuntime JSRuntime

<button id="updateComponentBtn">获取数据并更新组件</button>
@if (!string.IsNullOrEmpty(ComponentResult))
{
    <pre>@ComponentResult</pre>
}

<PageScript>
    export function onUpdate() {
        document.getElementById('updateComponentBtn').addEventListener('click', async () => {
            const res = await fetch('/api/WeatherData');
            const data = await res.json();
            // 调用组件的.NET方法更新状态
            await DotNet.invokeMethodAsync('YourProjectAssemblyName', 'UpdateResult', JSON.stringify(data, null, 2));
        });
    }
</PageScript>

@code {
    private string? ComponentResult { get; set; }

    [JSInvokable]
    public void UpdateResult(string result)
    {
        ComponentResult = result;
        StateHasChanged(); // 触发组件局部渲染
    }
}

关键注意事项 #

• 静态SSR模式下无SignalR依赖，所有Ajax请求都是标准HTTP请求，逻辑与ASP.NET Core MVC完全一致。
• 确保API接口路由配置正确，跨域场景需提前配置CORS策略。
• 使用<PageScript>的onUpdate方法是为了在组件每次渲染后重新绑定事件，避免DOM更新后事件失效。

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