我应该如何处理 javascript 调用中的 Asp.net MVC URL？答案

【问题标题】：How should I handle Asp.net MVC URLs in javascript calls?我应该如何处理 javascript 调用中的 Asp.net MVC URL？
【发布时间】：2010-11-24 04:33:03
【问题描述】：

我正在尝试编写我的 Asp.net MVC Web 应用程序的 javascript 重要部分（网站的这一部分是使用 Extjs 的 RIA）。但是，我在处理 javascript 中的 URL 的正确方法上陷入停顿。

例如，现在我有一个对位于Reading 区域中的ObjectsController 中的List 操作的Ajax 调用。 List 操作采用documentId (int) 参数。截至目前，这映射到/Reading/Objects/List，因为我还没有更改路由（该站点目前还太年轻，无法最终确定路由）。通常在视图中，要将这个 URL 放在一个字符串中，我会使用@Html.Action("List", "Objects", new { area = "Reading", documentId = 3)。

但是，这在处理 javascript 时不起作用，因为 javascript 不被视图引擎解析。

为了解决这个问题，我有一个非常小的视图，它返回在我的主应用程序的 js 文件之前加载的 javascript 常量，例如 URL。问题是我不能为此操作调用Html.Action，因为在恒定创建时间我（显然）不知道ajax调用将是什么documentId，如果你从Html.Action调用中排除documentId发生异常。 documentId 可能会在应用程序的正常工作流程中发生变化。

我该如何处理？我不想将 URL 硬编码为 /Reading/Objects/List，因为如果我为此更改路由（以获得更用户友好的 json API），或者此 Web 应用程序未托管在域的根目录上，则 URL 将不会不再有效。

其他人如何在他们的 javascript 调用中处理 MVC URL？

【问题讨论】：

看看这个问题的答案stackoverflow.com/questions/376644/…。我想这就是你需要的。
List 操作方法是否也返回可用于进一步 ajax 调用的documentId？
我不确定该链接有什么帮助，因为在代码生成 URL 时它没有参数信息，因此我会遇到同样的问题，除非 Url.RouteUrl() 可以在没有一个参数（当我回家时值得一试）。 List 操作返回 JSON，其中包含与特定 documentId 相关的对象的 ID 和名称。

标签： javascript asp.net-mvc ajax

【解决方案1】：

这是我一直在使用的一种安全技术。即使你的路由改变了，你的 JavaScript 也会自动符合新的路由：

<script>
var url = '@Url.Action("List", "Objects", new { area = "Reading", documentId = "_documentId_")';
var id = 100;
var finalUrl = url.replace('_documentId_', id);
</script>

"_documentId_" 本质上是一个虚拟占位符。然后在我的 JavaScript 中，一旦我知道它是什么，我就会用正确的 id 值替换“_documentId_”。这样，无论您的路由如何配置，您的 URL 都将符合要求。

更新：12 月 20 日

我刚刚看到了这篇有趣的博文。作者构建了一个库，允许您在 JavaScript 文件中构建路由，并在 VisualStudio 中提供智能感知支持。

http://weblogs.asp.net/zowens/archive/2010/12/20/asp-net-mvc-javascript-routing.aspx

【讨论】：

其实这个想法很有趣！
只是想我会补充一点，如果您希望能够在 url.action 中访问 mvc 模型值，那么您需要在 .cshtml 页面上而不是在您的外部 js 文件中执行此操作然后可以这样做： var url = '@Url.Action("Action","Controller", new {Name = @Model.Name })';

【解决方案2】：

我个人使用不显眼的 javascript 并避免将标记与 javascript 混合。 AJAX 调用通常通过单击某些按钮或链接来触发：

@Html.ActionLink("click me", "List", "Objects", 
    new { area = "Reading", documentId = 3 }, new { id = "foo" })

然后在一个单独的 js 文件中，我将附加并处理 onclick 事件（以 jquery 为例）：

$(function() {
    $('#foo').click(function() {
        $('#resultDiv').load(this.href);
        return false;    
    });
});

如您所愿，我不需要在我的 javascript 文件中使用任何硬编码的 URL。 URL 应始终由路由引擎处理并使用 html 助手生成。

如果它是 <form> 而不是链接，我将简单地处理 onsubmit 事件（以相同的方式）并使用表单的 action 属性来获取 URL。

更新：

在 cmets 部分指出 documentId 仅在客户端知道后，您可以这样做：

@Html.ActionLink("click me", "List", "Objects", 
    new { area = "Reading" }, new { id = "foo" })

然后：

$(function() {
    $('#foo').click(function() {
        $('#resultDiv').load(this.href, { documentId: '123' });
        return false;    
    });
});

【讨论】：

OP 不知道在调用 .ActionLink() 时的 documentId 操作参数值。
因为我正在创建一个仅限 javascript 的 RIA，所以这不是一个选项。 GUI 和 GUI 的所有部分都将通过 Javascript 创建，因此是 ActionLink。
就像Crescent Fresh指出的那样，在使用View引擎时，我不知道我在使用我的ajax调用时会使用什么documentId。
@KallDrexx，对不起，我误解了你的问题。我已经更新了我的答案以考虑到这一点。然后，您可以在生成链接时排除这些参数，并在执行 AJAX 请求时将它们作为附加参数传递。
我必须对此进行测试，但我认为这行不通。当我在没有documentId 字段的情况下执行@Html.Action() 时，视图引擎会崩溃，因为它期待这条路线的documentId，因为它是操作的必需参数。我不想让我的 JSON 操作的所有参数都是可选的，因为这意味着我必须为每个问题做更多的错误检查，以实现 URL 抽象的唯一目的。

【解决方案3】：

事实证明，这一切都通过使用Url.Action() 而不是Html.Action() 解决了。 Url.Action()（到目前为止）允许我在没有所有参数的情况下生成 URL。我假设这仅在路由未在目标 URL 本身中指定参数时才有效。

【讨论】：