@Url.Content("~/") 在 JavaScript 文件中不起作用？答案

【问题标题】：@Url.Content("~/") not working in JavaScript file?@Url.Content("~/") 在 JavaScript 文件中不起作用？
【发布时间】：2019-08-23 22:08:43
【问题描述】：

我有一个 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' 我在控制器上的函数将被正确调用。解决此问题的最佳方法是什么？谢谢！

【问题讨论】：

ASP.NET 不会解析你的 javascript 文件，因此不会处理 Url.Content。
为什么希望 Razor 语法在 JavaScript 文件中工作？

标签： javascript c# asp.net-core

【解决方案1】：

@Url.Content 是 Razor 插值指令，只会在 Razor 视图或页面文件 (.cshtml) 中解析。 Razor 视图引擎没有其他内容，因此不能期望它在 CSHTML 文件以外的任何文件中工作。

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

1。从引用该文件的视图中提供一个全局变量

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。让脚本公开一个函数并从视图中调用它

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>

【讨论】：

【解决方案2】：

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

例子：

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

您只需要使用网站Url。

【讨论】：