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（“索引”，“项目”）仅在视图文件中被真实网址替换。在视图文件中将其声明为变量。

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

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

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

编辑：

另一种方法是通过视图来提供原始js。

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

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

外部JavaScript不起作用，而内部则起作用

2 个答案: