使用 JavaScript 为 MVC 应用程序构建相对 URL

Question

我无法让 C# 和 JavaScript/jQuery 在这里发挥得很好。

我有一个淘汰视图模型，普通的旧 javascript 对象...它的属性/方法之一触发 .ajax() 调用，并且 url 参数是使用它的一些其他属性值（javascript 变量）构建的。

这在完全包含在 JavaScript 中时可以正常工作，但是当作为应用程序部署到 IIS 时，相对路径会被破坏。

在 MVC3 中，通常我会使用 @Url.Action 之类的东西并让服务器端构建地址...但同样，技巧是 C# 不知道更改的 javascript 值。

代码：

var viewModel = {
    vendors: ko.observableArray([]),
    count: ko.observable(10),
    page: ko.observable(1),
    filterText: ko.observable(""),
    submit: function () {
        $.ajax({
            // works fine, until deploy when it is no longer a site relative URL
            url: 'vendors/' + viewModel.count() + '/' + viewModel.filterText(),

            // does not work, because C# is unaware of the javascript variables.
            //url: @Url.Action("Vendors", "Home", new { count = viewModel.count(), filter = viewModel.filterText() })

            dataType: 'json',
            success: function (data) {
                viewModel.vendors(data);
            }
        });    
    }
    // next: // load sequence starting with (page+1 * count) 
    // previous: // load sequence starting with (page-1 * count)
};
ko.applyBindings(viewModel);

---

问题：

然后我的问题是，如何使用 javascript 变量值（例如 count、filterText）构建 ajax 调用的 url，并且仍然从应用程序的相对根目录映射？

Answer 1

我们在我的 MVC 3 项目中这样做的方式是在主布局中包含以下内容：

<script type="text/javascript">
    var baseSiteURL = '@Url.Content("~/")';
</script>

然后您只需将其添加到 JavaScript 中的 URL。

您的示例中的内容如下：

url: baseSiteURL + 'vendors/' + viewModel.count() + '/' + viewModel.filterText()

Answer 2

一种可能性是将这些 javascript 值作为请求参数发送：

$.ajax({
    url: '@Url.Action("vendors")',
    data: { count: viewModel.count(), filter: viewModel.filterText() },
    dataType: 'json',
    success: function (data) {
        viewModel.vendors(data);
    }
});

当然，这意味着您使用的是默认路由，并且参数将简单地作为查询字符串参数（如果您使用的是 GET）或作为 POST 请求正文的一部分发送到服务器。在这两种情况下，您都将以相同的方式在服务器上获取它们：

public ActionResult Vendors(int count, string filter)
{
    ...
}

如果您绝对坚持为您的 AJAX 请求提供一些自定义路由，另一种可能性是使用简单的字符串替换：

var url = '@Url.Action("vendors", new { count = "__count__", filter = "__filterText__" })';
url = url.replace('__count__', viewModel.count())
         .replace('__filter__', viewModel.filterText());
$.ajax({
    url: url,
    dataType: 'json',
    success: function (data) {
        viewModel.vendors(data);
    }
});

Answer 3

Darin 的回答是最可靠的，但它需要在 ajax 调用中使用查询字符串参数发送数据。

为避免这种情况，我只是将 @Url.Action() 方法用引号括起来，并按照我的意图附加了 javascript 值。

url: "@Url.Action("Vendors", "Home")/" + viewModel.count() + "/" + viewModel.filterText(),

最终，这产生了最好的结果，因为它让我保持一个非常干净的 url...Request.ApplicationPath 似乎太 hackish 并且在技术上可能是 null...@Url.Content() 用于静态“内容”路径（例如图像, 脚本)...等等。