文本框onchange时无刷新调用C#方法传值并渲染返回数据表格

你原有写法的核心问题：Razor语法的@代码是服务端页面首次渲染阶段就执行的，不会等到客户端触发onchange事件才运行，既拿不到用户输入的实时值，也无法实现无刷新调用后端逻辑，必须通过异步请求完成交互。

步骤1：后端编写异步接口 #

在你的MVC控制器中新增一个POST类型的Action方法，接收文本框传入的参数，完成数据库查询后直接返回JSON格式的字典数据即可：

[HttpPost]
public IActionResult GetDictData(string inputVal)
{
    // 以下替换为你的实际业务逻辑：查询数据库填充Dictionary
    Dictionary<string, string> resultDict = new Dictionary<string, string>();
    // 示例：从数据库查数据，实际替换为你的DbContext查询逻辑
    resultDict = _yourDbService.QueryDataByKeyword(inputVal);

    // 序列化为JSON返回给前端
    return Json(resultDict);
}

步骤2：调整前端HTML结构 #

去掉input标签里直接绑定Razor方法的错误写法，预留表格渲染的容器：

<!-- 文本框不需要绑定服务端事件，也不要设置为submit类型 -->
<input type="text" id="test" />
<!-- 用于展示返回结果的表格容器 -->
<div id="resultArea"></div>

步骤3：编写前端异步请求+渲染逻辑 #

在页面脚本中监听文本框的change事件，触发时异步请求后端接口，拿到返回数据后动态生成表格插入页面，全程不会触发表单提交、不会跳转页面：

// 等DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('test');
    const resultContainer = document.getElementById('resultArea');

    input.addEventListener('change', async function() {
        const searchValue = this.value.trim();
        // 输入为空时清空结果，不发无效请求
        if (!searchValue) {
            resultContainer.innerHTML = '';
            return;
        }

        try {
            // 发送异步POST请求，接口地址用Url.Action生成，避免部署路径错误
            const response = await fetch('@Url.Action("GetDictData", "你的控制器名称")', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                // 传入文本框的值作为参数
                body: `inputVal=${encodeURIComponent(searchValue)}`
            });

            if (response.ok) {
                // 拿到后端返回的字典JSON数据
                const dictData = await response.json();
                // 动态拼接表格
                let tableStr = `
                <table border="1" cellpadding="8" cellspacing="0">
                    <thead>
                        <tr><th>字段名</th><th>字段值</th></tr>
                    </thead>
                    <tbody>
                `;
                // 遍历字典生成表格行
                for (const [key, val] of Object.entries(dictData)) {
                    tableStr += `<tr><td>${key}</td><td>${val}</td></tr>`;
                }
                tableStr += `</tbody></table>`;
                // 将表格插入页面，无刷新更新内容
                resultContainer.innerHTML = tableStr;
            }
        } catch (err) {
            console.error('请求异常:', err);
        }
    })
})

注意事项 #

• 如果你习惯用jQuery，也可以把原生fetch替换为$.post实现，逻辑完全一致
• 如果文本框放在<form>标签内，确保没有触发默认提交行为，上述写法不会主动提交表单，无需额外处理
• 如果返回的数据包含用户可控内容，建议对拼接的内容做HTML转义，避免XSS风险
• 接口正常加鉴权特性即可，异步请求会自动携带当前用户的认证Cookie

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