asp.net core load partial view from jQuery on click

In simple terms I am calling one jQuery function in an other. The first function associated to the Action Method, I get the breakpoint fine. But for the second function, it never hits the breakpoint for the associated Action Method.

Here is a view called DetailsView. I have two forms, one to save some data to the DB (associated to PostComment action method which works fine). I am calling LoadPartialView jQuery function when I get the response from the first function so I can update the haveToReloaddiv div. The problem is I am expecting a breakpoint to hit UpdateCommentsPartial Action method but I never get the breakpoint there. I am able to receive a success response for the first jQuery call because please see the commented alert(response.name). I am getting the name fine.

<form method="post">
                            <div id="haveToReloaddiv" class="entriesContainer">
 @I want to update this div with the Partial View i created.@
                            </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="Name *" id="name">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="email" placeholder="Email *" id="email">
                                    </div>
                                </div>

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

                                <submit id="btnPostComment" class="btn btn-main m-bottom-40">Post Comment</submit>

                            </form>

 @section Scripts{

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>

        <!-- jQuery -->
        <script src="~/js/jquery.min.js"></script>

        <!-- Bootstrap -->
        <script src="~/bootstrap/js/bootstrap.min.js"></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>
}

In my controller I get the breakpoint fine for the PostComment action method associated to the first jQuery function. But I can never get the breakpoint to the UpdateCommentsPartial ActionMethod associated to LoadPartialView jQuery function.

[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)
        {
//I never get the breakpoint here
            var blog = _context.BlogPosts.FirstOrDefault(x => x.Id == responseModel.Id);
            return PartialView("_UpdateCommensPartial", blog.BlogComments);
        }

Edit

Just for reference here is my ReferenceModel class. I am expecting [FromBody] to work but I don't know why it's not working.

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

And now in the LoadPartialView function, I am alerting the name like this and it displays just fine. Is it because of any case sensitivity? I have N in C# code. But alert only works with lower case n for name. If I alert Name I get Undefined.

function LoadPartialView(responseModelData) {
                alert(responseModelData.name);

Now I write the console.log and this is what it display and in the Network tab the URL is right but it shows StatusCode 415 which is unsupported type.

[FromForm] Works finally.