使用JavaScript构建MVC应用程序的相对URL
我无法让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,并仍然从应用程序的相对根映射?
一种可能性是将这些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); } });
我们在MVC 3项目中执行此操作的方式是在主布局中包含以下内容:
然后,您只需将其添加到JavaScript中的URL中。
您的样本中的内容如下:
url: baseSiteURL + 'vendors/' + viewModel.count() + '/' + viewModel.filterText()
Darin的答案是最可靠的,但它需要在ajax调用上使用查询字符串参数发送数据。
为了避免这种情况,我只是将@Url.Action()
方法包装在引号中,并按照我的意图添加javascript值。
url: "@Url.Action("Vendors", "Home")/" + viewModel.count() + "/" + viewModel.filterText(),
最终这产生了最好的结果,因为它让我保持一个非常干净的URL … Request.ApplicationPath
似乎过于hackish并且在技术上可以为null … @Url.Content()
用于静态“内容”路径(例如图像,脚本)……等