当使用 jquery .val() 方法设置对象字段时，Jquery ajax post 发送空值

Question

我正在使用 Asp.Net 核心 MVC。我正在尝试使用 jquery http post post 一个对象到操作结果。当我用静态值设置我的对象时，我可以看到所有字段都在客户端和后端正确设置。发布的对象不为空。

当我使用 jquery .val() 方法设置请求字段时。请求对象作为 null 发送到后端。我哪里出错了？

 $("#saveReport").on("click", function () { //SENDS NULL OBJECT
        var request = { 
            BookId: $("#cmbBook").val(),
            PageCount: $("#txtPageCount").val(),
            Date: $("#dateReport").val(),
            Note: $("#txtNotes").val(),
        };

        //var request = { //SENDS OBJECT PROPERLY
        //    BookId: 1,
        //    PageCount: 10,
        //    Note: "test"
        //};

          $.ajax({
                type: "POST",
                url: appUrl + "Report/AddUserReport",
                data: JSON.stringify(request),
                success: function (data) {

                },
                error: function (data) {

                },
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });


    });

下面是后端

 [HttpPost]
    public ActionResult<ReadingLogResponse> AddUserReport([FromBody]AddReportModel model)
    {
        var response = _reportBusiness.AddReport(new AddReadingLogRequest()
        {
            BookId = model.BookId,
            Date = model.Date,
            Note = model.Note,
            PageCount = model.PageCount
        });

        return response;
    }

Answer 1

jquery .val() 方法会设置字符串类型的数据 default.You 需要解析 Int.Here 是一个简单的演示如下：

1.Model:

public class AddReportModel
{
    public int BookId { get; set; }
    public int PageCount { get; set; }
    public DateTime Date { get; set; }
    public string Note { get; set; }
}

2.View:

<form>
    BookID:<input id="cmbBook" type="text" />
    PageCount:<input id="txtPageCount" type="text" />
    Date:<input id="dateReport"  />
    Notes:<input id="txtNotes" type="text" />
    <input type="button" id="saveReport" value="post" />
</form>
@section Scripts
{
    <script>
        $("#saveReport").on("click", function () { //SENDS NULL OBJECT
            var request = {
                BookId: parseInt($("#cmbBook").val()),
               PageCount: parseInt($("#txtPageCount").val()),
               Date: $("#dateReport").val(),
               Note: $("#txtNotes").val(),
            };
            console.log(request);
            console.log(JSON.stringify(request));
            $.ajax({
                type: "POST",
                url: appUrl + "Report/AddUserReport",
                data: JSON.stringify(request),
                success: function (data) {
                },
                error: function (data) {
                },
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });

        });
    </script>
}

3.Controller:

[HttpPost]
public ActionResult<ReadingLogResponse> AddUserReport([FromBody]AddReportModel model)
{
    //...
}

当使用 jquery .val() 方法设置对象字段时，Jquery ajax post 发送空值

Jquery ajax post sends null when object fields are set with jquery .val() method

javascript

model-view-controller

jquery

http-post

asp.net-core