代码在 CSHTML 中有效，但在外部 Javascript 文件中无效答案

【问题标题】：Code works in CSHTML but does not work in external Javascript file代码在 CSHTML 中有效，但在外部 Javascript 文件中无效
【发布时间】：2019-05-29 14:19:51
【问题描述】：

我正在尝试将我的脚本从 CSHTML 移动到外部 Javascript 文件。除了一个函数之外，所有脚本都能完美运行：$.post('@Url.Action("GetPoint", "Main")').done(function (xml)

我在浏览器调试器上得到的错误是：

jquery.min.js:2 POST http://localhost:58153/@Url.Action(%22GetPoint%22,%20%22Main%22) 404（未找到）

我怎样才能使这个功能起作用？？

var script = document.createElement('script');
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js";
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

var createPoint = function(ctx, lat, lon) {
  ctx.beginPath();
  ctx.arc(lat, lon, 8, 0, Math.PI * 2);
  ctx.fillStyle = "red";
  ctx.strokeStyle = "black";
  ctx.lineWidth = 3;
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
}
var isFirstMission = document.getElementById("first").value;
var ctx = document.getElementById("myCanvas").getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

if (isFirstMission) {
  // ...
} else {
  myTimer = (function(ctx) {

    $.post('@Url.Action("GetPoint", "Main")').done(function(xml) { // This function does not work..
      alert(xml);
      var xmlDoc = $.parseXML(xml);
      $xml = $(xmlDoc);
      var lat = (parseFloat($xml.find("lat").text()) + 90)(screen.height / 180);
      var lon = (parseFloat($xml.find("lon").text()) + 180) * (screen.height / 360);
      alert(lat);
      alert(lon);

      createPoint(ctx, lat, lon);
    });
  });

  setInterval(function() {
    myTimer(ctx);
  }, 1000);
}

【问题讨论】：

它在外部 JS 文件中不起作用，因为您使用的是 Razor 语法：$.post('@Url.Action("GetPoint", "Main")')。这仅在 CSHTML 文件中解释
另外，顺便说一句，您真的应该为isFirstMission 使用布尔值，而不是字符串。
@RoryMcCrossan 我不得不说，这很吸引人if ("true" === isFirstMission) {

标签： javascript jquery .net web post

【解决方案1】：

服务器端 C# (Razor) 代码不会在 .js 文件中解释。（也不应该，你不想走那条路。）

相反，您可以做的只是在 Razor 驱动的代码中设置 JavaScript 变量（可能是全局的，具体取决于您在 JavaScript 代码中管理范围的方式）并在外部 JavaScript 中使用这些值。所以在 Razor 中可能是这样的：

<script type="text/javascript">
    var getPointURL = '@Url.Action("GetPoint", "Main")';
</script>

您可以在其他地方使用该值：

$.post(getPointURL)

有多种方式来管理/扩展/等。这种方法，取决于您在系统中不断增长的需求。但总的来说，这个想法是任何来自服务器端代码的动态都在 Razor 文件中，然后页面的 JavaScript 稍后会使用它。

【讨论】：

【解决方案2】：

问题是Javascript文件在服务器上没有被解析为C#，所以'@Url.Action("GetPoint", "Main")'字符串是按字面意思取的。为了解决这个问题，您可以在 cshtml 文件中设置一个变量，以便对其进行解析，并在 Javascript 文件中使用该变量。

在cshtml文件中...

<script>
    var postUrl = '@Url.Action("GetPoint", "Main")';
</script>

然后在该声明下方包含您的 Javascript 文件，并将帖子更改为此...

$.post(postUrl).done(// etc..

【讨论】：