Код работает в 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

Серверный код C # (Razor) не интерпретируется в .js файлах. (И не должно быть, вы не хотите идти по этому пути.)

Вместо этого вы можете просто установить переменные JavaScript в своем коде, управляемом Razor (возможно, глобальным, в зависимости от того, как вы управляете областью действия в своем коде JavaScript), и использовать эти значения во внешнем JavaScript. Так что, возможно, что-то вроде этого в Razor:

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

И в другом месте вы можете использовать это значение:

$.post(getPointURL)

Существует множество способов управления / масштабирования / и т. Д. этот подход, в зависимости от ваших растущих потребностей в вашей системе. Но в целом идея заключается в том, что все, что является динамическим из серверного кода, находится в файле Razor, и затем JavaScript страницы будет использовать его позже.

Answer 2

Проблема в том, что файл Javascript не анализируется как C # на сервере, поэтому строка '@Url.Action("GetPoint", "Main")' воспринимается буквально. Чтобы решить эту проблему, вы можете установить переменную в файле cshtml, чтобы она анализировалась, и использовать эту переменную в файле Javascript.

В файле cshtml ...

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

Затем включите ваш файл Javascript ниже этой декларации и измените сообщение на это ...

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