@ Url.Content（“〜/”）无法在JavaScript文件中使用？

Question

我有一个ASP.NET CORE MVC应用程序，我在我的一个视图中包含一个JavaScript文件。 JavaScript用于调用控制器上的函数以获取下拉数据的页面上的下拉列表。

$(document).ready(function() {

    $('#accounts').change(function() {
        var url = '@Url.Content("~/")' + "GetMeters";
        var ddlsource = "#accounts";

        $.getJSON(url,
            { accountId: $(ddlsource).val() },
            function(data) {
                var items = '';
                $("#meters").empty();
                $.each(data,
                    function(i, meter) {
                        items += "<option value='" + meter.value + "'>" + meter.text + "</option>";
                    });
                $('#meters').html(items);
            });
    });

});

单步执行代码，我注意到在'var url ='@ Url.Content（“〜/”）'+“GetMeters”;'之后执行'url'被设置为“@ Url.Content（”〜/“）GetMeters”。

看看StackOverflow上的类似问题，所以我尝试使用“〜/ GetMeters”，它也不起作用。

如果url设置为'https://localhost:44344/Meters/GetMeters'，控制器上的函数将被正确调用。解决这个问题的最佳方法是什么？谢谢！

Answer 1

@Url.Content是一个Razor插值指令，只能在Razor视图或页面文件（.cshtml）中解析。没有其他任何东西通过Razor视图引擎，因此不能期望它在除CSHTML文件之外的任何文件中工作。

有几种方法可以在页面加载时将服务器端数据传递给JavaScript文件 - 这可以在StackOverflow答案中得到解决。对于您的特定情况，您似乎只需要将URL根目录传递给脚本，以便它可以调用端点。如果可能的话，通常最好在服务器端完全呈现动作URL，而不是在客户端构建它们。为此，您可以使用以下之一。

1. Provide a global variable from the view that references this file

SomeView.cshtml

<script>
window.Routes = {
    getMeters: '@Url.Action("GetMeters", "Meters")', // the GetMeters action on MetersController
    // add other routes here
};
</script>

<script src="@Url.Content("~/somescript.js")"></script>

somescript.js

$(document).ready(function() {
    var url = Routes.getMeters;
    // ...
});

2. Have the script expose a function and call it from the view

somescript.js

// This function replaces $(document).ready(...)
function initialize(getMetersRoute) {
    var url = getMetersRoute;
    // ...
}

SomeView.cshtml

<script src="@Url.Content("~/somescript.js")"></script>

<script>
$(document).ready(function() {
    initialize('@Url.Action("GetMeters", "Meters")');
});
</script>

Answer 2

一种解决方案是在布局cshtml文件中创建一个包含您的url的变量，该文件在您使用javascript文件的任何地方都使用，然后您只需在JS文件中调用此变量即可。

示例：

websiteUrl = '@Url.Content("~/")';

您只需要使用websiteUrl。