如何将数据从 Ajax 传递到 Controller 方法？

Question

我有以下 javascript 代码：

 <script>
  function RequestData() {
    var Nos = $("#search").val();
    var DataIntervals = $("#txtDataInterval").val();
    var StartDates = $("#start_date").val();
    var EndDates = $("#end_date").val();
    if (Nos != null && DataIntervals != null && StartDates != null && EndDates != null) {
        $.ajax({
            type: "POST",
            async: false,
            url: 'ExtractData/ExtractData',
            data: {
                'No': Nos,
                'DataInterval': DataIntervals,
                'StartDate': StartDates,
                'EndStart': EndDates
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                alert("The Query Has Completed Successfully.");
            },
            error: function(e) {
                alert("Something Went Wrong Please Try Again." + e);
            }
        });
    } else {
        alert("Please Select All The Required Fields and Try Again.");
    }
  }
</script>

我正在尝试将参数传递给 C# 方法，但它们总是 null。 这是我的 C# 方法：

[HttpPost]
public IActionResult ExtractData(string No, string DataInterval, string StartDate, string EndStart)
{
  string x = No;
  return View();
}

我做错了什么使此方法参数始终为 null？

Answer 1

所以，我在 Ajax 调用服务器时使用的是我创建了两个名为“PostMyData”和“GetMyData”的方法，如下所示。 他们接收三个参数：

数据：即要发送到服务器
URL：这是您喜欢调用的 API 的 URL
SuccessFunction：这是检索响应的回调 function

注意：您可以根据需要编辑此 function。

// Post Data
    function PostMyData(data, url, SuccessFunction) {
      $.ajax({
        type: "POST",
        //async: false,
        url: url,
        data: data,
        dataType: 'json',
        success: SuccessFunction,
        failure: function (response) {
          //location.href = 'Shared/Error';
          console.log(response.responseText);
        },
        error: function (response) {
          //location.href = 'Shared/Error';
          console.log(response.responseText);
        }
      });
    }

    // Get Data
    function GetMyData(url, SuccessFunction) {
      $.ajax({
        type: "GET",
        url: url,
        dataType: 'json',
        success: SuccessFunction,
        failure: function (response) {
          //location.href = 'Shared/Error';
          console.log(response.responseText);
        },
        error: function (response) {
          //location.href = 'Shared/Error';
          console.log(response.responseText);
        }
      });
    }

使用示例（您的代码）：

 const obj = { 'No': Nos, 'DataInterval': DataIntervals, 'StartDate': StartDates, 'EndStart': EndDates}

 PostMyData(obj, '/ExtractData/ExtractData', (res) => {
      alert('working')
    })

Answer 2

您是否尝试过序列化数据？

var data = {
    No: Nos,
    DataInterval: DataIntervals,
    StartDate: StartDates,
    EndStart: EndDates
};

$.ajax({
    type: "POST",
    async: false,
    url: 'ExtractData/ExtractData',
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        alert("The Query Has Completed Successfully.");
    },
    error: function(e) {
        alert("Something Went Wrong Please Try Again." + e);
    }
});