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

Question

我正在尝试将脚本从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);
}

Answer 1

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

在cshtml文件中...

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

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

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

Answer 2

.js文件中未解释服务器端C＃（Razor）代码。 （也不应该，您不想走那条路。）

相反，您可以做的只是在Razor驱动的代码中设置JavaScript变量（可能是全局变量，具体取决于您如何管理JavaScript代码中的作用域），然后在外部JavaScript中使用这些值。 因此，在Razor中可能是这样的：

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

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

$.post(getPointURL)

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