Blazor按钮首次点击仅刷新页面，二次点击才正常的问题排查

问题现象 #

使用Blazor InteractiveServer模式创建的登录页面存在两个异常：

1. 首次点击「Sign in」按钮时仅触发页面刷新，无法执行校验逻辑；第二次点击才能正常执行校验流程。
2. 代码中Console.WriteLine的输出内容无法在浏览器控制台显示。

一、首次点击触发页面刷新的成因与解决 #

成因

页面中的<button>元素未指定type属性，在<form>标签内默认会被识别为type="submit"，点击时会触发HTML表单的默认提交行为，导致页面刷新，直接打断了Blazor的交互式事件处理逻辑。

解决方法

两种方案任选其一：

• 方案1：给按钮指定type="button"
  显式设置按钮类型为普通按钮，避免触发表单提交：

  <button
          type="button"
          class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center 
          dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
          @onclick="CheckValidation">
      Sign in
  </button>
  

• 方案2：阻止默认表单提交行为
  在@onclick指令中添加preventDefault修饰符，拦截表单的默认提交动作：

  <button
          class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center 
          dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
          @onclick:preventDefault="true"
          @onclick="CheckValidation">
      Sign in
  </button>
  

二、Console.WriteLine无法在浏览器控制台显示的成因与解决 #

成因

当前使用InteractiveServer渲染模式，Blazor的C#代码运行在服务器端，Console.WriteLine的输出会被发送到服务器的控制台（比如Visual Studio的「输出」窗口），而非浏览器的前端控制台。

解决方法

若要在浏览器控制台输出内容，需使用Blazor的JS互操作调用浏览器原生的console.log：

1. 首先注入IJSRuntime服务：

   @inject IJSRuntime JSRuntime
   

2. 修改异常捕获中的输出代码，替换Console.WriteLine为JS互操作调用：

   catch (Exception ex)
   {
       await JSRuntime.InvokeVoidAsync("console.log", $"Validation method error: {ex.Message}");
   }
   

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