使用JavaScript为MVC应用程序构建相对URL
building relative URLs for an MVC app with JavaScript
我很难让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,并且仍然从应用程序的相对根进行映射?
在我的MVC 3项目中,我们这样做的方式是在主布局中包括以下内容:
<script type="text/javascript">
var baseSiteURL = '@Url.Content("~/")';
</script>
然后,您只需在JavaScript中将其添加到URL中即可。
在你的样本中,哪个应该是:
url: baseSiteURL + 'vendors/' + viewModel.count() + '/' + viewModel.filterText()
一种可能性是将这些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);
}
});
Darin的答案是最可靠的,但它需要在ajax调用中使用查询字符串params发送数据。
为了避免这种情况,我只是简单地将@Url.Action()
方法用引号括起来,并按预期附加javascript值。
url: "@Url.Action("Vendors", "Home")/" + viewModel.count() + "/" + viewModel.filterText(),
最终,这产生了最好的结果,因为它让我保持了一个非常干净的url。。。Request.ApplicationPath
似乎太过粗糙,从技术上讲可能是空的。。。@Url.Content()
适用于静态"内容"路径(例如图像、脚本)。。。等等
- 我可以获得相对于被点击元素的确切点击位置吗
- 我应该如何从xml文件构建一个javascript页面
- 如何在DOM元素上按类型构建此函数
- Sencha Touch构建-排除文件
- RubyonRails——构建交互式接口应该朝哪个方向发展
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 可以用'吗/'在相对路径中
- 如何在构建node-webkit应用程序后获取外部资源
- Ext.js从json构建模型关系的问题
- JavaScript:单击时相对于父级增加变量值
- 如何为生产构建angular2应用程序
- Grunt构建导致Angular应用程序在dist上崩溃
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 在不移动元件的情况下从相对位置更改为固定位置
- 动态构建一个数据表与scriplets
- 如何只使用特定的表行构建简单的手风琴
- 为tweet构建chrome扩展
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- 如何构建angular.js应用程序
- 使用JavaScript为MVC应用程序构建相对URL