javascript - 通过 javascript 等效于 @Html.ActionLink 的 MVC

Question

如何通过javascript代码编写@Html.ActionLink的等效代码，即调用一个MVC动作，然后创建一个新视图而不返回调用视图？

Answer 1

javascript是一种客户端语言，它对您使用的服务器端语言一无所知。因此，使用服务器端路由定义生成 url 的服务器端助手的 javascript 中没有等效项是正常的。

目前尚不清楚您要实现的目标，但如果您想通过 javascript 调用一些 url，您可以使用服务器端帮助程序生成此 url：

<script type="text/javascript">
    var url = '@Url.Action("SomeAction", "SomeController")';
    // do something with the url client side variable, for example redirect
    window.location.href = url;
</script>

如果您想在一个单独的 javascript 文件中使用此 url，而您无法访问服务器端助手，您仍然可以根据具体情况将此 url 包含在某些 DOM 元素中。

例如：

<div id="foo" data-url="@Url.Action("SomeAction", "SomeController")">Click me</div>

请注意data-url我们嵌入到 DOM 中的 HTML5 属性，并使用服务器端帮助程序来确保生成的 url 根据我们的路由定义始终是正确的。现在我们可以在一个单独的 javascript 文件中不显眼地订阅这个 div 的点击事件并检索 url：

$('#foo').click(function() {
    var url = $(this).data('url');
    // do something with the url client side variable, for example redirect
    window.location.href = url;
});

其他示例显然包括应该使用服务器端 HTML 帮助程序生成的标准<a>和<form>元素，然后您在单独的 javascript 文件中所要做的就是获取它们的对应href或action属性以检索实际 url 并对其进行处理。

Answer 2

另一种选择是将 URL 存储在<div>页面上隐藏的某个位置，然后通过 Javascript 调用它。它看起来像这样：

索引.cshtml：

<div style="display: none;" id="url">
   @Url.Action("SomeAction", "SomeController")
</div>

然后，您可以在Script.js文件中使用它来构建您想要的任何链接。

var url = $("#url").text();

然后 URL 变量将包含指向/SomeController/SomeAction.