AJAX $.post 在 View 中有效，但在 .js 文件中无效。所有其他 JQuery 作品

Question

我对 MVC 以及 JQuery 和 AJAX 很陌生，但我遇到了一个奇怪的问题。

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

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

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

但是，当我这样做时，关于 AJAX 的任何事情都不起作用。

现在这只需要两个与控制器交互的 mini-sn-ps 代码来编辑或保存更改，但其他一切都很好！即使是编辑和保存使菜单和其他 UI 更改的 JQuery 都可以正常工作，但更新更改的实际 $.post 不起作用。

以下是位于 JQuery 函数中的两个 sn-ps 代码，它们都可以正常工作。

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

和

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

再一次，如果我将整个脚本从字面上移回视图中，它的效果会非常好！所以我很困惑为什么将它移动到 .js 突然使只有这两个小 sn-ps 不起作用。

没有对代码重新排序，它会在原来的位置重新插入。

这里是我的整个<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 不起作用（控制器甚至没有在调试中命中）。但是，如果我只是将所有代码重新插入到视图中，它就可以工作。

任何和所有的帮助表示赞赏！ :)

Answer 1

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

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

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

Answer 2

渲染引擎没有解析 JS 文件，只有你的视图在解析。因此，您需要将 Razor 中的这些 URL 保存为主视图中的 JS 变量。

把它放在你的主视图中：

<script>var action_custom_delete = '@Url.Action("customDelete", "Employee")';</script>
@Scripts.Render("~/Scripts/Employees.js")

现在您可以在 JS 文件中任何需要 URL 的地方使用变量 action_custom_delete。