如何在 MVC3 的 Ajax Post 中使用相对 URL答案

【问题标题】：How to Use Relative URL in Ajax Post in MVC3如何在 MVC3 的 Ajax Post 中使用相对 URL
【发布时间】：2012-04-25 16:14:01
【问题描述】：

我在一个单独的“.js”文件中编写了一个 Ajax 发布调用，我在多个页面中调用该文件。我的代码如下所示：

    $.ajax({
               url: '/MyVirtualDirectory/Controller/Action',
               type: 'POST',
               dataType: 'json',
               ....
               ....
              })

每次我更改服务器中的虚拟目录时，都需要更改“URL”中的代码以使我的 Ajax 调用正常工作。

是否有任何方法可以使我的代码独立于我在 IIS 中的“虚拟目录”名称 ..？

我的应用程序是 MVC3。

【问题讨论】：

标签： ajax asp.net-mvc-3 post relative-path

【解决方案1】：

说明

您应该使用Url.Action 方法。但在你的情况下，一个单独的 js 文件，你不能访问这个方法。所以我会为你视图中的每个 url 创建一个 javascript 变量。然后你就可以在你的js文件中使用这个变量了。

UrlHelper.Action 方法 - 生成操作方法的完全限定 URL。

样本

您的观点

<script type="text/javascript">
    var myUrl = '@Url.Action("actionName", "controllerName")';
</script>

<script type="text/javascript" src="yourJsFile.js"/>

你的 js 文件

$.ajax({
       url: myUrl,
       ....
})

更新

另一种方法是将您的 url 存储在视图内的隐藏字段中，并在 js 文件中获取隐藏字段值。

更多信息

MSDN - UrlHelper.Action Method

【讨论】：

我试过这个方法。但是在我的 js 文件中无法访问 myUrl。我试图提醒 myUrl 并且错误显示就像“MyUrl 未定义”。有什么线索吗？
@Nikhil 您在视图中的 <script> 块之后是否引用了您的 js 文件？
是的，我在视图内的脚本块之后引用了我的脚本。
我发现这个解决方案非常简单明了。

【解决方案2】：

我终于找到了部分解决方法。在我的 .js 文件中，我做了一些像这样的脏代码：

 var Path = location.host;
 var VirtualDirectory;
 if (Path.indexOf("localhost") >= 0 && Path.indexOf(":") >= 0) {
 VirtualDirectory = "";

 }
 else {
 var pathname = window.location.pathname;
 var VirtualDir = pathname.split('/');
 VirtualDirectory = VirtualDir[1];
 VirtualDirectory = '/' + VirtualDirectory;
 }
$.ajax({
   url: VirtualDirectory/Controller/Action,
   ....})

基本的想法是我检查 localhost 和端口号的 URL。如果两者都存在，则意味着我正在本地计算机上进行调试，因此我不需要 URL 中的虚拟目录。如果我运行的是托管版本，那么我的 URL 中将没有 localhost 和端口号（假设我在端口 80 上托管）。

通过这种方式，当我在本地机器上运行调试时，url 将只有 Controller/Action，而当我托管时，URL 将是 VirtualDirectory/Action/Controller。现在对我来说很好用。

但是如果有其他简单的方法，请发布。

【讨论】：

【解决方案3】：

我认为声明一个全局 Javascript 变量然后第一次设置该变量会更安全，也许是在Home/Index 触发时。然后在每个 ajax 调用中重用它，如下所示：
$.ajax({... url: GlobalVariablePath + "Controller/Action/RouteValues" ...})
如果您已经设计了 WebApp，并且在部署站点时一切正常并且卡住了，那么您可以像这样操作所有 ajax URL：

$.ajaxSetup({
  beforeSend: function (jqXHR, settings) {        
        settings.url = GlobalVariablePath + settings.url;
  }
});

通过这种方式，您可以安全地使用现有的 js 代码，其余部分无需更改。

【讨论】：