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

Question

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

当我使用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（）方法默认将数据设置为字符串类型。您需要解析Int。这是一个简单的演示，如下所示：

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。查看：

<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)
{
    //...
}