如何在cshtml视图的Razor标记中调用JavaScript函数

Razor标记是服务端执行逻辑：所有@开头的代码块都会在服务器端完成运算，拼接成静态HTML文本后才会发送到用户浏览器，整个过程发生在页面到达用户设备之前。
JavaScript是客户端执行逻辑：需要等HTML页面加载到用户浏览器之后才会运行，和Razor分属完全不同的运行时、执行阶段，不存在直接互相调用的可能。你原写法里的doesThisWork()会被Razor解析成C#方法去服务端查找，找不到对应的C#实现自然无法生效。

根据你的判断逻辑是否依赖客户端运行时数据，选对应方案即可：

• 如果判断逻辑不需要获取浏览器端的动态数据（比如判断服务端时间、服务端拿到的用户权限、固定配置值），直接把判断逻辑写成C#代码放在Razor块里即可，不需要额外写JS函数。
  示例代码：

  <div>
  @{
      // 直接写服务端C#判断逻辑
      bool judgeResult = true;
  }
  @if(judgeResult) {
      <span> this DOES work!!! </span>
  }
  else
  {
      <span> this does NOT work!!! </span>
  }
  </div>
  

• 如果判断逻辑必须依赖客户端动态数据（比如浏览器特征、用户本地操作状态、页面DOM动态值、前端缓存数据），就把分支渲染/展示的逻辑交给JS实现，不要放在Razor的@if里判断。
  常用写法1：预渲染两个分支内容，JS判断后控制显隐

  <div>
      <span id="successTip" style="display: none;"> this DOES work!!! </span>
      <span id="failTip" style="display: none;"> this does NOT work!!! </span>
  </div>
  
  <script>
  function doesThisWork() {
      return true;
  }
  // 等页面DOM加载完成后执行判断
  document.addEventListener('DOMContentLoaded', () => {
      if (doesThisWork()) {
          document.getElementById('successTip').style.display = 'inline';
      } else {
          document.getElementById('failTip').style.display = 'inline';
      }
  })
  </script>
  

  常用写法2：JS判断后动态插入对应DOM内容

  <div id="tipContainer"></div>
  
  <script>
  function doesThisWork() {
      return true;
  }
  document.addEventListener('DOMContentLoaded', () => {
      const container = document.getElementById('tipContainer');
      container.innerHTML = doesThisWork() 
          ? '<span> this DOES work!!! </span>' 
          : '<span> this does NOT work!!! </span>';
  })
  </script>
  

注意：不存在“在Razor代码块里直接调用JS函数”的实现方式，两者执行时机完全错开，不要尝试混用两种运行时的逻辑做同阶段判断。

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