ASP.NET Core中jQuery调用局部视图Action未命中断点的问题解决

在实现评论提交后更新局部视图的功能时，第一个提交评论的AJAX请求能正常调用PostComment Action并命中断点，但后续调用LoadPartialView函数发起的AJAX请求始终无法触发UpdateCommentsPartial Action的断点，且返回415（不支持的媒体类型）状态码。

视图代码（DetailsView） #

<form method="post">
    <div id="haveToReloaddiv" class="entriesContainer">
        @* 想用创建的局部视图更新这个div *@
    </div><!--End  entries container -->
</form>  

<div class="replyForm">
    <form id="formPostComment" method="post" asp-action="PostComment" asp-controller="BlogData">
        <div class="row">
            <div class="col-md-6">
                <input type="text" placeholder="姓名 *" id="name">
            </div>
            <div class="col-md-6">
                <input type="email" placeholder="邮箱 *" id="email">
            </div>
        </div>

        <textarea placeholder="留言 *" id="message" cols="45" rows="10"></textarea>

        <submit id="btnPostComment" class="btn btn-main m-bottom-40">提交评论</submit>
    </form>
</div>

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/js/jquery.min.js"></script>
    <script src="~/bootstrap/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            $("#btnPostComment").click(function () {
                var url = $("#formPostComment").attr("action");
                var formData = new FormData();
                formData.append("Name", $("#name").val());
                formData.append("Email", $("#email").val());
                formData.append("Comment", $("#message").val());
                formData.append("BlogId",@Model.Id);

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        //alert(response.name);
                        LoadPartialView(response);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });

        function LoadPartialView(responseModelData) {
            $.ajax({
                type: 'POST',
                url: "/BlogData/UpdateCommentsPartial",
                data: { "responseModel": responseModelData },
                success: function (response) {
                    $("#haveToReloaddiv").html(response);
                }
            })
        }
    </script>
}

控制器代码 #

[HttpPost]
public async Task<JsonResult> PostComment([Bind("Name,Email,Comment,BlogId")] BlogComments blogComment)
{
    if (ModelState.IsValid)
    {
        var blog = _context.BlogPosts.Include(b => b.BlogComments).FirstOrDefault(x => x.Id == blogComment.BlogId);
        blogComment.PostedDateTime = DateTime.Now;
        blog.BlogComments.Add(blogComment);
        await _context.SaveChangesAsync();
    }

    ResponseModel model = new ResponseModel()
    {
        Status = "Success",
        Id = blogComment.Id,
        Comments = blogComment.Comment,
        Name = blogComment.Name,
    };

    return Json(model);
}

[HttpPost]
public PartialViewResult UpdateCommentsPartial([FromBody]ResponseModel responseModel)
{
    // 从未命中此处的断点
    var blog = _context.BlogPosts.FirstOrDefault(x => x.Id == responseModel.Id);
    return PartialView("_UpdateCommensPartial", blog.BlogComments);
}

补充说明 #

ResponseModel类 #

public class ResponseModel
{
    public string Status { get; set; }
    public int Id { get; set; }
    public string Comments { get; set; }
    public string Name { get; set; }
}

额外现象 #

• 在LoadPartialView函数中，只能通过responseModelData.name（小写n）获取到姓名值，使用responseModelData.Name会返回Undefined，说明JSON序列化后属性名变为小写。
• 查看Network标签，请求URL正确，但返回状态码为415（不支持的媒体类型）。

解决方法 #

将UpdateCommentsPartial方法参数上的[FromBody]特性改为[FromForm]后，断点成功触发，请求正常处理。

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