如何从 Javascript 调用 MVC5 操作?

How To Call an MVC5 Action from Javascript?

提问人:ExecChef 提问时间:8/1/2019 最后编辑:ExecChef 更新时间:8/2/2019 访问量:90

问:

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

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

我已经尝试了许多 URL 变体来访问控制器,我正在拔掉我的头发。

我的控制器是.我的行动是NewOrderController.csSaveData

我将在下面发布我的代码。我不认为需要控制器代码,因为我认为我甚至没有走那么远,看看它是否有效。但是,如果需要该代码,请告诉我,我也会发布它。

$("#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那里得到的错误。未找到资源。我已经尝试了各种方法(但松散)来添加网址,但似乎没有任何效果。不明白为什么它找不到我的控制器方法。它在我的控制器文件夹中。.这是一个问题吗?

        <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>
jquery asp.net-mvc-5 jscript

评论

0赞 Rory McCrossan 8/1/2019
检查控制台是否有响应的确切错误。我建议取消对通话的评论,以便您知道 URL 是正确的。@Url.Action()
0赞 Canica 8/1/2019
请展示您的方法是什么样子的。SaveData
0赞 ExecChef 8/1/2019
@jcruz - 我添加了 SaveData 方法代码。
0赞 Canica 8/1/2019
尝试将 [FromBody] 参数绑定添加到方法中。阅读此处了解更多信息:learn.microsoft.com/en-us/aspnet/web-api/overview/...

答:

0赞 sam 8/2/2019 #1

请更新 MVC 操作语法:

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

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

也 (1) 关于更好做法的旁注:您可以创建一个具有这些属性的类,并让 MVC 负责通过序列化映射到正确的属性,而不是使用各种参数加载函数。

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

(2) 你不使用表格邮寄有什么原因吗?您使用的是剃须刀视图还是其他东西?如果是 razor,则可以使用 @Html.BeginForm

评论

0赞 ExecChef 8/6/2019
谢谢!正如你所建议的那样,我最终使用了 @Html.BeginFom。