Blazor表格筛选：删除清空操作无法触发筛选函数的求助

问题根源分析 #

你的代码存在两个关键问题：

1. 输入框的@oninput绑定语法错误（转义后的@oninput=>"filter"无效，正确写法应为@oninput="filter"）
2. 未将输入框的实时值传递到筛选逻辑，导致清空时JS无法获取到空值状态

解决方案一：绑定实时输入值到筛选方法（推荐） #

这种方式能确保输入框任何值变化（包括删除清空）都触发筛选，逻辑清晰且覆盖所有输入场景：

1. 修改Blazor输入框，传递实时输入值到C#方法：

<input type="text" @oninput="e => FilterAsync(e.Value?.ToString())" placeholder="filter" />

2. 更新C#异步方法，将筛选值传给JS：

public async Task FilterAsync(string filterValue)
{
    await JS.InvokeVoidAsync("filterTable", filterValue);
}

3. 调整JS的filterTable函数，接收并使用传入的筛选值：

function filterTable(filterValue) {
    const rows = document.querySelectorAll('table tr:not(:first-child)');
    const trimmedValue = filterValue?.trim() || "";

    // 清空筛选框时显示所有行
    if (trimmedValue === "") {
        rows.forEach(row => row.style.display = 'table-row');
        return;
    }

    // 正常筛选逻辑（示例）
    const lowerCaseFilter = trimmedValue.toLowerCase();
    rows.forEach(row => {
        const rowText = row.textContent.toLowerCase();
        row.style.display = rowText.includes(lowerCaseFilter) ? 'table-row' : 'none';
    });
}

解决方案二：在JS中直接获取输入框实时值 #

如果不想修改C#逻辑，可在JS里每次调用时重新读取输入框的值，避免依赖缓存：

1. 修正输入框的@oninput绑定：

<input type="text" @oninput="FilterAsync" placeholder="filter" />

2. 保持C#方法不变（注意JS.InvokeVoidAsync是Blazor JS互操作的标准方法，你的代码里jsInvokejavascriptasync是笔误）：

public async Task FilterAsync()
{
    await JS.InvokeVoidAsync("filterTable");
}

3. 更新JS函数，直接获取输入框当前值：

function filterTable() {
    const inputElement = document.querySelector('input[placeholder="filter"]');
    const filterValue = inputElement.value.trim();
    const rows = document.querySelectorAll('table tr:not(:first-child)');

    if (filterValue === "") {
        rows.forEach(row => row.style.display = 'table-row');
        return;
    }

    // 你的原有筛选逻辑
    const lowerCaseFilter = filterValue.toLowerCase();
    rows.forEach(row => {
        const rowText = row.textContent.toLowerCase();
        row.style.display = rowText.includes(lowerCaseFilter) ? 'table-row' : 'none';
    });
}

额外注意事项 #

• 确保Blazor的JS互操作对象JS已通过[Inject] IJSRuntime JS { get; set; }正确注入
• 避免重复绑定事件，不要同时使用@oninput和JS手动添加的键盘监听器，防止逻辑冲突

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