javascript - 异步HTTP(ajax)请求在脚本标签中有效，但在js文件中无效

Question

我在页面底部的脚本标记中有这个 ajax 调用。一切正常!我可以在 Controller 的“updatestatus”操作方法内设置断点。我的服务器也被发布，并且该方法被称为很棒!但是当我将 javascript 放入 js 文件中时，ajax 调用不会到达我的服务器。不过，里面的所有其他代码都会运行，只是不会对 StudentController updatestatus 方法进行 ajax post 调用。

<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 (Not Found)

Answer 1

Razor 代码不会在外部文件中进行解析，因此在主视图中使用 var id = "@Model.StudentId"; 将导致(例如)var id = 236; code>，在外部脚本文件中，它将产生 var id = '@Model.StudentId'; (该值未解析)

您可以在主视图中声明变量

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

并且外部文件将能够访问这些值(从外部脚本文件中删除上述两行)，或者将它们添加为元素的 data- 属性，例如(I'我假设 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');
  };
});