AJAX $.post funciona en Vista, pero no funciona cuando se coloca en una .archivo js.Todas las demás funciona JQuery

Question

Soy nuevo en MVC en general, así como JQuery y AJAX y me han llegado a través de un extraño asunto.

He terminado mi primera carrera-a través de la construcción de una práctica de la página web y en los últimos días he dedicado mi tiempo a la adición de JQuery y tal para hacer el sitio más interactivo.

Hoy he terminado todos mis JQuerys y todo funciona muy bien así que me decidí a limpiar todo fuera de la Vista y los ponen en un script.js archivo en la carpeta de secuencias de comandos de la MVC.

Inserta en la Vista como @Scripts.Render("~/Scripts/Employees.js")

Sin embargo cuando hago esto nada en lo que respecta a AJAX no funciona.

Ahora, esto sólo implica dos mini-fragmentos de código que interactuar con el controlador para Editar o Guardar un cambio, pero todo lo demás funciona muy bien!Incluso el editar y guardar JQuerys que hacer menús y otra interfaz de usuario cambia todo funciona muy bien, pero el real $.post para actualizar el cambio no funciona.

Aquí están los dos fragmentos de código que están dentro de las funciones de JQuery que todos funcionan igual de bien.

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

y

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

y de nuevo, si me muevo todo el script, literalmente, de vuelta a la Vista es que funciona genial!Así que estoy confundido en cuanto a por qué la mueve a una .js de repente hace sólo estos dos pequeños fragmentos que no funcione.

No hay re-ordenamiento de código, re-inserta exactamente donde estaba antes.

Para una visión general aquí es mi todo <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');
}

Muuuy sí, TODO funciona igual que antes, incluso de Guardar y Editar las interacciones (fila actualizaciones, los modales, ect..), pero la real $.post no funciona (controlador no está ni siquiera entrar en la Depuración).Sin embargo, si yo acabo de volver a insertar todo el código en la Vista funciona.

Cualquier ayuda apreciado!:)

Answer 1

Cuando pones tu código Javascript en una vista, maquinilla de Afeitar motor de renderizado va a resolver la siguiente línea a la dirección URL apropiada:

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

Pero .js los archivos no conseguir prestados por el motor de la vista, por lo que la línea anterior se mantiene igual que no es una dirección URL.

Answer 2

El archivo JS no está siendo analizada por el motor de renderizado, sólo sus puntos de vista son.Así que tendrás que salvar a los de la dirección URL de la Navaja como JS variables en la vista principal.

El lugar esta en su vista principal:

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

Ahora usted puede utilizar la variable action_custom_delete en el archivo JS donde usted necesita la dirección URL.