Blazor中EditForm绑定InputTexts触发JS异常，值无法绑定

核心原因 #

页面因JavaScript异常触发全页重载，导致Razor组件的状态（包括newLicense实例）被重新初始化，提交后显示的是对象默认值而非用户输入内容。

排查与解决步骤 #

1. 定位JS异常

   • 打开浏览器开发者工具（F12），切换到Console标签页，点击提交按钮，查看是否有报错信息。常见异常来源：
     • 第三方脚本（统计、广告插件等）加载或执行错误
     • 自定义全局JS代码存在语法或逻辑错误
     • Blazor JSInterop相关代码调用失败
     • 依赖的CSS框架（如Bootstrap）配套JS未正确引入

2. 验证页面重载行为

   • 在HandleSubmit方法开头添加Console.WriteLine("提交触发");，同时在浏览器Network标签页观察提交时是否有全页请求。若存在此类请求，即可确认页面发生重载。

3. 临时验证重载影响

   • 方式一：修改提交按钮阻止默认表单提交行为：

     <button type="submit" class="btn btn-primary" @onclick:preventDefault>Odeslat</button>
     

   • 方式二：在HandleSubmit中阻止默认操作：

     private void HandleSubmit(EditContext editContext)
     {
         editContext.PreventDefault();
         debugOutput =
             $"ModuleName: {newLicense.ModuleName}\n" +
             $"Description: {newLicense.Description}\n" +
             $"AllowsOfflineAccess: {newLicense.AllowsOfflineAccess}";
     }
     

   • 若修改后能正常获取输入值，即可确认是页面重载导致的状态重置。

4. 修复JS异常

   • 根据Console中的报错信息定位问题代码：
     • 第三方脚本问题：尝试更新版本、更换CDN地址或临时移除测试
     • 自定义JS问题：检查语法错误、未定义变量、DOM元素不存在等问题
     • Blazor JSInterop问题：确保JS函数已正确注册，参数传递符合要求

5. 检查Blazor项目配置

   • 确认项目渲染模式（InteractiveServer/InteractiveWebAssembly）配置正确，错误模式可能引发意外页面行为
   • 检查_Imports.razor是否引入Microsoft.AspNetCore.Components.Forms命名空间，确保表单组件正常工作

额外验证 #

• 在无第三方脚本的干净页面中测试组件，若正常运行则说明是外部脚本冲突
• 查看浏览器控制台中Blazor相关警告，排查组件生命周期异常

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