使用 Jquery/AJAX 时如何获取 MVC 操作的正确 URL？答案

【问题标题】：How do I get the correct URL for an MVC action when using Jquery/AJAX?使用 Jquery/AJAX 时如何获取 MVC 操作的正确 URL？
【发布时间】：2010-09-17 16:18:49
【问题描述】：

所以我有了我正在开发的第一个 MVC2 网站，自然我想在其中加入一些 AJAX。问题是，在传递 URL 参数时，我不知道如何获取操作的 URL。让我解释。到目前为止，我看到的示例显示了开发人员传入的字符串，如“/MyController/MyAction”。这很好，除非您的控制器不在您网站的根目录中（就像我的情况一样）。我总是可以使用像“MyAction”这样的相对 URL，除非 URL 包含的参数也不起作用。考虑http://example.com/myroot/MyController/MyAction 与http://example.com/myroot/MyController/MyAction/PageNumber/SomeOtherValue。现在相对 URL 将不正确。

在 ASPX 代码中，这很容易。我只是写在中。但是如何在我的 javascript 文件中执行此操作？

【问题讨论】：

您应该使用<%: Url.Action("MyAction") %> 而不是<%=，以便正确编码任何与号等。
有趣，多梅尼克。那么
在 javascript 中不应编码 Amersands。继续使用 =
通常情况下，一个动作不应该有任何有趣的角色（至少在我的团队工作的项目中不应该），所以任何一种方式都适合我，Zippy。
& 符号应该在不是CDATA-escaped 的 JavaScript 中编码。

标签： ajax asp.net-mvc-2 jquery

【解决方案1】：

这是长期存在的问题的一部分，即实际上不可能在 JavaScript 文件中包含服务器端代码 :(。（也就是说，没有严重的黑客攻击。）

最好的解决方案是将操作 URL 包含在 HTML 文件中的某个位置，然后从 JavaScript 中获取该值。我的建议是这样的：

<!-- in your view file  -->
<form id="MyForm" action="<%: Url.Action("MyAction") %>"> ... </form>

<!-- or -->
<a id="MyLink" href="<%: Url.Action("MyAction") %>"> ... </a>

结合

// In your .js file
$("#MyForm").submit(function ()
{
    $.post($(this).attr("action"), data, function (result) { /* ... */ });
    return false;
});

// or
$("#MyLink").click(function ()
{
    $.getJSON($(this).attr("href"), data, function (result) { /* ... */ });
    return false;
});

我觉得这在语义上很清楚，在某些情况下甚至会在 JavaScript 关闭时创建可降级的回退行为。

【讨论】：

是的，我试图让 IIS 将 js 文件解释为 aspx 文件，但遇到了很多问题。我喜欢你上面的建议。我会试一试，看看会发生什么。
好的，这个策略有效。我正在使用隐藏变量来执行此操作，但它似乎可以满足我的需要。但是，我希望有一种更清洁的方法，因为现在我的 javascript 文件与我的视图耦合得更加紧密。也许这并没有我想的那么重要。 :)
@Jason 我并不是说 Domenic 的解决方案是错误的，事实上我经常使用这种方法，但您可能会考虑将其与我的解决方案结合使用，以消除对存储脚本值的隐藏元素的需求。如果有人编辑您的代码并不幸删除了看似无用的隐藏元素，这种方法注定会失败。
Nathan，我明白你在说什么，但我很欣赏这个想法；就我的目的而言，它并没有给我带来优势。根据我从您的建议中了解到的情况，我只会有一个初始化函数而不是隐藏变量。虽然我同意这对于其他开发人员来说看起来比隐藏变量更重要，但我已经在我的视图中标记了一个部分，只是为了这个目的。此外，我是我工作的公司的首席架构师，所以我只需要训练我的团队不要管那些标记清楚的隐藏变量。再次感谢您的好建议。
为什么不使用属性？正如我所提到的，它们在语义上是有意义的——即使单击该链接的默认行为是不可取的，并且您想用 Ajax 替换它，<a href="..."> 仍然表示“我正在创建一个应该指向 @ 987654324@ URI," 独立于所需的行为。

【解决方案2】：

您不能直接在 JavaScript 文件中执行此操作，但是您可以通过脚本初始化程序将这些动态值传递到您的脚本中。考虑以下示例：

外部Js文件

ShoppingCart = function() {
    this.settings = {
        AddProductToCartUrl: '',
        RemoveFromCartUrl: '',
        EmptyCartUrl: '',
        UpdateCartUrl: ''
    };
};

ShoppingCart.prototype.init = function(settings) {
    this.settings = jQuery.extend(this.settings, settings || {});
};

HTML/视图

<script type="text/javascript">
    var cart = new ShoppingCart();
    cart.init({ AddProductToCartUrl: '<%=Url.Action("MyAction")%>' });

    alert(cart.settings.AddProductToCartUrl);
</script>

【讨论】：

【解决方案3】：

简单：告诉您的 javascript 正确的 URL 是什么。

从战术上讲，您可以通过多种方式到达那里，但它们基本上分为两种技术：

有一个服务器端生成的javascript“配置”，这样你就可以做类似var url = siteConfiguration.SITEROOT + 'products/pink-bunny-slippers'的事情。注意这个文件可以是一个普通的MVC视图，唯一的技巧是你必须告诉控制器发送一个text/javascript头而不是比文本/html。
基本上，依赖项将其注入到您的脚本中。 IE function wireUpAjaxLinksToService(linkIdentifier, serviceEndpoint) 使用类似 wireUpAjaxLinks('a.ajax', '<%= Url.Action("MyService", "Services") %>') 的方式调用

【讨论】：