外部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.我相信如果您将这些信息隐藏div在HTML中,然后使用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'),
  // ...
})