Net Core Ajax Jquery 将 Null 值传递给控制器​​，Vs2022，.Net 6

Question

我尝试了不同形式的调用，相同的名称，使用字符串化，没有字符串化......但没有任何效果。

我的 html

<input type="text" id="txtName"/>
<input type="button" id="btnGet" value="Get Current Time"/>
<input type="text" id="txtresponse"/>

我的脚本

$(function () {
            $("#btnGet").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: '{name: "' + $("#txtName").val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        //alert(response);
                        $("#txtresponse").val(response);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        //alert(response.responseText);
                    }
                });
            });
        }); 
    

我的控制器

[HttpPost]
public ContentResult AjaxMethod(string name)
{
    string currentDateTime = string.Format("Hello {0}.\nCurrent DateTime: {1}", 
                                                      name, DateTime.Now.ToString());
    return Content(currentDateTime);
}

在这里，“AjaxMethod”控制器始终接收 null 作为“name”参数的值。

我的版本是 .Net 2022 和 .Net 6

非常感谢您的帮助

Answer 1

您无需连接字符串即可使用 AJAX 将数据发送到控制器。 你可以简单地给它一个 javascript 对象来发送。 尝试以下操作：

$(function () {
            $("#btnGet").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: {
                        name: $("#txtName").val() 
                    },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        //alert(response);
                        $("#txtresponse").val(response);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        //alert(response.responseText);
                    }
                });
            });
        }); 

Answer 2

你可以创建模型类

public class NameModel
{
  public string Name {get; set;}
}

修复ajax数据

 data: JSON.stringify({ name:$("#txtName").val() }),

并将 frombody 属性添加到操作中

public ContentResult AjaxMethod([FromBody]NameModel model)
{
  var name=model.Name;
  ... another your code
}

或保持原样，但从 ajax 中删除 "application/json; charset=utf-8" contentType

 $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: {name:  $("#txtName").val() },
                    ....

Answer 3

如果您不指定（例如使用[FromBody] / [FromQuery] ）源，则 ASP.NET 6 MVC 默认接收application/x-www-form-urlencoded类型数据。

更改您的代码，如下所示：

$(function () {
    $("#btnGet").click(function () {
        $.ajax({
            type: "POST",
            url: "/Home/AjaxMethod",
            data: { name: $("#txtName").val() },      //change here....
  //contentType: "application/json; charset=utf-8",   //remove it
                                                      // default is application/x-www-form-urlencoded
            dataType: "json",
            success: function (response) {
                //alert(response);
                $("#txtresponse").val(response);
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                //alert(response.responseText);
            }
        });
    });
});