Razor Pages点击按钮客户端设置输入域值无效问题求解

代码失效的直接原因：document.getElementsByName()返回的是匹配对应name属性的DOM元素节点集合（类数组结构），不是单个表单控件，直接对集合对象设置value属性不会作用到实际输入框上。

纯客户端JavaScript实现完全满足你的需求，不需要走服务端回发，也不会触发页面重载，适配你后续批量赋值表单字段的场景。

原生JS修复版 #

你已经给两个表单控件设置了唯一id，直接通过id获取单个元素是最稳妥的方式，替换原有Script块里的代码即可：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        function AutoFill()
        {
            // 通过id获取单个DOM元素
            const batteryNameInput = document.getElementById('pageBatteryName');
            batteryNameInput.value = "QWERTY1234";
            
            const deviceIdSelect = document.getElementById('pageDeviceId');
            // 注意：必须保证下拉框中存在value="2"的选项，否则赋值不生效；select的value为字符串类型
            deviceIdSelect.value = "2";

            // 触发冒泡的change事件，同步Razor自带的表单验证、绑定状态
            batteryNameInput.dispatchEvent(new Event('change', { bubbles: true }));
            deviceIdSelect.dispatchEvent(new Event('change', { bubbles: true }));
        }
    </script>
}

关键注意点 #

• 不要用getElementsByName直接操作返回值，如果一定要用这个方法，需要取集合的第一个元素，写法为document.getElementsByName('pageBatteryName')[0]，但name属性可能存在重复，不推荐
• 给下拉select赋值时，要确保对应value的option存在，且传入字符串类型的值，避免类型不匹配导致赋值失败
• 触发change事件时开启事件冒泡，保证Razor Pages默认引入的jQuery验证脚本可以捕获到值变更

jQuery简化版（Razor Pages默认模板已自带jQuery，可直接用） #

function AutoFill() {
    $('#pageBatteryName').val("QWERTY1234").trigger('change');
    $('#pageDeviceId').val("2").trigger('change');
}

默认Razor Pages的表单提交是整页回发模式，如果你不想写前端JS，也可以通过AJAX调用服务端方法拿到填充值后再赋值到表单，但纯前端JS赋值是性能最好、实现最简单的方案，完全满足你的需求。

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