Razor页面中通过JavaScript读取表单控件值失败问题求助

1. debugger断点未触发的原因 #

你代码中的debugger语句包裹在if (searchString != "" || selectedPorts.length != 0)的条件判断内，页面首次加载调用loadTable()时，输入框默认为空、下拉框也没有选中项，条件不满足，所以不会进入该分支触发断点。你只需选中任意端口或者在输入框填写内容后再调用loadTable()，断点即可正常触发。

2. 请求参数为空的核心原因 #

你混淆了jQuery的$.ajax和原生fetch的API用法：

• jQuery的AJAX请求可以通过data配置项传递参数，库内部会自动处理参数拼接/序列化
• 原生fetch没有data这个配置属性，你写的data参数完全不生效，请求自然没有携带任何自定义参数，后端拿到的就是空值。

修正后的代码（GET请求方案，适配Razor Page Handler） #

因为你需要无刷新更新页面内容，GET请求适配 Razor 页的Get类型Handler，参数直接拼接到查询串即可，以下是修正后的loadTable函数：

function loadTable() {
    var select1 = document.getElementById("portMultiselect");
    var selectedPorts = [];
    for (var i = 0; i < select1.options.length; i++) {
        if (select1.options[i].selected) selectedPorts.push(select1.options[i].value);
    }
    var searchString = document.getElementById('searchString').value;
    
    if (searchString != "" || selectedPorts.length != 0) {
        debugger;
    }

    // 构造查询参数
    const params = new URLSearchParams();
    params.append('searchString', searchString);
    // 多选值追加参数，适配ASP.NET Core数组绑定规则
    selectedPorts.forEach(port => params.append('selectedPorts', port));

    // 把参数拼到请求URL中
    fetch(`/Index?handler=IndexPartial&${params.toString()}`)
        .then((response) => {
            return response.text();
        })
        .then((result) => {
            document.getElementById('refreshable').innerHTML = result;
        });
}

后端绑定补充 #

你对应的IndexModel中的OnGetIndexPartial方法参数需要和前端传参名保持一致，即可正常拿到值：

public IActionResult OnGetIndexPartial(string searchString, List<string> selectedPorts)
{
    // 你的过滤逻辑
    return Partial("_YourPartialView", 你的数据模型);
}

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