javascript - AJAX $.post 在 View 中有效，但放在 .js 文件中时无效。所有其他 JQuery 都有效

Question

一般来说，我是 MVC 以及 JQuery 和 AJAX 的新手，我遇到了一个奇怪的问题。

我已经完成了构建练习网站的第一次试运行，在过去的几天里，我投入了时间来添加 JQuery 等，以使网站更具交互性。

今天我完成了所有的 JQuery，一切都很好，所以我决定将它从 View 中清除，并将它们放入 MVC 的 Scripts 文件夹中的 script.js 文件中。

作为 @Scripts.Render("~/Scripts/Employees.js") 插入到 View 中

但是，当我执行此操作时，任何与 AJAX 相关的内容都不起作用。

现在这只需要两个小代码片段，它们与 Controller 交互以编辑或保存更改，但其他一切都很好!即使编辑和保存制作菜单和其他 UI 更改的 JQuery 都可以正常工作，但实际的 $.post更新更改不起作用。

这是位于 JQuery 函数中的两个代码片段，它们都可以正常工作。

$.post(
'@Url.Action("customEdit", "Employee")',
{
    'id': newID,
    'name': newName,
    'birth': newDate
},
function (data) { },
"json"
);

和

$.post(
'@Url.Action("customDelete", "Employee")',
{
    'id': newID
},
function (data) { },
"json"
);

再一次，如果我将整个脚本逐字移回 View 中，效果会很好!所以我很困惑为什么将它移动到 .js 突然使只有这两个小片段不起作用。

代码没有重新排序，它会准确地重新插入到之前的位置。

这里的概述是我的全部 <script> .

 $(function () {
        $("td[colspan=12]").find("p").hide();
        $("td[colspan=12]").addClass("nopadding");

        $("tr").click(function (e) {
            if (!$(e.target).is('button') && !$(e.target).is('input')) {
                var $target = $(this);
                var $detailsTd = $target.find("td[colspan=12]");
                if ($detailsTd.length) {
                    $detailsTd.find("p").slideUp();
                    $detailsTd.addClass("nopadding");
                } else {
                    $detailsTd = $target.next().find("td[colspan=12]");
                    $detailsTd.find("p").slideToggle();
                    $detailsTd.toggleClass("nopadding");
                    $detailsTd.stopPropagation();
                }
            }
        });
    });

    function editFunction(element) {

        $(element).closest("span").hide();
        $(element).closest("td").find("span.item-save-button").show();
        $(element).closest("td").find("span.item-delete-button").hide();


        $(element).closest("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();

        $(element).closest("td").prev("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();

    }

function saveFunction(element) {
    var one = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
    var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();

    if (one == "" || two == "") {

        if (one == "") {
            alert("invalid name");
        }
        if (two == "") {
            alert("invalid birthday");
        }

    } else {

        $(element).closest("span").hide();
        $(element).closest("td").find("span.item-edit-button").show();
        $(element).closest("td").find("span.item-delete-button").show();

        $(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
        $(element).closest("td").prev("td").find("span.item-display")
            .show()
            .next("span.item-field")
            .hide();

        $(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
        $(element).closest("td").prev("td").prev("td").find("span.item-display")
            .show()
            .next("span.item-field")
            .hide();

        var newID = $(element).closest("td").find("span.ID").text();
        var newDate = $(element).closest("td").prev("td").find("span.item-display").text();
        var newName = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();

        $.post(
            '@Url.Action("customEdit", "Employee")',
             {
                 'id': newID,
                 'name': newName,
                 'birth': newDate
             },
            function (data) { },
            "json"
        );

    }
}

function deleteStart(element) {
    $(element).closest("table").toggleClass("table-hover");
    $(element).closest("tr").css('background-color', 'red');
}

function deleteStopped(element) {
    $(element).closest("table").toggleClass("table-hover");
    $(element).closest("tr").css('background-color', 'initial');
}

function deleteFunction(element) {
    var newID = $(element).closest("td").find("span.ID").text();
    console.log(newID);
    $('#'+newID).removeClass('fade');
    $('#' + newID).modal('hide');
    $(element).closest("table").toggleClass("table-hover");
    $(element).closest("tr").next("tr").remove();
    $(element).closest("tr").remove();
    $.post(
'@Url.Action("customDelete", "Employee")',
{
    'id': newID
},
function (data) { },
"json"
);
    $(element).closest("tr").css('background-color', 'initial');
}

是的，一切都像以前一样工作，甚至是保存和编辑交互(行更新、模式等)，但实际的 $.post不起作用(在调试中甚至没有命中 Controller )。然而，如果我只是将所有代码重新插入到 View 中，它就可以工作。

感谢任何帮助! :)

Answer 1

当您将 Javascript 放入 View 中时，Razor 渲染引擎会将以下行解析为适当的 URL:

'@Url.Action("customDelete", "Employee")'

但是 .js 文件不会被 View 引擎渲染，所以上面的行保持不变，这不是 URL。