mvc布局中的jquery脚本不起作用答案

【问题标题】：jquery script in mvc layout is not workingmvc布局中的jquery脚本不起作用
【发布时间】：2017-01-11 12:26:36
【问题描述】：

嗨，我有一个小 jquery 脚本

 $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("AjaxTest", "Home")',
        })
    });

当我将它直接包含在我的 MVC 应用程序的布局页面中时，它会按我的预期工作。当我尝试从外部文件（infoAjax.js）调用它时，它失败并且我收到消息：加载资源失败：服务器响应状态为 404（未找到）。我的捆绑文件：

 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/infoAjax.js"
                  ));

以及布局页面的负责部分：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

【问题讨论】：

@Url.Action 在 JS 文件中不起作用。那是 Razor 语法，所以它必须在视图中。如果您在从外部文件运行它时查看网络选项卡，您可能会发现它正在尝试像 http://@Url.Action("AjaxTest", "Home") 这样的字面意思调用 URL，而不是将其解析为真正的 URL，如果它在一个 cshtml 文件中就会这样做。

标签： jquery ajax asp.net-mvc

【解决方案1】：

由于 .js 文件不被 asp.net mvc 视图引擎解析，您根本无法使用其中的任何代码。我建议使用不显眼的方法，像这样

<div id="loader" data-request-url="@Url.Action("Action", "Controller")"></div>

在 javascript 中，使用 data-request-url 的值

$(function(){
   $('#loader').click(function(){
       var url = $(this).data('request-url');
       alert(url);
   });
});

【讨论】：

【解决方案2】：

@Url.Action("AjaxTest", "Home") 仅适用于 MVC 项目的视图。尝试使用确切的地址，例如

 url: 'localhost/Home/AjaxTest',

而不是

  url: '@Url.Action("AjaxTest", "Home")',

【讨论】：

按照问题的措辞，我认为 404 发生在 ~/Scripts/infoAjax.js 上。但这就是原因，绝对是
对 URL 进行硬编码的唯一小问题是它容易受到 MVC 端路由配置更改的影响，这是 Url.Action 助手存在的主要原因之一。但是，此解决方案将解决问题中所述的直接问题。
@ADyson 这就是为什么我认为我的答案适合可以部署的解决方案，而无需记住每次都更改 url 位置：P
@zerohero 你在发布它时已经得到了我的支持 :-) 只要你了解后果，这两种解决方案都很好......