外部javascript不起作用，而内部javascript起作用

Question

我有mvc4网页，其中有@Html.TextBox()

@Html.TextBox("searchString", null, new { id = "searchingForProject" })     

这个文本框有一个keyup监听器，它将启动对项目的ajax搜索，如果结果是成功的，则更新视图

var timeoutReference;
var timeoutforloading;
$(function () {
   $("#searchingForProject").keyup(function () {
        timeoutReference = setTimeout(function () {
            timeoutforloading = setTimeout(function () {
                $("#imageWebGridLoad").show();
                $("#gridcontent").hide();
            }, 250);
            var value = $("#searchingForProject").val();
            $.ajax({
                url: '@Url.Action("Index", "Project")',
                contentType: 'application/html; charset=utf-8',
                type: "GET",
                dataType: 'html',
                data: { searchString: value },
            }).success(function (result) {
                $('projects').html(result);
                clearTimeout(timeoutforloading);
            });
        }, 750);
    });
});

问题是，如果这个函数被放在内部<script>中，它工作得很好，但如果它被放在外部javascript文件中，它不会给我任何结果。

我知道它调用了函数，因为$("#imageWebGridLoad").show();将在0.25秒后开始旋转。

是我的Ajax调用中有什么错误，还是不能在这样的外部js文件中执行？

Answer 1

我不使用MVC4，但我的猜测是，现在JS是外部的，ASP没有将@Url.Action("Index", "Project")翻译成与AJAX一起使用的实际URL。我相信，如果你在HTML中有一个隐藏的div信息，然后用jQuery选择器调用它，你就可以随心所欲地使用它：

// HTML
<div id="ajaxurl" class="hidden">@Url.Action("Index", "Project")</div>
// JS
$.ajax({
  url: $('#ajaxurl').text(),
  // ...
})

或（感谢Satpal）

// HTML
<div id="ajaxurl" class="hidden" data-url='@Url.Action("Index", "Project")'></div>
// JS
$.ajax({
  url: $('#ajaxurl').data('url'),
  // ...
})

Answer 2

@Url.Action（"Index"、"Project"）仅在视图文件中被替换为真实Url。在视图文件中将其声明为变量。

 <script>
   var sUrl = '@Url.Action("Index", "Project")';
 </script>

并从外部.js文件中调用sUrl。

 $.ajax({
   url: sUrl,
 ...

编辑：

另一种方法是通过类似视图的方式提供原始js。

<script src="@Url.Action("Index", "ExternalJS")"></script>

并将"ExternalJS"方法放在Index控制器上，以使用原始javascript为视图提供服务。