Question

我在这个页面底部的脚本标签中有这个ajax调用。一切正常！我可以在控制器的'updatestatus'动作方法中设置一个断点。我的服务器也被发布了，方法被称为很棒！但是当我把javascript放在js文件中时，ajax调用没有命中我的服务器。内部的所有其他代码运行，但不是ajax post调用studentcontroller 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

Razor代码未在外部文件中解析，因此在主视图中使用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');
  };
});

异步HTTP（ajax）请求在脚本标记中起作用，但在js文件中起作用

1 个答案: