Asp.net core not binding values from Jquery post

First off I am learning Asp.net core. I have a View as follows, when I the blogItemId I retrieve an item and send it as a model to the DetailedView.cshtml as follows:

[HttpGet]
public IActionResult DetailedView(int blogItemId)
{
    var item = _mainBlogHelperModel.BlogDataItems.FirstOrDefault(x => x.Id == blogItemId);

    if (item == null)
    {
        return RedirectToAction("MainBlog", new { page = 1, blogCategory = "" });
    }

    return View(item);
}

Now in the DetailedView.cshtml, I have a form. When I click the "Post Comment" button within the form, I would like to save some model record within the database and update some section with in the view.

Problem number 1: Please see my Model class below, I have a navigation property and foreign key. How do I specify these values within jQuery from my Model.

Problem number 2: I have a breakpoint in the PostComment method, but jQuery is not binding any values. Everything is null. please help.

Here is my DetailedView.cshtml:

@model KGSBlog.Models.BlogData

@SOME CODE HERE @

<form id="formPostComment" method="post" action="BlogData/PostComment">
    <div class="row">
        <div class="col-md-6">
            <input type="text" placeholder="Name *" id="name" name="name">
        </div>
        <div class="col-md-6">
            <input type="email" placeholder="Email *" id="email" name="email">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <input type="text" placeholder="WebSite" name="website">
        </div>
    </div>

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

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

@section Scripts {   
     <!-- jQuery -->
     <script src="~/js/jquery.min.js"></script>

     <!-- Bootstrap -->
     <script src="~/bootstrap/js/bootstrap.min.js"></script>

     <!-- Components Plugin -->
     <script src="~/js/jquery.easing.1.3.js"></script>

     <script type="text/javascript">
     $(function () {
            $("#btnPostComment").click(function () {
                var name = $("#name").val();
                var email = $("#email").val();
                var message = $("#message").val();

                var dataToPost = {};
                dataToPost.Name = name;
                dataToPost.Email = email;
                dataToPost.Comment = message;
                //How can I populate the BlogId and Blog properties here?

               $.ajax({
                    url: '@Url.Action("PostComment", "BlogData")',
                    data: JSON.stringify(dataToPost),
                    type: "POST",
                    dataType: 'JSON',
                    contentType: "application/json",
                    success: function(data) {
                        //do stuff with json result
                    },
                    error: function(passParams) {
                        console.log("Error is " + passParams);
                    }
               });
            });
        });
        </script>
}

Here is my BlogDataController PostComment action method where the properties in the blogComment parameter are all null.

[HttpPost]
public async Task<IActionResult> PostComment(BlogComments blogComment)
{
    if (blogComment != null)
    {
        await _context.BlogComments.AddAsync(blogComment);
        await _context.SaveChangesAsync();
    }

    var item = _mainBlogHelperModel.BlogDataItems.FirstOrDefault(x => x.Id == blogComment.Id);
    return new JsonResult(new { comment = blogComment.Comment, name = blogComment.Name });
}

The BlogComments model class

public class BlogComments
{
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Comment { get; set; }

        [ForeignKey("BlogID")]
        public int BlogId { get; set; }
        public BlogData Blog { get; set; }
}