ASP.NET Core 2.1 MVC 使用 XMLHttpRequest 将数据从 JavaScript 发送到 Action 方法答案

【问题标题】：ASP.NET Core 2.1 MVC send data from JavaScript to Action method using XMLHttpRequestASP.NET Core 2.1 MVC 使用 XMLHttpRequest 将数据从 JavaScript 发送到 Action 方法
【发布时间】：2019-07-17 23:36:16
【问题描述】：

这与下面类似，但没有 Ajax。我正在使用 JavaScript 和 XMLHttpRequest

AJAX post data is null when it reaches the ASP.NET Core 2.1 controller

在 ASP.NET MVC 中一切正常，但我正在学习 ASP.NET Core MVC。

Home.cshtml 中的按钮调用下面的 JavaScript 方法，该方法调用 HomeController.cs 中名为 Test 的方法。

我的问题是如果我在我的测试方法 serverName 和 port 中保留断点都是空的

function MyMethod() {
    var xmlhttp = new XMLHttpRequest();
    var url = "/Home/Test";
    var input = {};
    input.serverName = document.getElementById("serverName").value;
    input.port = document.getElementById("port").value;
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsResp = JSON.parse(xmlhttp.responseText);
            if (jsResp.Status == "Success") {
                //show success
            }
            else {
                //show error
            }
        }
    }
    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlhttp.send(JSON.stringify(input));
}



[HttpPost]
 public JsonResult Test(string serverName, string port)
 {
   try
     {
        if (string.IsNullOrEmpty(serverName) ||
            string.IsNullOrEmpty(port))
         {
            return Json(new { Status = "Error", Message = "Missing Data" });
         }
        else 
         {
        return Json(new { Status = "Success", Message = "Got data" });
         }
       }
       catch (Exception e)
        {
             return Json(new { Status = "Error", Message = e.Message });
        }
 }

我什至在下面尝试过，但没有任何帮助

public JsonResult Test(JObject serverName, JObject port) -- controller method not hiting

public JsonResult Test(object serverName, object port) -- not allowing me to cast into string

public JsonResult Test([FromBody] string serverName, [FromBody] string port)

【问题讨论】：

使用像wireshark或fiddler这样的嗅探器比较好请求和坏请求。通常这些类型错误是由于第一个请求中的默认标头值不同。
我的问题是如果我在我的测试方法中保留断点 serverName 和 port 都是 null
您发送了一个字符串（字符串化对象），但告诉您的控制器需要两个值。
在捕获嗅探器数据时使用断点。让它运行，这样你就可以比较好请求和坏请求。

标签： javascript c# asp.net-mvc asp.net-core xmlhttprequest

【解决方案1】：

由于您的内容类型是application/json;charset=UTF-8，因此您需要使用[FromBody]，并根据您的情况将数据作为对象接收。

此外，您只能在动作参数中使用一次[FromBody]（来自here）

不要将 [FromBody] 应用于每个操作方法的多个参数。 ASP.NET Core 运行时将读取请求流的职责委托给输入格式化程序。一旦请求流被读取，就不能再被读取以绑定其他 [FromBody] 参数。

您可以按照以下步骤正确传递数据：

1.创建视图模型：

public class ServerModel
{
    public string serverName { get; set; }
    public string port { get; set; }
}

2.动作：

[HttpPost]
    public JsonResult Test([FromBody] ServerModel data)
    {
        try
        {
            if (string.IsNullOrEmpty(data.serverName) ||
                string.IsNullOrEmpty(data.port))
            {
                return Json(new { Status = "Error", Message = "Missing Data" });
            }
            else
            {
                return Json(new { Status = "Success", Message = "Got data" });
            }
        }
        catch (Exception e)
        {
            return Json(new { Status = "Error", Message = e.Message });
        }
    }

【讨论】：