asynchronous HTTP (ajax) запрос работает в теге скрипта, но не в js-файле

Question

У меня есть этот вызов ajax в теге скрипта в нижней части моей страницы. Все работает отлично! Я могу установить точку останова внутри метода действия updatestatus в моем контроллере. Мой сервер также отправляется на рассылку, и этот метод называется большим! Но когда я помещаю javascript внутри js-файла, вызов ajax не попадает на мой сервер. Тем не менее, все остальные операции внутри кода выполняются, а не только после вызова ajax для метода updatestatus для студента.

<script> 
$(document).ready(function() { 
    console.log("ready!"); 
    alert("entered student profile page"); 
}); 

var statusdropdown = document.getElementById("enumstatus"); 
statusdropdown.addEventListener("change", function (event) { 

    var id = "@Model.StudentId"; 
    var url = '@Url.Action("UpdateStatus", "Student")'; 
    var status = $(this).val(); 
    $.post(url, { ID: id, Status: status }, function (data) { 
     // do something with the returned value e.g. display a message? 
     // for example - if(data) { // OK } else { // Oops } 
    }); 

    var e = document.getElementById("enumstatus"); 
    if (e.selectedIndex == 0) { 
     document.getElementById("statusbubble").style.backgroundColor = "#3fb34f"; 
    } else { 
     document.getElementById("statusbubble").style.backgroundColor = "#b23f42"; 
    } 
}, false); 
</script> 

Теперь я положил это внизу моей страницы.

@section Scripts { 
    @Scripts.Render("~/bundles/studentprofile") 
} 

и в моем файле bundle.config это выглядит следующим образом

bundles.Add(new ScriptBundle("~/bundles/studentprofile").Include(
      "~/Scripts/submitstatus.js")); 

и submitstatus.js выглядит следующим образом. Я знаю, что он вводит и запускает этот код, потому что я вижу предупреждение и цвет фона. Таким образом, код работает. Его просто не отправляют обратно на мой сервер.

$(document).ready(function() { 
console.log("ready!"); 
alert("submit status entered"); 

var statusdropdown = document.getElementById('enumstatus'); 
statusdropdown.addEventListener("change", function (event) { 

    var id = "@Model.StudentId"; 
    var url = '@Url.Action("UpdateStatus", "Student")'; 
    var status = $(this).val(); 
    $.post(url, { ID: id, Status: status }, function (data) { 
     // do something with the returned value e.g. display a message? 
     // for example - if(data) { // OK } else { // Oops } 
    }); 

    var e = document.getElementById('enumstatus'); 
    if (e.selectedIndex == 0) { 
     document.getElementById("statusbubble").style.backgroundColor = "#3fb34f"; 
    } else { 
     document.getElementById("statusbubble").style.backgroundColor = "#b23f42"; 
    } 
}, false); 

}); 

В окне консоли я получаю сообщение об ошибке.

POST https://localhost:44301/Student/@Url.Action(%22UpdateStatus%22,%20%22Student%22) 404 (Не найдено)

Answer 1

код Бритва не разбирается во внешних файлах, так используя var id = "@Model.StudentId"; в главном окне приведет к (скажем) var id = 236;, во внешнем файле сценария это приведет в var id = '@Model.StudentId'; (значение не анализируется)

Вы можете либо объявить переменные в главном окне

var id = "@Model.StudentId"; 
var url = '@Url.Action("UpdateStatus", "Student")'; 

, и внешний файл сможет получить доступ к значениям (удалить выше 2 строки из внешнего файла сценария) или добавить их как атрибуты элемента data-, например (я принимаю enumstatus - это выпадающий список?)

@Html.DropDownListFor(m => m.enumStatus, yourSelectList, "Please select", new { data_id = Model.StudentId, data_url = Url.Action("UpdateStatus", "Student") }) 

который будет оказывать что-то вроде

<select id="enumStatus" name="enumStatus" data-id="236" data-url="/Student/UpdateStatus"> 

Затем во внешнем скрипте файла, который вы можете получить доступ к значениям

var statusbubble = $('#statusbubble'); // cache this element 
$('#enumStatus').change(function() { 
    var id = $(this).data('id'); 
    var url = $(this).data('url'); 
    var status = $(this).val(); 
    $.post(url, { ID: id, Status: status }, function (data) { 
    .... 
    }); 
    // suggest you add/remove class names instead, but if you want inline styles then 
    if (status == someValue) { // the value of the first option? 
    statusbubble.css('backgroundColor', '#3fb34f'); 
    } else { 
    statusbubble.css('backgroundColor', '#b23f42'); 
    }; 
});