我有一个 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("~/"(' + "GetMeter";之后,"url"被设置为"@Url.Content("~/"(GetMeter"。
在StackOverflow上查看类似的问题,所以我尝试只使用"~/GetMeter",但它也不起作用。
如果 url 设置为"https://localhost:44344/Meters/GetMeters",我将正确调用控制器上的函数。解决此问题的最佳方法是什么? 谢谢!
@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>
某条脚本.js
$(document).ready(function() {
var url = Routes.getMeters;
// ...
});
2. 让脚本公开一个函数并从视图中调用它
某条脚本.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>
一种解决方案是创建一个变量,该变量在布局 cshtml 文件中包含您的 url,该文件在您使用 JavaScript 文件的任何地方都使用,然后您可以简单地在 JS 文件中调用此变量。
例:
websiteUrl = '@Url.Content("~/")';
您只需要使用网站网址。