为什么cshtml页面重载时onclick事件自动触发，手动点击反而不生效？

你提供的问题代码如下：

<div>
    <button id='btn-next' name='next' type='button' onclick='function f() {
         @{ 
            Console.WriteLine("BeforeCalling");
            myClass test = new myClass();
            test.TestMethod("123");
            Console.WriteLine("AfterCalling");
          }
          }' class='btn btn-block btn-secondary'>justAButton</button>
</div>

该问题的核心原因是混淆了服务器端Razor代码和客户端JavaScript代码的执行边界，两个异常表现的具体成因如下：

• 页面重载就执行逻辑：@{ }是Razor的服务器端代码标记，内部的C#代码会在服务器渲染HTML页面的阶段直接运行，此时页面还没有返回给浏览器，和前端的点击事件完全无关，所以页面重载（触发服务器渲染页面）时终端就会打印对应输出。
• 点击按钮无反应：服务器执行完@{ }内的逻辑后，不会向客户端输出任何有效JS代码，最终浏览器拿到的onclick属性里只有一个空的函数定义function f() {}，且你只定义了函数没有调用，点击时自然不会执行任何逻辑。

解决方案 #

如果需要实现点击按钮触发对应C#逻辑，可选择以下两种常用方案：

• 表单提交：将按钮放在<form>标签内，将按钮类型改为submit，后端编写对应处理表单提交的逻辑，点击按钮时提交表单触发服务端代码执行。
• AJAX异步请求：给按钮绑定前端点击事件，点击时通过AJAX向后端接口发送请求，后端接口执行对应逻辑后返回结果，前端再做后续处理。

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