jQuery Ajax传JSON至控制器Reply方法值全为null，仅FormData可用

向控制器的Reply方法传递JSON对象时，表单所有值都为null，但同一控制器的Create方法却能正常接收。仅当使用FormData对象并设置processData: false、contentType: false时，才能成功向Reply方法传值。已尝试JSON.stringify()、设置contentType: 'application/json'、添加dataType: 'json'、更换ViewModel等方法，问题仍未解决。

Create方法相关实现 #

JavaScript代码：

$('#commentSectionContainer').on('submit', '#comment-form', function (event) { // submit()已废弃，建议使用on('submit')
    event.preventDefault(); // 阻止表单默认提交行为

    let formData = buildFormData();

    $.ajax({
        type: 'POST',
        url: '/Comment/Create',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function (data, textStatus, jqXHR) {
            $('#commentSectionContainer').html(data); // 替换容器内容
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('Error creating comment: ' + errorThrown);
        }        
    });
});
function buildFormData() {
    return {
        text: $('#comment').val(),
        artId: $('#art-id').val(),
        comicId: $('#comic-id').val()
    };
}

HTML代码：

var disableButton = User.Identity.IsAuthenticated ? string.Empty : "disabled";
<form id="comment-form" method="post">
    <label for="comment">Add a comment</label>
    <div class="form-group">
        <label for="comment">Comment</label>
        <textarea class="form-control" id="comment" name="comment" rows="4" style="resize: none; overflow: hidden;"></textarea>
    </div>
    <button type="submit" class="btn btn-primary" @disableButton>Comment</button>
</form>

C#代码：

public async Task<IActionResult> Create([FromBody] CreateCommentViewModel model)
{
// 该model的属性值会被正常填充
}

Reply方法相关实现 #

JavaScript代码：

$('#commentSectionContainer').on('submit', '#reply-form', function (event) {
        event.preventDefault();
        var commentId = $(this).find('button[type="submit"]').data('id');
        let formData = buildFoo(commentId); // 仅FormData类型的表单有效，JSON对象无效

        $.ajax({
            url: '/Comment/Reply',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false, // 若设置为'application/json'，控制器方法无法读取表单数据
            success: function (data, textStatus, jqXHR) {
                $('#commentSectionContainer').html(data); // 替换容器内容
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error creating comment: ' + errorThrown);
            }
        });
    });

function buildFoo(commentId) { // 当前可正常工作
    let formData = new FormData();
    let text = $('#reply-text-' + commentId).val();
    formData.append('Text', text);
    formData.append('ArtId', $('#art-id').val());
    formData.append('ComicId', $('#comic-id').val());
    formData.append('ParentCommentId', commentId);
    return formData;
}

function buildReplyFormData(commentId) { // 最初尝试的方法，无效
    return {
        Text: $('#reply-text-' + commentId).val(),
        ArtId: $('#art-id').val(),
        ComicId: $('#comic-id').val(),
        ParentCommentId: commentId
    };
}

循环内的HTML代码：

<div class="reply-area" id="reply-area-@comment.Id" style="display: none;">
    <form id="reply-form" method="post" data-parentId="@comment.Id">
        <input type="hidden" name="parentId" value="@comment.Id" />
        <div class="form-group">
            <textarea class="form-control" id="reply-text-@comment.Id" name="reply" style="resize: none; overflow: hidden;"></textarea>
        </div>
        <button type="submit" class="btn btn-primary save-btn" data-id="@comment.Id">Comment</button>
        <button type="button" class="btn btn-secondary cancel-reply-btn" data-id="@comment.Id">Cancel</button>
    </form>
</div>

C#代码：

// POST: CommentController/Reply
[HttpPost]
[Authorize]
public async Task<IActionResult> Reply(ReplyCommentViewModel model)
{ // 当传入null的ComicId时，ModelState.IsValid会验证失败
    if (model.ArtId == null && model.ComicId == null)
        return BadRequest();
}

public class ReplyCommentViewModel
{
    [Required]
    [StringLength(1000, MinimumLength = 1)]
    public string Text { get; set; }
    public int? ArtId { get; set; }
    public int? ComicId { get; set; }
    public int ParentCommentId { get; set; }
}

内容的提问来源于stack exchange，提问作者Henry