如何从 Javascript 调用 MVC5 操作？

Question

我正在尝试用 Javascript 更新 table（基于视图的用户输入）。直到 alert("We Made it This Far") 一切似乎都正常。然后我得到 alert("Failed").

我在控制器的第一行放置了一个断点。在调试运行时，我从未遇到过该断点。所以我认为我们永远不会真正到达控制器。

我已经尝试了 URL 的多种变体来连接到控制器，但我正在拔头发。

我的控制器是NewOrderController.cs。我的行动是SaveData

我会 post 我的代码如下。我不认为需要控制器代码，因为我认为我什至没有走那么远来查看它是否有效。但是，如果需要该代码，请告诉我，我也会 post 它。

$("#addsupply").click(function() {
  var RequisitionNumber = document.getElementById("reqlabel").textContent;
  var UnitsOrdered = document.getElementById('HowMany').value;

  var e = document.getElementById("SuppliesList");
  var SuppliesID = e.options[e.selectedIndex].value;

  if (UnitsOrdered.trim() == "" || SuppliesID.trim() == "") {
    alert("You Must Select a Supply AND Enter The Amount of Supplies to Order!");
    return false;
  }

  alert("we made it this far")
  // here call server side function for save data using jquery ajax

  $.ajax({
    url: "../NewOrder/SaveData",
    // url: '@Url.Action("NewOrder", "SaveData")',
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
      "RequisitionNumber": RequisitionNumber,
      "UnitsOrdered": UnitsOrdered,
      "SuppliesID": SuppliesID
    }),
    success: function(data) {
      if (data.d == "success") {
        alert("Data saved successfully");
        // clear text here after save complete
        $('#HowMany').val('');
      }
    },
    error: function(xhr, ajaxOptions, thrownError) {
      // alert(thrownError);
      alert("failed");
    }
  }).done(function() {
    alert("we did it");
  });
});

编辑：为 SaveData 方法添加代码：

        [WebMethod]
    public static string SaveData(string RequisitionNumber, int UnitsOrdered, int SuppliesID)
    {

        string status = "";
        // apply validation here
        ICS_Orders c = new ICS_Orders { LineID = 0, RequisitionNumber = RequisitionNumber, UnitsOrdered = UnitsOrdered, SuppliesID = SuppliesID };

        // here MyDatabaseEntities  is our dbContext
        using (ICSContext dc = new ICSContext())
        {
            dc.ICS_Orders.Add(c);
            dc.SaveChanges();
            status = "success";
        }
        return status;
    }
}

}

第二次编辑：下面是我从 Fidder 得到的错误。找不到资源。我已经尝试了各种方式（但松散）来添加 url 并且似乎没有任何效果。不明白为什么它找不到我的控制器方法。它在我的控制器文件夹中。 .这是一个问题吗？

        <h2> <i>The resource cannot be found.</i> </h2></span>

        <font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif ">

        <b> Description: </b>HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. &nbsp;Please review the following URL and make sure that it is spelled correctly.
        <br><br>

        <b> Requested URL: </b>/NewOrder/SaveData<br><br>

Answer 1

请更新 MVC 操作语法：

来自

[WebMethod]
public static string SaveData(string RequisitionNumber, int UnitsOrdered, int SuppliesID)

至

[HttpPost]
public ActionResult SaveData(string RequisitionNumber, int UnitsOrdered, int SuppliesID)

此外， (1) 只是关于更好实践的附注：您可以使用这些属性创建一个 class，而不是用船加载您的函数，并让 MVC 负责通过序列化映射到正确的属性。

<form action="@Url.Action("SaveData", "Orders")"  method="post">
@using (Html.BeginForm("SaveData", "Orders", new {}, FormMethod.Post)) // Please check the syntax here.

(2) 您没有使用表格 post 有什么原因吗？您使用的是剃刀视图还是其他东西？如果是剃须刀，你可以使用@Html.BeginForm

如何从 Javascript 调用 MVC5 操作？

How To Call an MVC5 Action from Javascript?

jquery

jscript

asp.net-mvc-5