使用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);
    }
});