Код работает в CSHTML, но не работает во внешнем файле Javascript
Я пытаюсь переместить свой скрипт из 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 (Not Found)
Как заставить работать эту функцию??
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);
}
Кроме того, в стороне, вы действительно должны использовать логическое значение для isFirstMission, а не строку.
@RoryMcCrossan Должен сказать, это увлекательно if ("true" === isFirstMission) {
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема в том, что файл Javascript не анализируется на сервере как C#, поэтому строка '@Url.Action("GetPoint", "Main")' воспринимается буквально. Чтобы решить эту проблему, вы можете установить переменную в файле cshtml, чтобы она анализировалась, и использовать эту переменную в файле Javascript.
В файле cshtml...
<script>
var postUrl = '@Url.Action("GetPoint", "Main")';
</script>
Затем включите свой файл Javascript ниже в это объявление и измените сообщение на это...
$.post(postUrl).done(// etc..
Серверный код C# (Razor) не интерпретируется в .js файлах. (И не должно быть, вы не хотите идти по этому пути.)
Вместо этого вы можете просто установить переменные JavaScript в своем коде, управляемом Razor (возможно, глобальные, в зависимости от того, как вы управляете областью действия в своем коде JavaScript) и использовать эти значения во внешнем JavaScript. Так что, возможно, что-то вроде этого в Razor:
<script type = "text/javascript">
var getPointURL = '@Url.Action("GetPoint", "Main")';
</script>
И в другом месте вы можете использовать это значение:
$.post(getPointURL)
Существует множество способов управления/масштабирования/и т. д. этот подход, в зависимости от ваших растущих потребностей в вашей системе. Но в целом идея заключается в том, что все, что является динамическим из кода на стороне сервера, находится в файле Razor, а затем JavaScript страницы будет использовать его позже.
Это не будет работать во внешнем файле JS, потому что вы используете синтаксис Razor:
$.post('@Url.Action("GetPoint", "Main")'). Это интерпретируется только в файлах CSHTML